【初心者向け】HTML/CSSで描くボタンの基礎moja.asia

webサイトでボタンを表示させる場合、ちょっと検索すれば様々なデザインが探せるが、簡単な理解が必要になる。
その基本。まずは基本的なボタンのCSS。

このボタンのコードは以下の通り。 HTML

<div class="btn"><a href="#">予約する</a></div>

CSS

/*予約ボタン*/
.btn{
    width:280px;/*ボタン幅*/
    height:70px;/*ボタン高さ*/
    line-height:70px;/*文字上下幅*/
    margin: 0 auto;/*画面中央へ*/
}
.btn a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#95A140;
    text-align:center;
    color:#FFFFFF;/*文字色*/
    font-size:20px;
    font-weight:bold;
    border-radius:2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
}
.btn a:hover{
    background:#0B16A1;
    color:#FFFFFF;
    margin-left:0px;
    margin-top:0px;
}

ボタンもコードも可能な限りシンプルにしてみました。以上のコードをコピペすれば、ボタンの大きさや色などを簡単に変更できます。

次にボタンと文字に装飾（影）を付けて、動きを付けてみます。

ボタン

分かりやすいように極端な色にしました。 margin: 0 auto;/を省いたのでセンターでは無くなりました。

HTML

<div class="btn2"><a>ボタン</a></div>

CSS

.btn2{
    width:280px;
    height:60px;
    line-height:40px;
}
.btn2 a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#950000;
    text-align:center;
    border:8px solid #1812FF;　/*ボタンの外枠*/
    color:#FFFFFF;
    font-size:30px;
    font-weight:bold;
    border-radius:9px;
    -webkit-border-radius:9px;/*ボタン角丸*/
    -moz-border-radius:9px;
    box-shadow:11px 11px 8px 0px #000000 ; /*ボタンの影*/
    text-shadow:3px 4px 4px #73FF97 ; /*文字の影*/
    transition: all 1.9s ease;/*ボタンの動く時間*/
}
.btn2 a:hover{
    background:#0099FF;
    color:#FFFC00;
    margin-left:20px;/*マウスオーバー時の横移動*/
    margin-top:13px;/*マウスオーバー時の縦移動*/
    border:8px solid #8CFF96;/*マウスオーバー時のボタン色*/
    box-shadow:11px 11px 8px 0px #000000 ;
}

以上が基本的なボタンの描き方になります。
コピペで必要な部分を変更しても使えます。