CSS3 Button Tutorial

Creating fancy buttons just got more easy with CSS3. You can apply gradients, shadows and corners to elements without using images. Using CSS3 for your buttons make it easy to apply changes like font-size or padding. The techniques used here can be applied to any element such as button, input, a, span, div and so on.

We are going to create following buttons:
CSS3 Button YellowCSS3 Button Blue
At first we need to define the properties which are similar for all buttons. The choice of padding, font-weight and font-size depends from button to button. For the rounded corners we need the border-radius property. Although it is already a standard in webkit, we still need the prefix for gecko. The border itself is set to zero pixels.

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

Also very important is the shadow we have on our buttons, which give it more depth. We use the box-shadow property and define a light colored shadow behind the button and with a wide spread. If you define the shadow to dark it will look unnatura

	-webkit-box-shadow: 0px 0px 10px #999;
	-moz-box-shadow: 0px 0px 10px #999;

As you can see we have little bit shadow on our letters, with CSS3 Text-Shadow property we can easily add this to any button. The shadow is light and has an opacity so it will differ slightly for every background. We set the shadow one pixel from our text to make it look natural.

text-shadow: 1px 1px 0 rgba(0,0,0,.2);
color: rgba(255,255,255,.9);

The background of the buttons can be done with CSS3 Linear Gradients. Instead of starting the gradient from the top to bottom we have a gradient between 20% to 80% of the background. In this way we see the difference between top and bottom more clearly. When a button is hovered we apply a slightly more darkened gradient as background.

background: -webkit-gradient(linear, center top, center bottom, color-stop(0.2, #FFC547), color-stop(0.8, #F09900));
background: -moz-linear-gradient(top, #FFC547 20%, #F09900 80%);

When a button is hovered we apply a slightly more darkened gradient as background.

background: -webkit-gradient(linear, center top, center bottom, color-stop(0.2, #FFBD2E), color-stop(0.8, #D68800));
background: -moz-linear-gradient(top, #FFBD2E 20%, #D68800 80%);

With only a few changes we can create many different buttons for our webpages using CSS3.