Turning Social Media Icons (Animated with html + CSS)

Most websites that care about promoting their content have social media icons on their site. While most are simple, with a slightly different color for their hover state, I decided to do something a little different with these social media icons. I took specific social media icons found in font awesome and used the CSS transform capability to have each icon flip over when you mouse over it and and then flip back when you move your mouse away. If you want to implement turning social media icons in your own website, download the source files I have provided for you, and drop the html and CSS in your own websites.

turning social media icons

The premise behind this method is to have the CSS set to a basic grey for each icon. Then, once you hover over an icon, it turns over and highlights in the brand color at the same time. This adds a little extra something more than just a simple color change. Using the transition property, it turns back when you remove your mouse. This creates an interesting effect that gets more attention than normal, un-animated hover states. It’s all done in CSS.

Demo and Download These Turning Social Media Icons

I am providing these turning social media icons for free. All you have to do is enter your email address below, and you’ll received them in your inbox in a few minutes. You are free to download them and use them in your personal or commercial projects. You can modify them however you’d like. Maybe you’d like to add other social media icons than the ones provided. You don’t even have to give me any credit for them, but it would be nice. Click the links below to view a live demo, or download the source files directly.

Demo | Download