css - 如何使用 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

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/

Answer 2

你需要像这里的东西吗？

我发现你的按钮需要阴影。而不是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;