Create stylish, rounded CSS3 buttons with shadows & highlights

In this tutorial we are going to be styling a standard <a> link in order to give it the appearance and depth of a button. We won’t be using any images, just CSS.

1. Adding the basic CSS

We use display: block to make the link a block-level element, causing it to start on a new line. Block-level elements take up 100% of their containers width by default so we also need to set a width.

Anyway, here is the CSS:

display: block;
width: 100px;
padding: 12px;
text-align: center;
font-family: trebuchet MS, arial, sans-serif;
font-size: 13pt;
font-weight: bold;
color: white;
line-height: 1;
background-color: #92BF2E;
border: 1px solid #70AB18;
border-bottom: 1px solid #528406;
border-right: 1px solid #528406;

Submit

2. Creating rounded corners with border-radius

The CSS3 border-radius property creates rounded corners on design elements. The border-radius property is widely supported by the most of the major web browsers, the biggest exceptions being Internet Explorer versions 8 and earlier.

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

Submit

3. Creating the drop shadow and inner highlight with box-shadow

The box-shadow property lets you implement outer and inner drop shadows on box elements. You can specify values for color, size, blur and offset and can have multiple shadows on one element separated by a comma. Browser support is good with IE adding it in IE9. Mozilla and Webkit require a line each of additional CSS using the -moz and -webkit prefixes.

It is a good idea to think of an imaginary light source that is creating the shadows and highlights and use this to pick your x and y offsets. In this case we are imagining the light be cast from the top-left to bottom-right.

-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), inset 0px 0px 2px #FFF;
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), inset 0px 0px 2px #FFF;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), inset 0px 0px 2px #FFF;

Submit

4. Creating the inset shadow for the button text with text-shadow

We are attempting to create an inset look for the text on our button. The text-shadow property does not have an inset option but we can achieve the same affect by adding a negative x and y offset.

This effect is supported in all major browsers except for Internet Explorer. It’s worth bearing this in mind when choosing the text and background colours, you want the text to be easily readable without a text-shadow.

text-shadow: #70AB18 -1px -1px 0;

Submit