BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

Creating Awesome Buttons Using CSS Only

Use CSS3 To Style The Perfect Button Effects

Many effects are popular with webmaster, few more so than the button effect. Whether for linking, navigation or even form submission stylish buttons have always been a popular choice. Back when CSS was in its infancy the only real way to create an effective button was to use an array of images, one for each state of the button. These days however CSS has come along and made the whole process much more manageable.

Take a look at the buttons shown below, they are created using nothing but CSS.

Red Button Green Button Blue Button

Granted many of the effects used above are very modern CSS3 techniques, as such you need a modern browser to enjoy them. Browser support for such effects is growing by the day and users on the whole are much more active in keeping their browsers up to date.

Below is an image to show how these buttons should look.

Awesome CSS3 Buttons

The CSS to create these buttons is not actually that difficult, the only features that may be new to some of you are the box-shadow, gradients and transforms. The best way to understand these within the context of this article is to look at the full button code as shown below.

HTML
<a class='red-button' href='#no'>Red Button</a>

And the styling...

CSS

.red-button 			{
	padding:10px 40px; 
	color:#eee; 
	font-family:arial, san-serif; 
	font-weight: bold; 
	text-decoration: none; 
	border:solid 1px rgba(0,0,0,0.4); 
	text-shadow: #000 1px 1px 2px; 
	background:#ff0000; 
	border-radius: 3px; 
		-webkit-border-radius: 3px; 
		-moz-border-radius: 3px;
	box-shadow: 0px 1px 3px #000, inset 0px 0px 5px #fff; 
		-o-box-shadow: 0px 1px 3px #000, inset 0px 0px 5px #fff; 
		-webkit-box-shadow: 0px 1px 3px #000, inset 0px 0px 5px #fff; 
		-moz-box-shadow: 0px 1px 3px #000, inset 0px 0px 5px #fff;
	background-image: gradient(center bottom, #cc0000 29%, #ff0000 80%); 
		background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.29, #cc0000), color-stop(0.80, #ff0000)); 
		background-image: -moz-linear-gradient(center bottom, #cc0000 29%, #ff0000 80%);
}

.red-button:hover		{
	color:#eee;
	background:#ff0000;
}

.red-button:active		{
	color:#eee; 
	background:#ee0000;
	box-shadow: 0px 1px 1px #000, inset 0px 0px 5px #fff; 
		-o-box-shadow: 0px 1px 1px #000, inset 0px 0px 5px #fff; 
		-webkit-box-shadow: 0px 1px 1px #000, inset 0px 0px 5px #fff; 
		-moz-box-shadow: 0px 1px 1px #000, inset 0px 0px 5px #fff;
	transform: scale(0.95, 0.95); 
		-moz-transform: scale(0.95, 0.95); 
		-o-transform: scale(0.95, 0.95); 
		-webkit-transform: scale(0.95, 0.95);
}

This will result in the button shown below. I have also included the various cross browser fixes which are currently necessary for compatibility, delete these as appropriate.

Red Button

The main components to take note of are the border-radius, the box-shadow, the background gradient and the transform scale. The larger the border-radius the more rounded the ends of your button will be. In the above example the box-shadow applies a dark shadow behind the button and a lighter shadow inset within the button. The gradient gives the button a subtle curve to its surface. Finally, the transform property reduces the button to 95% of its original size when it is active i.e. when someone click its. This gives the effect that the button is being pressed in.

The above example shows how a button can be easily styled using CSS. Use it as a starting point, play around with the colours, shapes and shadows and you are bound to find a style you like.

As always, any questions just ask.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus