ボタンの作り方

スマホサイトでよく見かける

この手のボタンの作り方です。



html

    btn_L

css

.btn_L{
    margin: 0px auto;
    display: block;
    width: 270px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    border-radius: 3px;
    color: #321e09;
    text-shadow: 1px 1px 1px #f0d6a7;
    background:
        -webkit-gradient(linear,left top, left bottom,
        from(#d4b37a),
        color-stop(0.6,#9f7e3f),
        to(#6d4d19));
    box-shadow:
        1px 1px 0px #1f0f04,
        inset 1px 1px 0px #c8b58d,
        inset -1px 1px 0px #c8b58d,
        inset 1px -1px 0px #c8b58d,
        inset -1px -1px 0px #c8b58d;
}
.btn_L a{
    display: block;    //リンクの判定をボタンサイズに
    color: #321e09;
}