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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul class="list-inline"> <li> <a href="github.com/MattSalamon" class="orange social-roll"><i class="fa fa-github"></i></a> </li> <li> <a href="https://www.youtube.com/c/mattsalamon" class=" red social-roll"><i class="fa fa-youtube"></i></a> </li> <li> <a href="https://twitter.com/MattSalamon1" class="blue social-roll"><i class="fa fa-twitter"></i></a> </li> <li> <a href="google.com/+MattSalamon" class="lightred social-roll"><i class="fa fa-google-plus"></i></a> </li> <li> <a href="https://www.linkedin.com/in/mattsalamon/en" class="darkblue social-roll"><i class="fa fa-linkedin"></i></a> </li> </ul> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
.list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; margin: 5px 0px 0px 5px; } * { box-sizing: border-box; } .list-inline { list-style: outside none none; } .social-roll { display: inline-block; width: 50px; height: 50px; border: 2px solid #B8B8B8; border-radius: 100%; text-align: center; font-size: 20px; line-height: 45px; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -o-transition: all ease 0.5s; -ms-transition: all ease 0.5s; transition: all ease 0.5s; } .social-roll:hover { box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); color: #FFF !important; background: #FFF; -webkit-transform:rotate(720deg); -moz-transform:rotate(720deg); -o-transform:rotate(720deg); -ms-transform:rotate(720deg); transform:rotate(720deg); } .orange.social-roll:hover { background: #FF9933; } .blue.social-roll:hover { background: #4099FF; } .lightred.social-roll:hover { background: #DC4E41; } .red.social-roll:hover { background: #CD201F; } .darkblue.social-roll:hover { background: #0077B5; } |
I got the company colors from brandcolors.net-a truly great site! CSS3 animated social buttons with no need for hefty images!
Leave a Reply