Pretty HTML buttons with CSS

What it is

To make a pretty button, add the CSS class button to a link or a form submit button. Tested with Safari 4, Firefox 3.6, IE 6 and 7.

Screenshot

Demo

See live demo

CSS

.button {
	font: bold 13px "Helvetica Neue", Helvetica, Arial, clean, sans-serif !important;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	display: inline-block;
	color: white;
	padding: 5px 10px 5px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	background: #A9014B url(button_overlay.png) repeat-x scroll 0 0;
	border-style: none;
	text-align: center;
	overflow: visible;
}
 
.button:hover,
.button:focus {
	background-position: 0 -50px;
	color: white;
}
 
.button:active {
	background-position: 0 -100px;
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
	-webkit-box-shadow: none;
}

For IE6 only 

.button {
	background-image: none;
	zoom: 1;
}

Different height problem

In most browsers (but Safari), the submit button is higher than the link.

A solution: use Javascript to replace the submit button by a link which submits the form.

See live demo (using jQuery) 

$('form a.submit_form').live('click', function(){        
		$(this).parent('form').submit();
	return false;
});
 
$('input[type=submit].button').each(function(){
	$(this).after('<a href="" class="button submit_form">' + $(this).val() + '</a>');		
	$(this).remove();
});

Reference

 
 

Feedback