---
comments: true
date: 2011-01-23 16:55:38
layout: post
slug: link-recreating-the-lukes-beard-social-icons-with-css3
title: 'Link: Recreating the Luke''s Beard social icons with CSS3'
wordpress_id: 2258
categories:
- Web Development
tag:
- CSS
- CSS3
- Progressive Enhancement
---

I was browsing [Dribbble](http://dribbble.com/csswizardry) this afternoon when I came across [Luke's Beard profile](http://dribbble.com/lukesbeard/) and then, in turn, [his website](http://www.lukesbeard.com/). 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](/demos/lukes-beard-social-icons/).



## [Demo](/demos/lukes-beard-social-icons/)



I won't write everything up because a view of the source and [CSS](/demos/lukes-beard-social-icons/css/style.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.