Link: Recreating the Luke's Beard social icons with CSS3

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

I was browsing Dribbble this afternoon when I came across Luke’s Beard profile and then, in turn, his website. I noticed some pretty cool hover effects going on with his social icons which I decided to recreate without JavaScript and using some progressive CSS.

Demo

I won’t write everything up because a view of the source and CSS should explain everything.

Luke did not commission this work, so please don’t reuse the icons or copy this without permission from the respective people. I allow full use of my code (with attribution) but please don’t copy Luke’s format for social icons–the code is mine but its implementation on social icons is Luke’s.

In short, you can have my code but it was Luke’s idea.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.