CSS image sprite

A common problem has been found for web designer is the rounded corner buttons,div etc.Usually we use images but now we can simply create rounded corner with "border-radius:5px;" it create rounded corner with 5px radius.if we are talking about all browsers ,CSS3 property will work on higher versions of IE9 and above. And another issue is when a page is loading you can see images are load one by one.solve these issues by using image sprites.

so create an image shown as below:

Step 1: create style for the button

.Contact_Sendbtn

{

width:97px;

height:27px;

background:#3399FF;

border-radius:5px;

background:url(Sendbtn.png)\9; //specific for IE//

line-height:28px;

color:#fff;

text-align:right;

curser:pointer;

text-shadow:#999;

margin-right:5px;

font-family:Arial;

font-size:13px;

font-weight:bold;

}

.Contact_Sendbtn:hover

{

background:#6DCA44;

border-radius:5px;

background:url(Sendbtn.png)\9;

background-position:0px -29px;

}

.Contact_Sendbtn span{ padding-right:5px; }

Step 2:

Add the class on your HTML

Try and enjoy :)