How to achieve this Button look

Please see the Button Image which i want to achive

http://www.tiikoni.com/tis/view/?id=6192767

I tried a lot , but i am unable to achive that look

I have tried this way , could anybody please help me in this ?? Thii is the code i have tried

.button {
     background-color:black;
    padding: 2px 8px;
    position:relative; left :710px; width :100px; height :25px;
    font-weight: bold; 开发者_如何转开发color:white; font-size: 15px" ;
   padding: 2px 8px;
}
.button:hover {

   background-color:grey;

}

Take a look at these :

http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

http://speckyboy.com/2010/02/15/20-css3-tutorials-and-techiques-for-creating-buttons/

I'd go with something like this:

button {
    color: white;
    font-weight: bold;
    padding: 4px 12px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid black;
    background-image: -webkit-gradient(linear,  left bottom, left top, color-stop(0.45, #000000), color-stop(0.55, #5E5E5E));
    background-image: -moz-linear-gradient(center bottom, #000000 45%, #5E5E5E 55%);
}

.button {
     border:2px solid;
     border-radius:8px;
    -moz-border-radius:8px; /* Firefox 3.6 and earlier */
     background-color:black;
    padding: 2px 8px;
    position:relative; left :710px; width :100px; height :25px;
    font-weight: bold; color:white; font-size: 15px" ;
   padding: 2px 8px;
}
.button:hover {

   background-color:grey;

}

This will works for CSS3 (not IE8).

Use a background image instead of a background color. To get the rounded corners you can either use CSS3, or create an image at the exact size as the buttons.