ボタンデザイン一覧
HTMLとCSSのみで実装できるシンプルで実用的なボタンデザイン
-
シンプルなボタン
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; background: #ef4565; color: #fff; }
コードを見る -
シンプルなボタン(角丸小)
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; background: #ef4565; color: #fff; border-radius: 10px; }
コードを見る -
シンプルなボタン(角丸大)
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; background: #ef4565; color: #fff; border-radius: 50px; }
コードを見る -
シンプルなボタン(線)
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; background: #fff; color: #ef4565; border: solid 1px #ef4565; }
コードを見る -
グラデーションボタン
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; background: linear-gradient(to right, #ef4565 0%, #c10ecd 100%); color: #fff; }
コードを見る -
矢印付きのボタン1
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; position: relative; background: #ef4565; color: #fff; } a.button::after { content: ''; position: absolute; top: 0; bottom: 0; right: 20px; width: 0; height: 0; margin: auto 0; border-top: solid 6px transparent; border-bottom: solid 6px transparent; border-left: solid 12px #fff; }
コードを見る -
矢印付きのボタン2
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; position: relative; background: #ef4565; color: #fff; } a.button::before, a.button::after { content: ''; position: absolute; top: 0; right: 20px; bottom: 0; margin: auto; vertical-align: middle; } a.button::before { width: 20px; height: 20px; border-radius: 50%; background: #fff; } a.button::after { right: 27px; width: 6px; height: 6px; border-top: solid 3px #ef4565; border-right: solid 3px #ef4565; transform: rotate(45deg); }
コードを見る -
矢印付きのボタン3
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; position: relative; background: #ef4565; color: #fff; } a.button::after { content: '→'; position: absolute; top: 0; right: 20px; height: 100%; }
コードを見る -
横線付きのボタン
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; position: relative; background: #ef4565; color: #fff; } a.button::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; margin: auto 0; width: 60px; height: 1px; background: #fff; }
コードを見る -
内側に線付きのボタン
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 52px; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; position: relative; background: #ef4565; color: #fff; border-radius: 50px; } a.button::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; height: 80%; border: solid 2px #fff; border-radius: 50px; }
コードを見る -
立体的なボタン
<a href="#" class="button">ボタン</a>
.button { display: block; width: 240px; height: 50px; line-height: 48px; margin: 0 auto; font-size: 16px; text-align: center; letter-spacing: .2em; text-indent: .2em; text-decoration: none; background: #ef4565; color: #fff; border-bottom: solid 4px #810b3a; }
コードを見る