Better Animated Social Buttons

Better Animated Social Buttons

Here’s a nice DRY way to color in  the social buttons with their individual company colors. You can see the effect in my sidebar. Previously I’ve seen this effect done with background images. I think this way is slightly better.


We’ll start with this post from 2013 where the effect is acheived by switching background images. To update it, I used font awesome icons and simply made a new class for each company color:

First the markup:





This creates the list items- which are font-awesome icons,  and assigns a different color class to each one, as well as the ‘social-roll’ class-which handles the styling like circle outline, rotation animation, ect. The cool part is that all of this shared styling is retained, and we can just create individual color classes for each one like so in the CSS:


Now for the styling:

I got the company colors from truly great site! CSS3 animated social buttons with no need for hefty images!


Leave a Reply

Your email address will not be published. Required fields are marked *