Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Large Pressable CSS Button

    CSSDeck G+