CSS3 Pseudo 3D Radial Buttons

There is no images or JavaScript used.

Best viewed in Webkit browsers, because of working box-shadow transitions.

Features used:

• border-radius
• box-shadow
• text-shadow
• transitions
• gradients
• :nth-child() pseudo-class

While Opera and Firefox are using box-shadow inset property for inner shadow, Webkit browsers are using background:-webkit-gradient. But in the next Chrome release it'll be good to switch to box-shadow inset (already works in Safari 5).

Designed by Denis Arkhipov with a hand of Cosmos-Web for Smashing Magazine readers.
June 29th, 2010.