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