How to make rounded buttons with the button element
25 pixel high buttons at your service:
button {
border: 0;
padding: 0;
font-variant: small-caps;
height:25px;
background: transparent url('../images/button-background-left.png') no-repeat;
cursor: pointer;
text-align: center;
}
button span {
font-family: georgia,serif;
line-height: 25px;
background: transparent url('../images/button-background.png') no-repeat top right;
position:relative;
display:block;
white-space:nowrap;
margin-top: -2px;
padding:0 15px;
}
HTML:
<button type="submit" value="Hello"><span>Hello »</span></button>
IE 6 & 7 might need:
button {
width:auto;
overflow:visible;
}
button span {
margin-top:1px;
}