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

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.


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.

Did you enjoy this? Hire me!

Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.

I am currently accepting new projects for Q1–2 2017 Referral scheme


  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines


I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.