Beautiful and Simple Buttons with CSS

I have always been fond of CSS wonders. Although We all have seen lots of buttons using CSS, using JS, but today I am bringing you a fresh implementation of buttons.

The real beauty of these buttons are in its background images. In this tutorial I have also included the photoshop(psd) file used in creation of these buttons, so feel free to come up with your own imagination.

Since I wanted these buttons to be flexible, I have made the background image expand with the size of the button's text. For that, I have used the beloved sliding doors technique; two complementing images creating the illusion of a single, stretching image.

Lets head on to the real implementation of these buttons.

HTML

<a class='button' href='#'>
	<span>Hello World</span>
</a>

CSS

a:link.button, a:visited.button, a:hover.button , a:active.button{
	background:url(btn-l.png) no-repeat 0 0;
	display:block;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:bold;
	padding-left:13px;
	color:#969696;
	outline:none;
	margin:20px 0;
}
a:hover.button{
	background-position:0 -45px;
	color:#0D4289;
}
a:active.button{
	background-position:0 -91px;
	color:#00306F;
}
a:hover.button span{
	background-position: right -45px;
	color:#0D4289;
}
a:active.button span{
	background-position: right -91px;
	color:#00306F;
}
a.button span{
	display:block;
	text-align:center;
	line-height:44px;
	padding:0 5px;
	background:url(btn-r.png) no-repeat right 0;
}

The background images used in these buttons are

btn-l.jpg

btn-r.jpg

Demo

For the demo please click here See Buttons in Action

Download

You can grab the source file used in these buttons (including PSD) here.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Other Posts which you may like:

1. Another Beautiful Thumbnail Hover Effect : Using Mootools
2. Beautiful Thumbnail Hover Effect : Using Mootools
3. CSS on Tables : HTML Tables 2.0
4. Optimize CSS : Tips to optimise css files
5. Sexy Tooltip using CSS3 (no images)