Live Adobe MAX – The Creativity Conference
Learn from the best in the creative industry.
Watch now
Twitter CSS button
The button was coded in HTML5 and CSS 3. Note that it has no images! The button adjusts for three states: normal, hover and active.

View the button →

It displays a slightly different version of the original design — bird is looking to the right and has different feathers — but that’s not an issue. The problem I encountered was how to code the shadow inside of the bird (text). As developers know, CSS text-shadow property doesn’t have an inset modifier like box-shadow has. The solution I came up with was to stack text shadows on top of each other.

Inset text-shadow with CSS
The method of creating a pseudo-inset effect is simple. Have the bottom text-shadow without feather far above from the text. Stack the next text-shadow on top of it, lower, with some feathering and lighter colour. Finally, add another text-shadow even lower with feathering and an even lighter colour. The last text-shadow should match the colour of the text.

When tested on Chrome it looks somewhat bad. It’s a bit blurry. I am aware that there are other solutions on the Internet but none of them work on Firefox, yet. And I’m on Firefox, so…

Check out my portfolio: SicanStudios

Follow me on Twitter: @sican