Making animated CSS3 social buttons



In this article we will create a few sets of animated social buttons with CSS3. We will be making use of CSS3 border-radius, transition and transform. We will also be using the icon font Brandico. This will allow us to create our CSS3 social buttons without using any images for the icons.

The demo and source code for the CSS3 social buttons can be seen below. Go ahead and hover your mouse over them.

Note: The demo makes use of Prefixfree.js to write CSS without browser-specific prefixes.

The HTML

The HTML is a simple un-ordered list with list-items. We add the Brandico icon classes to the links inside of the list.

<ul class="social-buttons">
  <li>
    <a href="#" class="brandico-twitter-bird"></a>
  </li>
  <li>
    <a href="#" class="brandico-facebook"></a>
  </li>
  <li>
    <a href="#" class="brandico-instagram"></a>
  <li>
    <a href="#" class="brandico-vimeo"></a>
  </li>
  <li>
    <a href="#" class="brandico-linkedin"></a>
  </li>
</ul>

The general CSS styling

Now that we have a list of links with social icons, we need to style them to make them look like social buttons of course!

ul.social-buttons {
  text-align: center;
  margin-top: 50px;
}

ul.social-buttons li {
  display: inline-block;
  margin: 0 10px;
}

ul.social-buttons li a {
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 50px;
  text-decoration: none;
  font-size: 30px;
  line-height: 60px;
  color: white;
}

The first two blocks of CSS just position the list and the list-items. Then on  the a-tag I set a static width and height, as well as a line-height so that our icons will center vertically inside the list-item. I also made the color of the icons white and removed the text-decoration.



But our buttons have no background now! Let’s fix that. I used the following brand colors and applied them to the Brandico classes:

ul.social-buttons li a.brandico-twitter-bird {
  background-color: #4099FF;
}

ul.social-buttons li a.brandico-facebook {
  background-color: #3B5998;
}

ul.social-buttons li a.brandico-instagram {
  background-color: #3f729b;
}

ul.social-buttons li a.brandico-vimeo {
  background-color: #4EBBFF;
}

ul.social-buttons li a.brandico-linkedin {
  background-color: #0e76a8;
}

Making our social buttons animated

Now let’s use CSS3 transform and transition to animate the social buttons.

First, we need to define a  transition on our a-tag. The shorthand notation of transition is as follows: <property> <duration> <transition-function> <delay>. Here is what I did in the first row of buttons on the CodePen demo:

ul#demo1 li a {
  transition: transform 0.2s linear;
}

We have now defined that we will execute the transition from the base state of the transform property to the final state in 0.2 seconds in a linear function.

Now we can use the :hover pseudo-class to execute the animation

ul#demo1 li:hover a {
  transform: translateY(-10px);
}

And that’s it! Here are the other two animations:

/*Demo 2*/
ul#demo2 li a {
  transition: transform 0.5s ease-in-out;
}

ul#demo2 li:hover a {
  transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
}

/*Demo 3*/
ul#demo3 li a {
  transition: transform 0.2s ease-in-out;
}

ul#demo3 li:hover a {
  transform: rotateZ(27deg) scale(1.1);
}

You can now basicly make any kind of animated buttons with this. You aren’t limited to using transform. You could change color, background-color, …

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+18Share on StumbleUpon108Share on Reddit0Share on LinkedIn6Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!