Question

请参阅我想要的按钮图像

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

我尝试了很多，但我无法实现这种看法

我试过这种方式，有人可以帮我吗？这是我试过的代码

.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;

}

Answer 1

看看这些：

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/

Answer 2

我会选择这样的事情：

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%);
}

Answer 3

使用背景图片而不是背景色。要获得圆角，您可以使用CSS3，也可以创建与按钮一样大小的图像。

Answer 4

.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;

}

这适用于CSS3（不是IE8）。

如何实现这个Button外观

4 个答案: