Large Pressable CSS Button
Pressable Button (has a 3D effect) made by François Robichet and inspired by Dan Cederholm's CSS3 button. The process to make this button is quite straightforward.
In the HTML markup, you need a span
element inside an a
element.
Next in the CSS, first you just need to apply a proper background
color along with border-radius
to the span element. Then you apply the font of your choice (if any) and replace the background's plain color with CSS3 (linear) Gradients. Next, you need to use box-shadow
to apply shadows and add depth to the button (to the anchor element, to be more specific). Remember, the shadow that adds the depth to the button should not have any blur value in the declaration. In order to achieve the press effect the span
element is then moved few pixels down on the y axis using CSS3 transform
property with translate
as the transform function. Finally, transitions is added for box-shadow
on the a
element and for tranform
on the span
element. Precisely, that's the entire approach.
Lot's of CSS3 features used to make this button is not supported by IE9 and below but hopefully it will degrade just fine.