記事内に商品プロモーションが含まれる場合があります
今回はWeb用のボタンデザインを100個まとめて紹介します。ユニークなボタンもたくさん作ってみました。どれもHTMLとCSSだけ。画像は使っていません。コピペ＆必要に応じて修正してご利用くださいませ。
CSSがうまく反映されないときはこちらの記事を参考にしてみてください。
1. 立体的なボタン
押し込み式
コードを見る
HTML
<a href="#" class="btn-square">BUTTON</a>
CSS
.btn-square {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn-square:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
最近Webでよく見かける厚みのあるボタンです。クリック（タップ）すると、沈みます。カーソルを当てるだけで沈むようにしたい場合は「:active」を「:hover」に変えましょう。
影付き
コードを見る
HTML
<a href="#" class="btn-square-shadow">BUTTON</a>
CSS
.btn-square-shadow {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn-square-shadow:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
border-bottom: none;
}
上のボタンに影をつけて、さらに立体感を出してみました。
文字をエンボスに
コードを見る
HTML
<a href="#" class="btn-square-emboss">BUTTON</a>
CSS
.btn-square-emboss {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #4868ad;/*ボタン色より暗く*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #627295;
border-radius: 3px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.btn-square-emboss:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}文字色を暗めにして周りに白っぽいシャドウをつけることで、凹んでいるように見せています。
浮き出し文字
コードを見る
HTML
<a href="#" class="btn-square-raised">BUTTON</a>
CSS
.btn-square-raised {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #668ad8;/*ボタン色と同じに*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #627295;
border-radius: 3px;/*角の丸み*/
font-weight: bold;
text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}
.btn-square-raised:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
文字の左と上に白の影を、右と下に黒の影をつけることで、文字が浮き上がっているような表現になります。
斜めから見たように
コードを見る
HTML
<a href="#" class="btn-square-slant">BUTTON</a>
CSS
.btn-square-slant {
display: inline-block;
position: relative;
padding: 0.5em 1.4em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 5px #36528c;/*ボタン色より暗めに*/
border-right: solid 5px #5375bd;/*ボタン色より暗めに*/
}
.btn-square-slant:before {
content: " ";
position: absolute;
bottom: -5px;
left: -1px;
width: 0;
height: 0;
border-width: 0 6px 6px 0px;
border-style: solid;
border-color: transparent;
border-bottom-color: #FFF;
}
.btn-square-slant:after {
content: " ";
position: absolute;
top: -1px;
right: -5px;
width: 0;
height: 0;
border-width: 0px 6px 6px 0px;
border-style: solid;
border-color: #FFF;
border-bottom-color: transparent;
}
.btn-square-slant:active {
/*ボタンを押したとき*/
border:none;
-webkit-transform: translate(6px,6px);
transform: translate(6px,6px);
}
.btn-square-slant:active:after, .btn-square-slant:active:before {
content: none;/*ボタンを押すと線が消える*/
}
線をボックスの右と下につけることで、右斜め下から見たような立体感が出ます。線の角は擬似要素により斜めに削っています。
上から見たように
コードを見る
HTML
<a href="#" class="btn-square-above-look">BUTTON</a>
CSS
.btn-square-above-look {
display: inline-block;
position: relative;
padding: 0.35em 1em;
background: #668ad8;/*ボタン色*/
color: #FFF;
text-decoration: none;
}
.btn-square-above-look:before {
content: "";
position: absolute;
top: -16px;
left: 0;
width: -webkit-calc(100% - 16px);
width: calc(100% - 16px);
height: 0;
border: solid 8px transparent;
border-bottom-color: #8eacec;/*ボタン色より明るめの色に*/
}
.btn-square-above-look:active {
/*押したとき*/
padding: 0.32em 0.9em;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.btn-square-above-look:active:before {
width: -webkit-calc(100% - 12px);
width: calc(100% - 12px);
}
.btn-square-above-look:active:before {
top:-12px;
border-width: 6px;
}
少し上から見たような形にしてみました。クリック時にはボタンサイズを小さくすることで、奥行きを表現をしています。
遊び心のあるボタン
コードを見る
HTML
<a href="#" class="btn-square-pop">BUTTON</a>
CSS
.btn-square-pop {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #fd9535;/*背景色*/
border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
font-weight: bold;
}
.btn-square-pop:active {
border-bottom: solid 2px #fd9535;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
少しカクカクしたような立体感を出してみました。ポップで明るめな色が合うはずです。
さらにポップに
コードを見る
HTML
<a href="#" class="btn-square-so-pop">BUTTON</a>
CSS
.btn-square-so-pop {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #fd9535;/*色*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
font-weight: bold;
border: solid 2px #d27d00;/*線色*/
}
.btn-square-so-pop:active {
/*押したとき*/
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
ボタン周りを線で囲うとさらにポップでかわいいボタンになります。なんとなく押したくなりますね。
おもちゃ風
コードを見る
HTML
<a href="#" class="btn-square-toy">BUTTON</a>
CSS
.btn-square-toy {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
background: #00BCD4;/*背景色*/
color: #00BCD4;/*=背景色*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
border-bottom: solid 2px #118e9e;
border-radius: 4px;
font-weight: bold;
text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}
.btn-square-toy:active {
/*押したとき*/
border-bottom: solid 2px #00BCD4;
box-shadow: none;
text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}
浮き出し文字にすることで、おもちゃっぽさ（レゴっぽさ）を出しました。丸の部分は、黒丸テキスト（●）で表現しています。
控えめなリッチボタン
コードを見る
HTML
<a href="#" class="btn-square-little-rich">BUTTON</a>
CSS
.btn-square-little-rich {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #03A9F4;/*色*/
border: solid 1px #0f9ada;/*線色*/
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.btn-square-little-rich:active {
/*押したとき*/
border: solid 1px #03A9F4;
box-shadow: none;
text-shadow: none;
}
テキストにも少し影をつけています。ボタンをクリックすると影が消えます（少し分かりづらいかもしれませんが）。
表面に丸みのある角丸ボタン
コードを見る
HTML
<a href="#" class="btn-square-soft">BUTTON</a>
CSS
.btn-square-soft {
display: inline-block;
position: relative;
text-decoration: none;
color: #f9a9ae;
width: 120px;
height: 50px;
line-height: 50px;
border-radius: 5px;
text-align: center;
overflow: hidden;
font-weight: bold;
background: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
.btn-square-soft:active {
/*押したとき*/
-webkit-transform: translateY(2px);
transform: translateY(2px);/*沈むように*/
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
background-image: linear-gradient(#fed6e3 0%, #ffbcbc 100%);/*グラデーションを明るく*/
}
グラデーションで丸みを表現しています。やわらかめのパステル色がよく合うかと思います。
いっそのこと文字ごと立体に
コードを見る
HTML
<a href="#" class="btn-text-3d">BUTTON</a>
CSS
.btn-text-3d {
text-decoration: none;
font-weight: bold;
font-size: 37px;
color: #799dec;
text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
}
.btn-text-3d:active {
top: 4px;
text-shadow: none;
}
BUTTONという文字をボタンにしました。テキストは太めのものにするのがおすすめです。一見ボタンだと分かりづらいのですが、目を引きたいときには良いかもしれませんね。
少し浮き上がったふせん風
コードを見る
HTML
<a href="#" class="btn-sticky">BUTTON</a>
CSS
.btn-sticky {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #f7f7f7;
border-left: solid 6px #ff7c5c;/*左線*/
color: #ff7c5c;/*文字色*/
font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-sticky:active {
box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
transform: translateY(2px);
}
クリックにより影が消えて沈みます。カーソルを当てると動きのつくホバーエフェクトにしても良いかもしれません（:activeを:hoverに）。
本物のような質感のボタン
コードを見る
HTML
<a href="#" class="btn-real">
<i class="fa fa-power-off"></i>
</a>
CSS
.btn-real {
display: inline-block;
text-decoration: none;
color: rgba(152, 152, 152, 0.43);/*アイコン色*/
width: 80px;
height: 80px;
line-height: 80px;
font-size: 40px;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-weight: bold;
background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
border-bottom: solid 2px #b5b5b5;
}
.btn-real i {
line-height: 80px;
}
.btn-real:active {
/*押したとき*/
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
border-bottom: none;
}
画像に見えますが、HTMLとCSSだけで作られています。なお、はFontAwesomeのアイコンフォントを使って表示しています。FontAwesomeの導入方法と使い方は以下の記事で解説しています。
別のアイコンに変えることもできますし、iタグの代わりに一文字を入れるような表現もできます（以下のようなイメージです。押したくなりますが何が起こるか分からず怖いですね…）。
周囲をへこませた場合
コードを見る
HTML
<a href="#" class="btn-real-dent">
<i class="fa fa-home"></i>
</a>
CSS
.btn-real-dent {
/*周りの凹み*/
display: inline-block;
position: relative;
text-decoration: none;
color: rgba(3, 169, 244, 0.54);
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
background: #f7f7f7;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
}
.btn-real-dent i {
/*ボタン自体*/
position: absolute;
content: '';
width: 80px;
height: 80px;
line-height: 80px;
left: 10px;
top: 9px;
border-radius: 50%;
font-size: 40px;
background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
border-bottom: solid 2px #b5b5b5;
}
.btn-real-dent .fa:active {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
border-bottom: solid 2px #d8d8d8;
}
ボタンの周辺にくぼみを作り、より立体感を出しました。アイコン色はカラフルにしてもOKです。
2. フラットデザインなボタン
次に影や立体表現のないボタンのデザイン例を紹介します。
シンプル
コードを見る
HTML
<a href="#" class="btn-flat-simple">
<i class="fa fa-caret-right"></i> BUTTON
</a>
CSS
.btn-flat-simple {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
color: #00BCD4;
background: #ECECEC;
transition: .4s;
}
.btn-flat-simple:hover {
background: #00bcd4;
color: white;
}
こちらもFontAwesomeを使って「」を表示しています。不要であればHTMLの<i class="~"></i>をまるっと削除すればOKです。
シンプルなボーダーで囲う
コードを見る
HTML
<a href="#" class="btn-flat-border">BUTTON</a>
CSS
.btn-flat-border {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #67c5ff;
border: solid 2px #67c5ff;
border-radius: 3px;
transition: .4s;
}
.btn-flat-border:hover {
background: #67c5ff;
color: white;
}
線で囲っただけのシンプルなボタンです。ホバーにより背景が塗られます。
二重線で囲う
コードを見る
HTML
<a href="#" class="btn-flat-double-border">BUTTON</a>
CSS
.btn-flat-double-border {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #67c5ff;
border: double 4px #67c5ff;
border-radius: 3px;
transition: .4s;
}
.btn-flat-double-border:hover {
background: #fffbef;
}
二重線にしました。線の太さは好みで調整してください。
破線で囲う
コードを見る
HTML
<a href="#" class="btn-flat-dashed-border">BUTTON</a>
CSS
.btn-flat-dashed-border {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #67c5ff;
border: dashed 1px #67c5ff;
border-radius: 3px;
transition: .4s;
}
.btn-flat-dashed-border:hover {
border-style: dotted;
color: #679efd;
}
破線バージョンです。ホバーによりパッと点線に変わります。
背景色を塗ってみた場合
コードを見る
HTML
<a href="#" class="btn-flat-dashed-filled">BUTTON</a>
CSS
.btn-flat-dashed-filled {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #67c5ff;
border: dashed 1px #67c5ff;
background: #f2fcff;
border-radius: 3px;
transition: .4s;
}
.btn-flat-dashed-filled:hover {
background: #cbedff;
color: #FFF;
}
淡い同系色で塗ると、よりボタンの範囲が分かりやすくなります。
両端ボーダーばさみ
コードを見る
HTML
<a href="#" class="btn-flat-vertical-border">BUTTON</a>
CSS
.btn-flat-vertical-border {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.5em 1em;
text-decoration: none;
border-left: solid 4px #668ad8;
border-right: solid 4px #668ad8;
color: #668ad8;
background: #e1f3ff;
transition: .4s;
}
.btn-flat-vertical-border:hover {
background: #668ad8;
color: #FFF;
}
左右をボーダーをはさんでいます。背景色とボーダーの色は相性が良いものを選びましょう。
丸みのある下線付き
コードを見る
HTML
<a href="#" class="btn-border-bottom">BUTTON</a>
CSS
.btn-border-bottom {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0;
text-decoration: none;
color: #67c5ff;
}
.btn-border-bottom:before {
position: absolute;
content: '';
width: 100%;
height: 4px;
top:100%;
left: 0;
border-radius: 3px;
background:#67c5ff;
transition: .2s;
}
.btn-border-bottom:hover:before {
top: -webkit-calc(100% - 3px);
top: calc(100% - 3px);
}擬似要素により丸みのある下線を作っています。ホバーにより少し浮き上がります。
上下線付き
コードを見る
HTML
<a href="#" class="btn-horizontal-border">BUTTON</a>
CSS
.btn-horizontal-border {
position: relative;
display: inline-block;
font-weight: bold;
padding: 12px 0 8px;
text-decoration: none;
color: #67c5ff;
transition: .4s;
}
.btn-horizontal-border:before {
position: absolute;
content: '';
width: 100%;
height: 4px;
top:100%;
left: 0;
border-radius: 3px;
background:#67c5ff;
transition: .2s;
}
.btn-horizontal-border:after {
position: absolute;
content: '';
width: 100%;
height: 4px;
top:0;
left: 0;
border-radius: 3px;
background:#67c5ff;
transition: .2s;
}
.btn-horizontal-border:hover:before {
top: -webkit-calc(100% - 3px);
top: calc(100% - 3px);
}
.btn-horizontal-border:hover:after {
top: 3px;
}
上にも線をつけてみました。文字がきゅっとはさまれるようなホバーエフェクトをつけています。
左右バージョン
コードを見る
HTML
<a href="#" class="btn-vertical-border">BUTTON</a>
CSS
.btn-vertical-border {
position: relative;
display: inline-block;
font-weight: bold;
padding: 5px 11px 5px 15px;
text-decoration: none;
color: #67c5ff;
transition: .4s;
}
.btn-vertical-border:before {
position: absolute;
display: inline-block;
content: '';
width: 4px;
height: 100%;
top: 0;
left: 0;
border-radius: 3px;
background:#67c5ff;
}
.btn-vertical-border:after {
position: absolute;
display: inline-block;
content: '';
width: 4px;
height: 100%;
top:0;
left: 100%;
border-radius: 3px;
background:#67c5ff;
}
.btn-vertical-border:hover:before, .btn-vertical-border:hover:after {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
今度は左右を線ではさんだデザインにしてみました。ホバーにより線がカクっと斜めに倒れます。
片側だけ角丸に
コードを見る
HTML
<a href="#" class="btn-right-radius">BUTTON</a>
CSS
.btn-right-radius {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
color: #00BCD4;
background: #ECECEC;
border-radius: 0 15px 15px 0;
transition: .4s;
}
.btn-right-radius:hover {
background: #636363;
}右側の角だけを丸くしてみました。丸みは好みで調整してくださいませ（border-radiusの値の大きさ＝丸みです）。
ロゴ風フラット
コードを見る
HTML
<a href="#" class="btn-flat-logo">
<i class="fa fa-chevron-right"></i> BUTTON
</a>
CSS
.btn-flat-logo {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #00bcd4;
transition: .4s;
}
.btn-flat-logo:hover {
background: #1ec7bb;
}
いかにもフラットデザインらしい塗りつぶしボタンです。配色に「ニトリ感」がありますね。
塗りつぶし＋下線
コードを見る
HTML
<a href="#" class="btn-flat-bottom-border">
<span>BUTTON</span>
</a>
CSS
.btn-flat-bottom-border {
position: relative;
display: inline-block;
font-weight: bold;
padding: 7px 10px 10px 10px;
text-decoration: none;
color: #FFF;
background: #a180dc;
transition: .4s;
}
.btn-flat-bottom-border > span {
border-bottom: solid 2px #FFF;
}
.btn-flat-bottom-border:hover {
background: #91b5fb;
}
ボタンの中の文字に下線をつけています。ロゴっぽいですね。
塗りつぶし＋上下線
コードを見る
HTML
<a href="#" class="btn-flat-horizontal-border">
<span>BUTTON</span>
</a>
CSS
.btn-flat-horizontal-border {
position: relative;
display: inline-block;
font-weight: bold;
padding: 1em 0.5em;
text-decoration: none;
color: #FFF;
background: #ff7f7f;
transition: .4s;
}
.btn-flat-horizontal-border > span {
border-bottom: solid 2px #FFF;
border-top: solid 2px #FFF;
}
.btn-flat-horizontal-border:hover span {
padding: 0.1em 0;
}
文字の上下にボーダーをつけてみました。点線（solidをdottedに）や破線（dashedに）にしても面白いかもしれませんね。
上だけ角丸
コードを見る
HTML
<a href="#" class="btn-top-radius">BUTTON</a>
CSS
.btn-top-radius {
position: relative;
display: inline-block;
font-weight: bold;
padding: 8px 10px 5px 10px;
text-decoration: none;
color: #FFA000;
background: #fff1da;
border-bottom: solid 4px #FFA000;
border-radius: 15px 15px 0 0;
transition: .4s;
}
.btn-top-radius:hover {
background: #ffc25c;
color: #FFF;
}
ピョコンと立っているようなデザインにしてみました。明るめの配色が合うはずです。
ストライプ
コードを見る
HTML
<a href="#" class="btn-flat-stripe">BUTTON</a>
CSS
.btn-flat-stripe {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.5em 1em;
text-decoration: none;
border-left: solid 4px #668ad8;
border-right: solid 4px #668ad8;
color: #668ad8;
text-shadow: 0 0 5px white;
padding: 0.5em 1em;
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
transition: .4s;
}
.btn-flat-stripe:hover {
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 5px,#e9f4ff 5px, #e9f4ff 9px);
}
ストライプで背景を塗りつぶしました。文字の見やすさを損なわないように薄めの色を選ぶのが良いですね。
先進感
コードを見る
HTML
<a href="#" class="btn-sf-like">BUTTON</a>
CSS
.btn-sf-like {
position: relative;
display: inline-block;
font-weight: bold;
text-decoration: none;
color: #FFF;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.73);
padding: 0.3em 0.5em;
background: #00bcd4;
border-top: solid 3px #00a3d4;
border-bottom: solid 3px #00a3d4;
transition: .4s;
}
.btn-sf-like:hover {
text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83),
6px 0px 15px rgba(255, 255, 240, 0.83);
}
なんとなくSF感、未来感を感じさせる配色のボタンです。ホバーにより文字の背景がふわっと白くなります。
ステッチ
コードを見る
HTML
<a href="#" class="btn-stitch">BUTTON</a>
CSS
.btn-stitch {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;
color: #FFF;
border-radius: 4px;
box-shadow: 0px 0px 0px 5px #668ad8;
border: dashed 1px #FFF;
}
.btn-stitch:hover {
border: dotted 1px #FFF;
}
角を丸くし、破線をつけることで少し可愛くなります。破線まわりはbox-shadowにより同色で塗りつぶしています。
3. グラデーションが美しいボタン
斜めにグラデーション
コードを見る
HTML
<a href="#" class="btn-gradient-simple">BUTTON</a>
CSS
.btn-gradient-simple {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 3px;
font-weight: bold;
color: #FFF;
background-image: linear-gradient(45deg, #709dff 0%, #b0c9ff 100%);
transition: .4s;
}
.btn-gradient-simple:hover {
background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}
左下から右下に向かって色が薄くなるようなグラデーションをかけています。
立体的に
コードを見る
HTML
<a href="#" class="btn-gradient-3d">BUTTON</a>
CSS
.btn-gradient-3d {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
color: rgba(0, 69, 212, 0.47);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #5e7fca;
}
.btn-gradient-3d:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
ボーダーと影により立体感を出しました。同系統の2色でグラデーションを作ると、オシャレに見せやすいのではないかと思います。
文字を白に
コードを見る
HTML
<a href="#" class="btn-gradient-3d-simple">BUTTON</a>
CSS
.btn-gradient-3d-simple {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px;
color: #ffffff;
background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #5e7fca;
}
.btn-gradient-3d-simple:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
文字をシンプルな白にしてみました。
オレンジにしてみた場合
コードを見る
HTML
<a href="#" class="btn-gradient-3d-orange">BUTTON</a>
CSS
.btn-gradient-3d-orange {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px;
color: #ffffff;
background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #c58668;
}
.btn-gradient-3d-orange:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
橙色どうしのグラデーションにしてみました。
角丸のフラットボタン
コードを見る
HTML
<a href="#" class="btn-gradient-radius">BUTTON</a>
CSS
.btn-gradient-radius {
display: inline-block;
padding: 7px 20px;
border-radius: 25px;
text-decoration: none;
color: #FFF;
background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
transition: .4s;
}
.btn-gradient-radius:hover {
background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
}
グラデーションはつけたまま角を丸くし、立体感を取り去りました。ホバーにより色が少し濃くなります。
シンプルな長方形に
コードを見る
HTML
<a href="#" class="btn-gradient-flat">BUTTON</a>
CSS
.btn-gradient-flat {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #FFF;
background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
transition: .4s;
}
.btn-gradient-flat:hover {
background-image: linear-gradient(#6795fd 0%, #67ceff 70%);
}
さきほどのボタンから角の丸みをとってみたものです。
4. 円形（丸）
次に円形のボタンのデザインサンプルを紹介します。
シンプル
コードを見る
HTML
<a href="#" class="btn-circle-flat">BUTTON</a>
CSS
.btn-circle-flat {
display: inline-block;
text-decoration: none;
background: #87befd;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
overflow: hidden;
transition: .4s;
}
.btn-circle-flat:hover {
background: #668ad8;
}正円形の背景をシンプルに単色の塗りつぶしました。
ステッチ
コードを見る
HTML
<a href="#" class="btn-circle-stitch">BUTTON</a>
CSS
.btn-circle-stitch {
display: inline-block;
text-decoration: none;
background: #87befd;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
overflow: hidden;
box-shadow: 0px 0px 0px 5px #87befd;
border: dashed 1px #FFF;
transition: .4s;
}
.btn-circle-stitch:hover {
background: #668ad8;
box-shadow: 0px 0px 0px 5px #668ad8;
}
刺繍ワッペン風です。線を太くするとよりかわいくなります。
文字と線をひかえめに
コードを見る
HTML
<a href="#" class="btn-circle-border">BUTTON</a>
CSS
.btn-circle-border {
display: inline-block;
text-decoration: none;
background: #8cd460;
color: rgba(255, 255, 255, 0.47);
font-weight: bold;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
overflow: hidden;
box-shadow: 0px 0px 0px 5px #8cd460;
border: solid 2px rgba(255, 255, 255, 0.47);
transition: .4s;
}
.btn-circle-border:hover {
border-style: dashed;
}
円の内側に少し太めの実線を入れました。不透明度の低い白を使うことで、主張しすぎないようにしています。
下側に影をつけた場合
コードを見る
HTML
<a href="#" class="btn-circle-3d">BUTTON</a>
CSS
.btn-circle-3d {
display: inline-block;
text-decoration: none;
background: #ff8181;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-weight: bold;
overflow: hidden;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #bd6565;
transition: .4s;
}
.btn-circle-3d:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
border-bottom: none;
}
円の下側に線と影をつけることで、より「押せるボタン」感が出ます。
文字をエンボスに
コードを見る
HTML
<a href="#" class="btn-circle-3d-emboss">BUTTON</a>
CSS
.btn-circle-3d-emboss {
display: inline-block;
text-decoration: none;
background: #ffba78;
color: #ffba78;
width: 120px;
height: 120px;
font-size: 21px;
line-height: 120px;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #d29963;
text-shadow: -1px -1px rgba(255, 255, 255, 0.43), 1px 1px rgba(0, 0, 0, 0.49);
transition: .4s;
}
.btn-circle-3d-emboss:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
border-bottom: none;
}
さきほどと同じパターンです。文字も浮き出ているように見せています。
文字を凹ませる
コードを見る
HTML
<a href="#" class="btn-circle-3d-dent">BUTTON</a>
CSS
.btn-circle-3d-dent {
display: inline-block;
text-decoration: none;
background: #5dc3d0;
color: rgb(82, 142, 150);
width: 122px;
font-size: 20px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
overflow: hidden;
box-shadow: inset 0px 3px 0 rgba(255,255,255,0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
font-weight: bold;
border-bottom: solid 3px #549fa9;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.65);
transition: .4s;
}
.btn-circle-3d-dent:active {
-webkit-transform: translateY(1px);
transform: translateY(1px);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
border-bottom: none;
}
文字をくぼませるような表現で、リアルなボタンらしさを出しています。
シンプルな円形
コードを見る
HTML
<a href="#" class="btn-circle-border-simple">BUTTON</a>
CSS
.btn-circle-border-simple {
display: inline-block;
text-decoration: none;
color: #668ad8;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
border: solid 2px #668ad8;
text-align: center;
overflow: hidden;
font-weight: bold;
transition: .4s;
}
.btn-circle-border-simple:hover {
background: #b3e1ff;
}
文字と線だけで構成してみました。濃いめの色を使うのがおすすめです。
二重線
コードを見る
HTML
<a href="#" class="btn-circle-border-double">BUTTON</a>
CSS
.btn-circle-border-double {
display: inline-block;
text-decoration: none;
color: #668ad8;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
border: double 4px #668ad8;
text-align: center;
overflow: hidden;
transition: .6s;
}
.btn-circle-border-double:hover {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
transformプロパティにより、カーソルを当てるとくるんと回転するホバーエフェクトをかけています。
ミステリアスなボタン
コードを見る
HTML
<a href="#" class="btn-circle-fishy">BUTTON</a>
CSS
.btn-circle-fishy {
display: inline-block;
text-decoration: none;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
overflow: hidden;
background-image: linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
transition: .4s;
}
.btn-circle-fishy:hover {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
青と緑っぽいグラデーションを斜めにかけることで、ミステリアスで透明感のあるデザインにしてみました。
カービー風
コードを見る
HTML
<a href="#" class="btn-circle-kirby">BUTTON</a>
CSS
.btn-circle-kirby {
display: inline-block;
text-decoration: none;
color: #f9a9ae;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-weight: bold;
background-image: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
.btn-circle-kirby:active {
box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.32);
background-image: linear-gradient(#fed6e3 0%, #ffcfcf 100%);
}
触りたくなるようなプニプニ感を表現してみました。グラデーションの配色はカービー風。
5. おしゃれなSNSボタン
ここからはソーシャルシェアボタン、フォローボタンのデザイン例を紹介します。
シンプルなアイコン風ボタン
コードを見る
HTML
<a href="#" class="btn-social-icon-twitter">
<span class="btn-social-icon-twitter__square"><i class="fa fa-twitter"></i></span> Follow Me
</a>
CSS
.btn-social-icon-twitter {
text-decoration: none;
display: inline-block;
text-align: center;
color: #1da1f3;
font-size: 25px;
text-decoration: none;
}
.btn-social-icon-twitter:hover {
color:#88daff;
transition: .5s;
}
.btn-social-icon-twitter__square {
border-radius: 10px;
position: relative;
display: inline-block;
width: 50px;
height: 50px;
font-size: 35px;
line-height: 50px;
color: #FFF;
background: #1da1f3;
}
.btn-social-icon-twitter__square i {
line-height: 50px;
}
↑ FontAwesome5をご利用の場合は、<i class="fa fa-twitter"></i>を<i class="fab fa-twitter"></i>に変えてください。
コードを見る
HTML
<a href="#" class="btn-social-icon-facebook">
<span class="btn-social-icon-facebook__square"><i class="fa fa-facebook"></i></span> Follow Me
</a>
CSS
.btn-social-icon-facebook {
text-decoration: none;
display: inline-block;
text-align: center;
color: #4966a0;;
font-size: 25px;
text-decoration: none;
}
.btn-social-icon-facebook:hover {
color:#668ad8;
transition: .5s;
}
.btn-social-icon-facebook__square {
border-radius: 10px;
position: relative;
display: inline-block;
width: 50px;
height: 50px;
font-size: 35px;
line-height: 50px;
color: #FFF;
background: #4966a0;;
}
.btn-social-icon-facebook__square .fa-facebook {
position: absolute;
bottom: -3px;
right: 6px;
font-size: 42px;
}
↑ FontAwesome5をご利用の場合は、<i class="fa fa-facebook"></i>を<i class="fab fa-facebook-f"></i>に変えてください。
コードを見る
HTML
<a href="#" class="btn-social-icon-instagram">
<span class="btn-social-icon-instagram__square"><i class="fa fa-instagram"></i></span> Follow Me
</a>
CSS
.btn-social-icon-instagram {
text-decoration: none;
display: inline-block;
text-align: center;
color: #2e6ca5;
font-size: 25px;
text-decoration: none;
}
.btn-social-icon-instagram:hover {
color:#668ad8;
transition: .5s;
}
.btn-social-icon-instagram__square {
border-radius: 13px;
position: relative;
display: inline-block;
width: 50px;
height: 50px;
font-size: 35px;
line-height: 50px;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow: hidden
}
.btn-social-icon-instagram__square:before {
content: '';
position: absolute;
top: 23px;
left: -18px;
width: 60px;
height: 60px;
background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
.btn-social-icon-instagram__square .fa-instagram {
color:white;
line-height: 50px;
position: relative;
z-index: 2}
↑ FontAwesome5をご利用の場合は、<i class="fa fa-instagram"></i>を<i class="fab fa-instagram"></i>に変えてください。
なお、こちらはiPhoneアプリのアイコンをイメージして作りました。アイコンは例によってFontAwesomeのものを使っています。Facebookのアイコンは右下へと位置をずらしています。インスタグラムのアイコンはコードが複雑になっています。どのような構成になっているかを知りたい方はInstagramフォローボタンの作り方をご覧ください。
横長のフォローボタン
コードを見る
HTML
<a href="#" class="btn-social-long-twitter">
<i class="fa fa-twitter"></i> <span>Follow Me</span>
</a>
CSS
.btn-social-long-twitter {
color: #FFF;/*文字・アイコン色*/
border-radius: 7px;/*角丸に*/
display: inline-block;
height: 50px;/*高さ*/
width: 190px;/*幅*/
text-align: center;/*中身を中央寄せ*/
font-size: 25px;/*文字のサイズ*/
line-height: 50px;/*高さと合わせる*/
background: #1da1f3;
overflow: hidden;/*はみ出た部分を隠す*/
text-decoration:none;/*下線は消す*/
}
.btn-social-long-twitter .fa-twitter {
text-shadow: 2px 2px 0px #4287d6;
font-size: 30px;
}
.btn-social-long-twitter span {
display:inline-block;
transition: .5s;
}
.btn-social-long-twitter:hover span {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
↑ FontAwesome5をご利用の場合は、<i class="fa fa-twitter"></i>を<i class="fab fa-twitter"></i>に変えてください。
コードを見る
HTML
<a href="#" class="btn-social-long-facebook">
<i class="fa fa-facebook"></i> <span>Follow Me</span>
</a>
CSS
.btn-social-long-facebook {
color: #FFF;/*文字・アイコン色*/
border-radius: 7px;/*角丸に*/
display: inline-block;
height: 50px;/*高さ*/
width: 190px;/*幅*/
text-align: center;/*中身を中央寄せ*/
font-size: 25px;/*文字のサイズ*/
line-height: 50px;/*高さと合わせる*/
background: #4966a0;
overflow: hidden;/*はみ出た部分を隠す*/
text-decoration:none;/*下線は消す*/
}
.btn-social-long-facebook .fa-facebook {
text-shadow: 2px 2px 1px #224282;
font-size: 30px;
}
.btn-social-long-facebook span {
/*テキスト*/
display:inline-block;
transition: .5s;
}
.btn-social-long-facebook:hover span {
/*ホバーで一周回転*/
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
↑ FontAwesome5をご利用の場合は、<i class="fa fa-facebook"></i>を<i class="fab fa-facebook-f"></i>に変えてください。
コードを見る
HTML
<a href="#" class="btn-social-long-insta">
<i class="fa fa-instagram"></i> <span>Follow Me</span>
</a>
CSS
.btn-social-long-insta {
/*ボタンの下地*/
color: #FFF;/*文字・アイコン色*/
border-radius: 7px;/*角丸に*/
position: relative;
display: inline-block;
height: 50px;/*高さ*/
width: 190px;/*幅*/
text-align: center;/*中身を中央寄せ*/
font-size: 25px;/*文字のサイズ*/
line-height: 50px;/*高さと合わせる*/
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
overflow: hidden;/*はみ出た部分を隠す*/
text-decoration:none;/*下線は消す*/
}
.btn-social-long-insta:before {
/*グラデーション②*/
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;/*全体を覆う*/
height: 100%;/*全体を覆う*/
background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
.btn-social-long-insta .fa-instagram {
/*アイコン*/
font-size: 35px;/*アイコンサイズ*/
position: relative;
top: 4px;/*アイコン位置の微調整*/
}
.btn-social-long-insta span {
/*テキスト*/
display:inline-block;
position: relative;
transition: .5s}
.btn-social-long-insta:hover span {
/*ホバーで一周回転*/
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
↑ FontAwesome5をご利用の場合は、<i class="fa fa-instagram"></i>を<i class="fab fa-instagram"></i>に変えてください。
横長のフォローボタンです。カーソルをあてると（スマホならタップすると）、文字がくるんと回転します。
丸い立体ボタン
コードを見る
HTML
<!--以下twitter-->
<a href="#" class="btn-social-circle btn-social-circle--twitter">
<i class="fa fa-twitter"></i>
</a>
<!--以下facebook-->
<a href="#" class="btn-social-circle btn-social-circle--facebook">
<i class="fa fa-facebook"></i>
</a>
<!--以下pocket-->
<a href="#" class="btn-social-circle btn-social-circle--pocket">
<i class="fa fa-get-pocket"></i>
</a>
<!--以下feedly-->
<a href="#" class="btn-social-circle btn-social-circle--feedly">
<i class="fa fa-rss"></i>
</a>
CSS
.btn-social-circle {
display: inline-block;
position: relative;
box-sizing: border-box;
text-decoration: none;
color: #FFF;
width: 50px;
height: 50px;
line-height: 30px;
padding: 5px;
font-size: 25px;
border-radius: 50%;
text-align: center;
font-weight: bold;
box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.25), inset 0 -2px 0px rgba(0, 0, 0, 0.18);
transition: .2s;
}
.btn-social-circle .fa {
line-height: 30px;
}
.btn-social-circle:hover {
box-shadow: none;
}
.btn-social-circle--twitter {
background: #1da1f3;
border: solid 5px #1da1f3;
}
.btn-social-circle--facebook {
background: #3b75d4;
border: solid 5px #3b75d4;
}
.btn-social-circle--pocket {
background: #ef4d4d;
border: solid 5px #ef4d4d;
}
.btn-social-circle--feedly {
background: #7ece46;
border: solid 5px #7ece46;
}
↑ FontAwesome5をご利用の場合は、以下のように書き直しをお願いします。
<i class="fa fa-twitter"></i>⇒<i class="fab fa-twitter"></i>
<i class="fa fa-facebook"></i>⇒<i class="fab fa-facebook-f"></i>
<i class="fa fa-get-pocket"></i>⇒<i class="fab fa-get-pocket"></i>
<i class="fa fa-rss"></i>⇒<i class="fas fa-rss"></i>
カラフルでおもちゃっぽいボタンにしてみました。他のSNSボタンを作りたいときは、HTMLのアイコンとCSSの背景色（background）・線色（border-color）を変えればOKです。
フラット
コードを見る
HTML
<!--以下twitter-->
<a href="#" class="btn-social-flat">
<span class="btn-social-flat-icon btn-social-flat-icon--twitter">
<i class="fa fa-twitter"></i>
</span>
<span class="btn-social-flat-text">TWEET</span>
</a>
<!--以下facebook-->
<a href="#" class="btn-social-flat">
<span class="btn-social-flat-icon btn-social-flat-icon--facebook">
<i class="fa fa-facebook"></i>
</span>
<span class="btn-social-flat-text">SHARE</span>
</a>
<!--以下pocket-->
<a href="#" class="btn-social-flat">
<span class="btn-social-flat-icon btn-social-flat-icon--pocket">
<i class="fa fa-get-pocket"></i>
</span>
<span class="btn-social-flat-text">POCKET</span>
</a>
<!--以下feedly-->
<a href="#" class="btn-social-flat">
<span class="btn-social-flat-icon btn-social-flat-icon--feedly">
<i class="fa fa-rss"></i>
</span>
<span class="btn-social-flat-text">FEEDLY</span>
</a>
CSS
.btn-social-flat {
color: #484848;
display: inline-block;
height: 50px;
font-size: 25px;
line-height: 50px;
background: #eaeef1;
text-decoration: none;
margin: 1em;
}
.btn-social-flat-icon {
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
color: white;
}
.btn-social-flat-icon i {
font-size: 25px;
line-height: 50px;
transition: .3s;
}
.btn-social-flat-text {
display: inline-block;
width: 120px;
text-align: center;
}
.btn-social-flat-icon--twitter {
background:#1da1f3;
}
.btn-social-flat-icon--facebook {
background:#3b75d4;
}
.btn-social-flat-icon--feedly {
background:#7ece46;
}
.btn-social-flat-icon--pocket {
background:#fd7171;
}
.btn-social-flat:hover .btn-social-flat-icon i {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
↑ FontAwesome5をご利用の場合は、以下のように書き直しをお願いします。
<i class="fa fa-twitter"></i>⇒<i class="fab fa-twitter"></i>
<i class="fa fa-facebook"></i>⇒<i class="fab fa-facebook-f"></i>
<i class="fa fa-get-pocket"></i>⇒<i class="fab fa-get-pocket"></i>
<i class="fa fa-rss"></i>⇒<i class="fas fa-rss"></i>
シンプルなフラットボタンです。ホバー時にはアイコンが回転します。
アイソメトリック
コードを見る
HTML
<!--以下twitter-->
<a href="#" class="btn-social-isometric">
<span class="btn-social-isometric-icon btn-social-isometric-icon--twitter">
<i class="fa fa-twitter"></i>
</span>
<span class="btn-social-isometric-text">TWEET</span>
</a>
<!--以下facebook-->
<a href="#" class="btn-social-isometric">
<span class="btn-social-isometric-icon btn-social-isometric-icon--facebook">
<i class="fa fa-facebook"></i>
</span>
<span class="btn-social-isometric-text">SHARE</span>
</a>
<!--以下pocket-->
<a href="#" class="btn-social-isometric">
<span class="btn-social-isometric-icon btn-social-isometric-icon--pocket">
<i class="fa fa-get-pocket"></i>
</span>
<span class="btn-social-isometric-text">POCKET</span>
</a>
<!--以下feedly-->
<a href="#" class="btn-social-isometric">
<span class="btn-social-isometric-icon btn-social-isometric-icon--feedly">
<i class="fa fa-rss"></i>
</span>
<span class="btn-social-isometric-text">FEEDLY</span>
</a>
CSS
.btn-social-isometric {
color: #484848;
display: inline-block;
height: 50px;
font-size: 25px;
line-height: 46px;
background: #eaeef1;
text-decoration: none;
box-sizing: border-box;
margin: 1em;
}
.btn-social-isometric-icon {
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
color: white;
}
.btn-social-isometric-icon i {
line-height: 46px;
font-size: 25px;
}
.btn-social-isometric-text {
display: inline-block;
width: 120px;
height: 50px;
text-align: center;
border-bottom: solid 4px #dcdcdc;
}
.btn-social-isometric-icon--twitter {
background:#1da1f3;
border-bottom: solid 4px #1484ca;
}
.btn-social-isometric-icon--facebook {
background:#3b75d4;
border-bottom: solid 4px #2a5caf;
}
.btn-social-isometric-icon--feedly {
background:#7ece46;
border-bottom: solid 4px #65b130;
}
.btn-social-isometric-icon--pocket {
background:#fd7171;
border-bottom: solid 4px #ef4d4d;
}
.btn-social-isometric:hover {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
.btn-social-isometric:hover .btn-social-isometric-text, .btn-social-isometric:hover .btn-social-isometric-icon {
border-bottom: none;
}↑ FontAwesome5をご利用の場合は、以下のように書き直しをお願いします。
<i class="fa fa-twitter"></i>⇒<i class="fab fa-twitter"></i>
<i class="fa fa-facebook"></i>⇒<i class="fab fa-facebook-f"></i>
<i class="fa fa-get-pocket"></i>⇒<i class="fab fa-get-pocket"></i>
<i class="fa fa-rss"></i>⇒<i class="fas fa-rss"></i>
下線をつけて立体的にしてみました。「アイソメトリック」と呼ばれるようなカクカクしたデザインですね。
ギザギザ
コードを見る
HTML
<div class="btn-social-giza">
<!--以下twitter-->
<a href="#" class="btn-social-giza-twitter">
<span class="fa-stack">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
<!--以下facebook-->
<a href="#" class="btn-social-giza-facebook">
<span class="fa-stack">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a>
<!--以下feedly-->
<a href="#" class="btn-social-giza-feedly">
<span class="fa-stack">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x"></i>
</span>
</a>
<!--以下pocket-->
<a href="#" class="btn-social-giza-pocket">
<span class="fa-stack">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-get-pocket fa-stack-1x"></i>
</span>
</a>
</div>
CSS
.btn-social-giza a {
display: inline-block;
text-decoration: none;
font-size: 25px;
}
.btn-social-giza .fa-stack-1x {
color: white;
font-size: 18px;
}
.btn-social-giza .fa-stack-2x {
transition: .3s;
}
.btn-social-giza .btn-social-giza-twitter .fa-stack-2x {
color: #74c1f8;
}
.btn-social-giza .btn-social-giza-facebook .fa-stack-2x {
color: #668ad8;
}
.btn-social-giza .btn-social-giza-pocket .fa-stack-2x {
color: #f79393;
}
.btn-social-giza .btn-social-giza-feedly .fa-stack-2x {
color: #acde71;
}
.btn-social-giza a:hover .fa-stack-2x {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}↑ FontAwesome5をご利用の場合は、以下のように書き直しをお願いします。
<i class="fa fa-certificate fa-stack-2x"></i>⇒<i class="fas fa-certificate fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>⇒<i class="fab fa-twitter fa-stack-1x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>⇒<i class="fab fa-facebook-f fa-stack-1x"></i>
<i class="fa fa-get-pocket fa-stack-1x"></i>⇒<i class="fab fa-get-pocket fa-stack-1x"></i>
<i class="fa fa-rss fa-stack-1x"></i>⇒<i class="fas fa-rss fa-stack-1x"></i>
FontAwesomeのアイコンは簡単に２つ重ねることができます。上のボタンの場合、となどを重ねているわけですね。もちろん他のアイコン種類を使ってもOKです。コードの書き方が気になる方は「FontAwesomeのアイコンの重ね方」を読んでみてください。
スマホの中にアイコンを表示
コードを見る
HTML
<div class="btn-social-phone">
<!--以下twitter-->
<a href="#">
<span class="fa-stack">
<i class="fa fa-tablet fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x btn-social-phone-twitter"></i>
</span>
</a>
<!--以下facebook-->
<a href="#">
<span class="fa-stack">
<i class="fa fa-tablet fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x btn-social-phone-facebook"></i>
</span>
</a>
<!--以下feedly-->
<a href="#">
<span class="fa-stack">
<i class="fa fa-tablet fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x btn-social-phone-feedly"></i>
</span>
</a>
<!--以下pocket-->
<a href="#">
<span class="fa-stack">
<i class="fa fa-tablet fa-stack-2x"></i>
<i class="fa fa-get-pocket fa-stack-1x btn-social-phone-pocket"></i>
</span>
</a>
</div>
CSS
.btn-social-phone a {
text-decoration: none;
line-height: 70px;
font-size: 18px;
margin: 5px;
}
.btn-social-phone .fa-stack-2x {
color: black;
font-size:70px;
}
.btn-social-phone .fa-stack-1x{
display: inline-block;
position: relative;
font-size: 20px;
top: 12px;
left:5px;
transition: .4s;
}
.btn-social-phone-twitter {
color: #74c1f8;
}
.btn-social-phone-facebook {
color: #668ad8;
}
.btn-social-phone-pocket {
color: #f79393;
}
.btn-social-phone-feedly {
color: #acde71;
}
.btn-social-phone a:hover .fa-stack-1x {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}↑ FontAwesome5をご利用の場合は、以下のように書き直しをお願いします。
<i class="fa fa-tablet fa-stack-2x"></i>⇒<i class="fas fa-tablet-alt fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>⇒<i class="fab fa-twitter fa-stack-1x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>⇒<i class="fab fa-facebook-f fa-stack-1x"></i>
<i class="fa fa-get-pocket fa-stack-1x"></i>⇒<i class="fab fa-get-pocket fa-stack-1x"></i>
<i class="fa fa-rss fa-stack-1x"></i>⇒<i class="fas fa-rss fa-stack-1x"></i>
こちらも先程と同じで、スマホ（タブレット）アイコンの上にSNSアイコンをのせているだけです。カーソルを当てると、中のアイコンだけが回転します。
光沢のある滑らかな円形ボタン
コードを見る
HTML
<!--twitter-->
<a class="btn-social-circle btn-social-circle--twitter">
<i class="fa fa-twitter"></i>
</a>
<!--facebook-->
<a class="btn-social-circle btn-social-circle--facebook">
<i class="fa fa-facebook"></i>
</a>
<!--はてぶ-->
<a class="btn-social-circle btn-social-circle--hatebu">
B!
</a>
<!--pocket-->
<a class="btn-social-circle btn-social-circle--pocket">
<i class="fa fa-get-pocket"></i>
</a>
<!--feedly-->
<a class="btn-social-circle btn-social-circle--feedly">
<i class="fa fa-rss"></i>
</a>
CSS
.btn-social-circle {
display: inline-block;
text-decoration: none;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 23px;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
transition: .3s;
}
.btn-social-circle i {
line-height: 50px;
}
.btn-social-circle:hover {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.btn-social-circle--twitter {
color: #22b8ff;
background-image: linear-gradient(#aeecff 0%, #57c8ff 100%);
}
.btn-social-circle--facebook {
color: #6183f3;
background-image: linear-gradient(#b5d3ff 0%, #6b8bff 100%);
}
.btn-social-circle--hatebu {
color: #49a8fb;
background-image: linear-gradient(#d2efff 0%, #76befb 100%);
}
.btn-social-circle--pocket {
color: #ff6d82;
background-image: linear-gradient(#ffcfd7 0%, #ff7285 100%);
}
.btn-social-circle--feedly {
color: #60d245;
background-image: linear-gradient(#b9ffca 0%, #80e067 100%);
}
↑ FontAwesome5をご利用の場合は、以下のように書き直しをお願いします。
<i class="fa fa-twitter"></i>⇒<i class="fab fa-twitter"></i>
<i class="fa fa-facebook"></i>⇒<i class="fab fa-facebook-f"></i>
<i class="fa fa-get-pocket"></i>⇒<i class="fab fa-get-pocket"></i>
<i class="fa fa-rss"></i>⇒<i class="fas fa-rss"></i>
淡い色のグラデーションをかけて丸みのあるデザインにしてみました。
シンプルなフラットボタン
コードを見る
HTML
<!--twitter-->
<a class="btn-social-square btn-social-square--twitter">
<i class="fa fa-twitter"></i>
</a>
<!--facebook-->
<a class="btn-social-square btn-social-square--facebook">
<i class="fa fa-facebook"></i>
</a>
<!--はてぶ-->
<a class="btn-social-square btn-social-square--hatebu">
B!
</a>
<!--pocket-->
<a class="btn-social-square btn-social-square--pocket">
<i class="fa fa-get-pocket"></i>
</a>
<!--feedly-->
<a class="btn-social-square btn-social-square--feedly">
<i class="fa fa-rss"></i>
</a>
CSS
.btn-social-square {
display: inline-block;
text-decoration: none;
width: 50px;
margin:2px;
height: 50px;
line-height: 50px;
font-size: 23px;
color:white;
border-radius: 12px;
text-align: center;
overflow: hidden;
font-weight: bold;
transition: .3s;
}
.btn-social-square i {
line-height:50px;
}
.btn-social-square:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.btn-social-square--twitter {
background: #22b8ff;
}
.btn-social-square--facebook {
background: #6680d8;
}
.btn-social-square--hatebu {
background: #49a8fb;
}
.btn-social-square--pocket {
background: #ff6d82;
}
.btn-social-square--feedly {
background: #7bda72;
}
↑ FontAwesome5をご利用の場合は、以下のように書き直しをお願いします。
<i class="fa fa-twitter"></i>⇒<i class="fab fa-twitter"></i>
<i class="fa fa-facebook"></i>⇒<i class="fab fa-facebook-f"></i>
<i class="fa fa-get-pocket"></i>⇒<i class="fab fa-get-pocket"></i>
<i class="fa fa-rss"></i>⇒<i class="fas fa-rss"></i>
シンプルな単色で塗りつぶしました。どんなデザインにも合うのではないかと思います。
旧Twitter風
コードを見る
HTML
<a href="#" class="btn-twitter-follow">
<i class="fa fa-user-plus"></i> <span>フォローする</span>
</a>
CSS
.btn-twitter-follow {
text-decoration: none;
background-image: linear-gradient(#fff,#f5f8fa);
border: 1px solid #e6ecf0;
border-radius: 4px;
color: #393e42;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 8px 14px;
position: relative;
}
.btn-twitter-follow i {
color: #1da1f3;
}
.btn-twitter-follow:hover {
background-color: #e6ecf0;
background-image: linear-gradient(#fff,#e6ecf0);
border-color: #e6ecf0;
}
↑ FontAwesome5をご利用の場合は、以下のように書き直しをお願いします。
<i class="fa fa-user-plus"></i>⇒<i class="fas fa-user-plus"></i>
古き良きTwitterのフォローボタンを再現しました。リンクに自分のアカウントのURLを入れて使います。クリックで一度Twitterサイトに飛び、もう一度フォローボタンを押してもらう必要がありますが、クリック率が上がるかも。
インスタグラム用ボタン
新しいInstagramアイコンはグラデーションがおしゃれなので、それを存分に活かせるような正方形にしてみました。
6. ユニーク・かっこいい系
斜めにカットしたようなデザイン
コードを見る
HTML
<a href="#" class="btn-edge">
BUTTON
</a>
CSS
.btn-edge {
position: relative;
display: inline-block;
text-decoration: none;
padding: 0 30px;
font-size: 19px;
height: 40px;
line-height: 40px!;
background: #51587b;
font-size: 20px;
color: rgb(255, 255, 255);
transition: .4s;
}
.btn-edge:before {
position: absolute;
content: '';
left: 0;
top: 0;
width: 0;
height: 0;
border: none;
border-left: solid 21px white;
border-bottom: solid 41px transparent;
z-index: 1;
transition: .4s;
}
.btn-edge:after {
position: absolute;
content: '';
right: 0;
top: 0;
width: 0;
height: 0;
border: none;
border-left: solid 21px transparent;
border-bottom: solid 41px white;
z-index: 1;
transition: .4s;
}
.btn-edge:hover:before, .btn-edge:hover:after {
border-left-width: 25px;
}
.deg_btn:hover {
background: #2c3148;
}
擬似要素でボタンを斜めに切っています。かっこいい系のサイトデザインにマッチするはずです。
一部にだけ線
コードを見る
HTML
<a href="#" class="btn-partial-line">
<i class="fa fa-caret-right"></i> BUTTON
</a>
CSS
.btn-partial-line {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
border-bottom: solid 3px #668ad8;
border-left: solid 3px #668ad8;
color: #668ad8;
transition: .4s;
}
.btn-partial-line:hover {
padding-left: 0.7em;
padding-right: 0.3em;
}左と下にだけ線をつけました。ホバー時には、ぬるっと文字がスライドします。はFontAwesomeで表現しています。不要であれば、iタグをまるごと削除してくださいませ。
交差線
コードを見る
HTML
<a href="#" class="btn-cross">
BUTTON
</a>
CSS
.btn-cross {
display: inline-block;
position: relative;
padding: 0.25em 1em;
border-top: solid 2px black;
border-bottom: solid 2px black;
text-decoration: none;
font-weight: bold;
color: #03A9F4;
}
.btn-cross:before, .btn-cross:after {
content: '';
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
transition: .3s;
}
.btn-cross:before {
left: 7px;
}
.btn-cross:after {
right: 7px;
}
.btn-cross:hover:before {
top: 0px;
left:0;
height: 100%;
}
.btn-cross:hover:after {
top: 0px;
right: 0;
height: 100%;
}
ホバー時には長方形へと形が変わります。線や文字の色を変えても良いでしょう。
角括弧
コードを見る
HTML
<a href="#" class="btn-brackets">
BUTTON
</a>
CSS
.btn-brackets {
display: inline-block;
position: relative;
padding: 0.5em 1em;
text-decoration: none;
color: #000;
transition: .4s;
}
.btn-brackets:hover {
color:#ff7f7f;
}
.btn-brackets:before, .btn-brackets:after {
position: absolute;
top: 0;
content:'';
width: 8px;
height: 100%;
display: inline-block;
}
.btn-brackets:before {
border-left: solid 1px #ff7f7f;
border-top: solid 1px #ff7f7f;
border-bottom: solid 1px #ff7f7f;
left: 0;
}
.btn-brackets:after {
content: '';
border-top: solid 1px #ff7f7f;
border-right: solid 1px #ff7f7f;
border-bottom: solid 1px #ff7f7f;
right: 0;
}
ひかえめな角括弧ボタンです。シンプルなWebデザインによく合いそうです。
下側を切り取られちゃった風
コードを見る
HTML
<a href="#" class="btn-bottom-jagged">
BUTTON
</a>
CSS
.btn-bottom-jagged {
position: relative;
padding: 0.35em 0.7em 0.2em;
background: #668ad8;
color: #FFF;
text-decoration: none;
}
.btn-bottom-jagged:before {
content: '';
position: absolute;
z-index: -2;
height: 10px;
box-sizing: border-box;
width: 100%;
top: 100%;
top: calc(100% - 2px);
left: 0;
background: linear-gradient(-135deg, #668ad8 4px, transparent 0) 0 4px,
linear-gradient(135deg, #668ad8 4px, #fff 0) 0 4px;
background-color: #668ad8;
background-position: left bottom;
background-repeat: repeat-x;
background-size: 10px 10px;
transition: .2s;
}
.btn-bottom-jagged:hover:before {
background-size: 13px 10px;
}
ボタンの下側を切り取られたようにギザギザにしてみました。ホバー時にはギザギザの大きさが変化します。
参考
この記事中で使用しているボタンのフォントはGoogle FontsのQuicksandです。Google Fontsの使い方は次の記事で解説しています。
「そもそもウェブサイトでリンクボタンってどうやって作るの？」という方は次の記事が参考になるはずです。
見出しや箇条書きなどのデザインサンプルも作っています。よろしければどうぞ。
こちらの記事では、Webデザインを効率的に学べる本をまとめています。
