Create rounded corner buttons in HTML using CSS and Sprite

Dear Friends,

Here is an easiest way to created rounded corner buttons in html using CSS and Image sprite.

Depends of text width, the button width will increase by keeping left and right side radius. It will be useful if your website uses multiple languages.

Also have a mouse hover style.

Actually my requirement was like this -

Any way, you can customize this if you don't want left side icon over the button. Write me please if you need any help - firosit@gmail.com

You also need to use following three images

HTML
=====================


<div id="button">
    <div id="left"></div>
    <div id="middle">SHARE</div>
    <div id="right"></div>
</div>



CSS
=====================
#left {
clear:both;
background: url(left.png) no-repeat top left;
width:36px;
height:36px;
float:left;
cursor:pointer;
}

#middle {
height:36px;
background: url(middle.png);
float:left;
cursor:pointer;
color:white;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:26pt;
padding-right:10px;
}

#right {
background: url(right.png) no-repeat top left;
width:8px;
height:36px;
float:left;
cursor:pointer;
}

#button:hover #middle {
background: url(middle.png) 0 -35px;
}
#button:hover #left {
background: url(left.png) 0 -35px;
}
#button:hover #right {
background: url(right.png) 0 -35px;
}