2

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;
}
4

2 に答える 2

0

ここのようなものが必要ですか？

ボタンに影が必要であることがわかりました。そして代わりに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;
于 2013-08-10T13:36:53.153 に答える
0

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/

于 2013-08-10T13:39:25.487 に答える