CSS Rounded Buttons

This technique is simple and effective way to have buttons with nice rounded edges using plain CSS without any Javascript usage.

This method was tested on these common browsers:

• Internet Explorer
• Mozilla Firefox
• Opera
• Safary
• Google Chrome

CSS Code:

.button {
 cursor: pointer;
 display: -moz-inline-box;
 display: inline-block;
 padding-left: 5px;
 padding-bottom: 1px;
 line-height: 19px;
 background-position: lef top;
 background-repeat: no-repeat;
 background-image: url(btn-left.gif);

}

.button span {
 padding-left: 10px;
 display: -moz-inline-box;
 display: inline-block;
 padding-right: 15px;
 padding-bottom: 1px;
 line-height: 19px;
 background-position: right top;
 background-repeat: no-repeat;
 background-image: url(btn-right.gif);
}

<a class="button" href="http://about-jsharp.blogspot.com/"><span>Button1</span></a>

Click here to download sample code with images