Красивая кнопка на CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
.button.blue:hover {
background-color: #C95039;
}
.button.blue {
background-color: #666;
border: 1px solid #9B9B9B;
font-weight: 900;
vertical-align: middle;
display: inline;
text-shadow: 0px 0px 9px white;
}
.button.rounded {
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
}
.button {
font-family: Arial, sans-serif;
width: 106px;
height: 22px;
padding: 9px 12px;
margin: 16px;
font-size: 24px;
line-height: 12px;
color: white;
text-align: center;
position: relative;
z-index: 2;
cursor: pointer;
background: transparent url(../images/overlay.png) repeat-x 100% 100% scroll;
box-shadow: 0 0 0 4px rgba(214, 214, 214, .6), inset 0 1px 0px 0px rgba(255, 255, 255, .4), inset 0 -1px 1px 0 rgba(0, 0, 0, .1);
-webkit-transition: background-color .3s linear;
-moz-transition: background-color .3s linear;
-o-transition: background-color .3s linear;
transition: +;
box-shadow: 0 0 20px #555;
-moz-box-shadow: 0 0 20px #555;
-webkit-box-shadow: 0 0 20px #555;
}
</style>
</head>
<body>
<br><br><br><br><center>
<div id="buttons">
<div class="button blue rounded">Заказать!</div>
</div>
</center>
</body>
</html>