How To Create A CSS Animated Share Button

Every website now has social network share buttons on their site, if you don't have them then you really should do. They're a great way to give your visitors easy access to share your content with their friends and followers.

The thing with social network share buttons is that they all look the same on every website, you can take this two ways. It's either a good thing because people will recognise them and understand how to use them or it's a bad thing because now your website looks the same as every other website on the internet.

In this tutorial we are going to create a share button which uses CSS animation to display the links to share the current page on Facebook, Twitter, Google Plus and Pinterest.

First we are going to start off creating the HTML which will display some text such as Share This Page. Then when we hover over this text we want to use CSS animation to display the share buttons.

View the demo to see what we are going to create.

Demo

Read more...