Large Pressable CSS Button
In the HTML markup, you need a
span element inside an
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.