如何使用CSS制作按钮

Question

如何使用CSS创建一个按钮？

我已经尝试了，但是我无法想象我应该如何制作这样的边界底线..我的结果：http://jsfiddle.net/UPpfw/

.button_push{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 189px;
height: 54px;
display: block;    
}
.button_green{
    background: #4ec9a6;
    border-bottom: 7px solid #00a09a;
}

我已经解决了问题，解决方案是：http://jsfiddle.net/TmQzX/

.button_push{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 189px;
height: 54px;
display: block;    
text-align: center;
line-height: 47px;
text-decoration: none;
}
.button_white{
    background: #4ec9a6;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 189px;
    height: 49px;
    display: block;
}
.try_button{
    width: 189px;
    height: 54px;
    position: relative;
    top: 212px;
    margin: auto;
}

Answer 1

你需要像here这样的东西吗？

我发现你的按钮需要阴影。而不是border-bottom: 7px solid #00a09a;

我建议使用框阴影

-webkit-box-shadow: 0 8px 3px -2px #00a09a;
       -moz-box-shadow: 0 8px 3px -2px #00A09A;
            box-shadow: 0 8px 3px -2px #00A09A;

Answer 2

的CSS：

.button_push{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 189px;
    height: 54px;
    line-height:54px;
    display: block;    
}
.button_green{
    background: #4ec9a6;
    border-bottom: 5px solid #00a09a;
    text-align:center;
    color: white;
    text-decoration:none;
    font-size:25px;
    font-weight:bold;
    font-family: Sans-Serif;
}

小提琴：http://jsfiddle.net/UPpfw/6/