ボタンのパターン集を作成しました。
コピペで使っていただいてOKです。
<div class="btn">ボタン</div>上記のHTMLをCSSでカスタマイズしていきます！
はにわまんコピペで実現可能ないろいろなボタンのパターンをまとめました！
ベースのボタン
.btn {
display: inline-block;
padding: .6em 2em;
margin: 0 0 1em;
background-image: none;
background-color: #4CAF50;
color: #fff;
text-decoration: none;
border: none;
border-radius: 0;
cursor: pointer;
-webkit-appearance: none;
box-shadow: 1px 1px 3px 0 rgba(0,0,0,.2);
position: relative;
}
.btn:hover,
.btn:focus {
outline: none;
}
.btn::-moz-foucus-inner {
padding: 0;
border: none;
}色々な場面を想定してボタンのCSSをリセットしているようなCSSです。（色も指定しない方が管理する上ではベストかもしれません。）
この上にCSSを乗せていきます！
アローボタン
アローボタンとは、ボタンの右側に矢印のアイコンをつけて「ボタンであることの認知度を上げる」ことのできるボタンです。
Font Awesomeのアイコン素材を使っています。
→ http://fontawesome.io/
矢印
<div class="btn btn-arrow">ボタン</div>.btn.btn-arrow {
padding-right: 2.5em;
}
.btn.btn-arrow::after {
position: absolute;
content: "\f061";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top: 50%;
right: 4px;
left: auto;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}三角
<div class="btn btn-caret">ボタン</div>.btn.btn-caret {
padding-right: 2.5em;
}
.btn.btn-caret::after {
position: absolute;
content: "\f0da";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top: 50%;
right: 4px;
left: auto;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}「く」記号
<div class="btn btn-angle">ボタン</div>.btn.btn-angle {
padding-right: 2.5em;
}
.btn.btn-angle::after {
position: absolute;
content: "\f054";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top: 50%;
right: 4px;
left: auto;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}ゴーストボタン
ゴーストボタンとは、濃い背景の中に溶け込むように設計された、背景色が透明のボタンです。
<div class="btn btn-ghost">ボタン</div>.btn.btn-ghost {
color: #333;
background: none;
border: 1px solid rgba(0,0,0,.2);
box-shadow: none;
}グラデーション
ひと昔前に流行ったグラデーション。最近は逆に「ダサい」という風潮にありますが、作り方だけはおさらいしておきましょう。
<div class="btn btn-gradation">ボタン</div>.btn.btn-gradation {
background: linear-gradient(#81C784, #4CAF50);
}立体的なボタン
ボタンは押せることを読者に認識してもらうことが大事です。立体的なボタンにすると、「押せる」と認識されやすくなります。
立体を表現する方法は、影と線の２パターンあります。
影で立体を表現
実はベースのボタンも影をつけていますが、もっとハッキリとした影をつけてみましょう。
<div class="btn btn-shadow">ボタン</div>.btn.btn-shadow {
box-shadow: 2px 2px 3px 0 #333;
}box-shadowの使い方については、以下にまとめています。
→ 影を操れ！box-shadowの使い方を分かりやすく解説します
線で立体を表現
<div class="btn btn-border">ボタン</div>.btn.btn-border {
border-bottom: 3px solid #1B5E20;
box-shadow: none;
}ベースとなる色より、濃い色を使うといい感じになります。
濃い色を見つけるには、Syncer様の「カラーコード変換ツール」がとても便利です。
→ https://syncer.jp/color-converter
角を丸める
角を丸めると少しポップなボタンになります。
<div class="btn btn-radius">ボタン</div>.btn.btn-radius {
border-radius: 8px;
}マウスオーバー時の動き
マウスオーバーした時の動きでサイトに個性が生まれます。
透過
多くのサイトでよく使われています。
<div class="btn btn-opacity">ボタン</div>.btn.btn-opacity:hover {
opacity: .6;
}opacityは透明度を表現するCSSで、0~1の間で表現します。0に近づくほど透明になります。
拡大
<div class="btn btn-zoom">ボタン</div>.btn.btn-zoom:hover {
transform: scale(1.2, 1.2);
}幅、高さを１．２倍しています。
浮かぶ
<div class="btn btn-float">ボタン</div>.btn.btn-float:hover {
transform: translate(0, -10px);
box-shadow: 5px 5px 3px 0 rgba(0,0,0,.2);
}ボタン自体は上に移動しているだけですが、影の効果を使って浮かび上がっているように表現しています。
おわり
ボタンのデザインをまとめました。今後も追加し続けていきます。
気になるボタンがあったら使ってみてください！
