user profile image

CSS only animation effect on hover of these simple but fun social buttons.


  1. Very classy, well done.

  2. Nice touch on the font size! Loving the transitions :)

  3. Love these. My be a stupid question, but where do the three images for each logo come in to play?

  4. xevolito, Thanks for the tip!

  5. Nice work.

  6. Fantastic. ;)

  7. @xevolito, thank you. I also had the same question!

  8. This is absolutely amazing! Just a question, though, and this may be a noob one: how would you go about changing the size of just one of them? html .twitter { font-size: 10 px; } makes the bird itself smaller, not the circle around it... Any help would be appreciated!

  9. Made an account to ask the following question. I cannot see what the social icons are, the only thing that pops up for me is the colored circle within the circle. I know the CSS is pulling from an outdated Font Awesome stylesheet, they are up to v4.7.0 right now. So my question is, what needs to be done to get the icons to show up? I tried to modify the CSS a bit to accommodate for the updated styling (I linked the correct CSS file), alas, didn't have any noticeable change. Thank you in advance to anyone that can help me out.

  10. Solved my issue a few days ago. Turns out the outdated version of FontAwesome this is pulling from is inconsequential if you simply grab the unicode of any icon you need from the updated version instead. For instance, the 3.1.1 Font Awesome style sheet does not have an icon for Instagram, head over to the current Font Awesome style sheet and grab its unicode of "f16d" and apply to the pseudo element at the end of the CSS on this page. The correct format is this:

    .icon-instagram:before {



    Hope this helps anyone who may need it.

  11. Oh, and for the updated icons to work, you (obviously) have to add the Font Awesome style sheet you are pulling the unicodes from, to your CSS. At the time of writing this post, this version was the most current:


  12. I would like to use it in my client's project, if I can...

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.