今回はWeb用のボタンデザインをまとめて紹介します。ユニークなボタンもたくさん作ってみました。HTMLとCSSで作るボタンです。アイコンを使う例ではWeb Fontsの読み込みも必要です。コピペ＆必要に応じて修正してご利用くださいませ。

見本とカバー画像は公開当時のデザインをもとにしています。アイコンを使う例には、Font Awesome 7のFree版のcore・Solid・BrandsのCSSとWeb Fontsを読み込んでください。公式のWeb Fonts設定手順を確認してください。

あわせて読みたい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 {
  /*ボタンを押したとき*/
  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;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.btn-square-shadow:active {
  /*ボタンを押したとき*/
  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  {
  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 {
  /*ボタンを押したとき*/
  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;
  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: calc(100% - 16px);
  height: 0;
  border: solid 8px transparent;
  border-bottom-color: #8eacec;/*ボタン色より明るめの色に*/
}

.btn-square-above-look:active {
  /*押したとき*/
  padding: 0.32em 0.9em;
  transform: translateY(-2px);
}

.btn-square-above-look:active::before { 
  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 {
  /*押したとき*/
  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 {
  position: relative;
  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" aria-label="電源">
  <i class="fa-solid fa-power-off fa-width-auto" aria-hidden="true"></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の導入方法と使い方は以下の記事で解説しています。

あわせて読みたい【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

別のアイコンに変えることもできますし、iタグの代わりに一文字を入れるような表現もできます（以下のようなイメージです。押したくなりますが何が起こるか分からず怖いですね…）。

周囲をへこませた場合

コードを表示
HTML
<a href="#" class="btn-real-dent" aria-label="ホーム">
  <i class="fa-solid fa-house fa-width-auto" aria-hidden="true"></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:active i {
  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-solid fa-caret-right fa-width-auto" aria-hidden="true"></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,
.btn-flat-simple:focus-visible {
  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,
.btn-flat-border:focus-visible {
  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,
.btn-flat-double-border:focus-visible {
  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,
.btn-flat-dashed-border:focus-visible {
  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,
.btn-flat-dashed-filled:focus-visible {
  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,
.btn-flat-vertical-border:focus-visible {
  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,
.btn-border-bottom:focus-visible::before {
  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,
.btn-horizontal-border:focus-visible::before {
  top: calc(100% - 3px);
}

.btn-horizontal-border:hover::after,
.btn-horizontal-border:focus-visible::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,
.btn-vertical-border:focus-visible::before, .btn-vertical-border:focus-visible::after {
  transform: rotate(10deg);
}

@media (prefers-reduced-motion: reduce) {
  .btn-vertical-border:hover::before, .btn-vertical-border:hover::after,
.btn-vertical-border:focus-visible::before, .btn-vertical-border:focus-visible::after {
    transition: none;
    transform: none;
  }
}

今度は左右を線ではさんだデザインにしてみました。ホバーにより線がカクっと斜めに倒れます。

片側だけ角丸に

コードを表示
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,
.btn-right-radius:focus-visible {
  background: #636363;
}

右側の角だけを丸くしてみました。丸みは好みで調整してくださいませ（border-radiusの値の大きさ＝丸みです）。

ロゴ風フラット

コードを表示
HTML
<a href="#" class="btn-flat-logo">
  <i class="fa-solid fa-chevron-right fa-width-auto" aria-hidden="true"></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,
.btn-flat-logo:focus-visible {
  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,
.btn-flat-bottom-border:focus-visible {
  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,
.btn-flat-horizontal-border:focus-visible 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,
.btn-top-radius:focus-visible {
  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;
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  transition: .4s;
}

.btn-flat-stripe:hover,
.btn-flat-stripe:focus-visible {
  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,
.btn-sf-like:focus-visible {
  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,
.btn-stitch:focus-visible {
  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,
.btn-gradient-simple:focus-visible {
  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 {
  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 {
  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 {
  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,
.btn-gradient-radius:focus-visible {
  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,
.btn-gradient-flat:focus-visible {
  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,
.btn-circle-flat:focus-visible {
  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,
.btn-circle-stitch:focus-visible {
  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,
.btn-circle-border:focus-visible {
  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 {
  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 {
  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 {
  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,
.btn-circle-border-simple:focus-visible {
  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,
.btn-circle-border-double:focus-visible {
  transform: rotateY(360deg);
}

@media (prefers-reduced-motion: reduce) {
  .btn-circle-border-double:hover,
.btn-circle-border-double:focus-visible {
    transition: none;
    transform: none;
  }
}

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,
.btn-circle-fishy:focus-visible {
  transform: rotate(10deg);
}

@media (prefers-reduced-motion: reduce) {
  .btn-circle-fishy:hover,
.btn-circle-fishy:focus-visible {
    transition: none;
    transform: none;
  }
}

青と緑っぽいグラデーションを斜めにかけることで、ミステリアスで透明感のあるデザインにしてみました。

カービー風

コードを表示
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ボタン

ここからはソーシャルシェアボタン、フォローボタンのデザイン例を紹介します。

以下は公開当時のSNSの外観を残したデザイン見本です。リンク先は仮のもので、現在の共有・フォロー機能は実装していません。Pocketは2025年7月8日にサービスを終了しました。Mozillaの終了案内もご覧ください。

シンプルなアイコン風ボタン

コードを表示
HTML
<a href="#" class="btn-social-icon-twitter">
  <span class="btn-social-icon-twitter__square"><i class="fa-brands fa-twitter fa-width-auto" aria-hidden="true"></i></span> Follow Me
</a>
CSS
.btn-social-icon-twitter {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: #1da1f3;
  font-size: 25px;
  transition: color .5s;
}

.btn-social-icon-twitter:hover,
.btn-social-icon-twitter:focus-visible {
  color:#88daff;
}

.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;
}
コードを表示
HTML
<a href="#" class="btn-social-icon-facebook">
  <span class="btn-social-icon-facebook__square"><i class="fa-brands fa-facebook-f fa-width-auto" aria-hidden="true"></i></span> Follow Me
</a>
CSS
.btn-social-icon-facebook {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: #4966a0;
  font-size: 25px;
  transition: color .5s;
}

.btn-social-icon-facebook:hover,
.btn-social-icon-facebook:focus-visible {
  color:#668ad8;
}

.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-f {
  position: absolute;
  bottom: -3px;
  right: 6px;
  font-size: 42px;
}
コードを表示
HTML
<a href="#" class="btn-social-icon-instagram">
  <span class="btn-social-icon-instagram__square"><i class="fa-brands fa-instagram fa-width-auto" aria-hidden="true"></i></span> Follow Me
</a>
CSS
.btn-social-icon-instagram {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: #2e6ca5;
  font-size: 25px;
  transition: color .5s;
}

.btn-social-icon-instagram:hover,
.btn-social-icon-instagram:focus-visible {
  color:#668ad8;
}

.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: 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}

なお、こちらはiPhoneアプリのアイコンをイメージして作りました。アイコンは例によってFontAwesomeのものを使っています。Facebookのアイコンは右下へと位置をずらしています。インスタグラムのアイコンはコードが複雑になっています。どのような構成になっているかを知りたい方はInstagramフォローボタンの作り方をご覧ください。

横長のフォローボタン

コードを表示
HTML
<a href="#" class="btn-social-long-twitter">
  <i class="fa-brands fa-twitter fa-width-auto" aria-hidden="true"></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,
.btn-social-long-twitter:focus-visible span {
  transform: rotateX(360deg);
}

@media (prefers-reduced-motion: reduce) {
  .btn-social-long-twitter:hover span,
.btn-social-long-twitter:focus-visible span {
    transition: none;
    transform: none;
  }
}
コードを表示
HTML
<a href="#" class="btn-social-long-facebook">
  <i class="fa-brands fa-facebook-f fa-width-auto" aria-hidden="true"></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-f {
  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,
.btn-social-long-facebook:focus-visible span {
  /*ホバーで一周回転*/
  transform: rotateX(360deg);
}

@media (prefers-reduced-motion: reduce) {
  .btn-social-long-facebook:hover span,
.btn-social-long-facebook:focus-visible span {
    transition: none;
    transform: none;
  }
}
コードを表示
HTML
<a href="#" class="btn-social-long-insta">
  <i class="fa-brands fa-instagram fa-width-auto" aria-hidden="true"></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,
.btn-social-long-insta:focus-visible span {
  /*ホバーで一周回転*/
  transform: rotateX(360deg);
}

@media (prefers-reduced-motion: reduce) {
  .btn-social-long-insta:hover span,
.btn-social-long-insta:focus-visible span {
    transition: none;
    transform: none;
  }
}

横長のフォローボタンです。カーソルをあてるか、キーボードでフォーカスすると、文字がくるんと回転します。タッチ操作ではホバーの表示が端末によって異なります。

丸い立体ボタン

コードを表示
HTML
<!--以下twitter-->
<a href="#" class="btn-social-circle btn-social-circle--twitter" aria-label="旧Twitterのページ">
  <i class="fa-brands fa-twitter fa-width-auto" aria-hidden="true"></i>
</a>

<!--以下facebook-->
<a href="#" class="btn-social-circle btn-social-circle--facebook" aria-label="Facebookのページ">
  <i class="fa-brands fa-facebook-f fa-width-auto" aria-hidden="true"></i>
</a>

<!--以下pocket-->
<a href="#" class="btn-social-circle btn-social-circle--pocket" aria-label="旧Pocketのデザイン見本">
  <i class="fa-brands fa-get-pocket fa-width-auto" aria-hidden="true"></i>
</a>

<!--以下feedly-->
<a href="#" class="btn-social-circle btn-social-circle--feedly" aria-label="Feedlyのページ">
  <i class="fa-solid fa-rss fa-width-auto" aria-hidden="true"></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 :is(.fa-solid, .fa-brands) {
  line-height: 30px;
}
.btn-social-circle:hover,
.btn-social-circle:focus-visible {
  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;
}

カラフルでおもちゃっぽいボタンにしてみました。他の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-brands fa-twitter fa-width-auto" aria-hidden="true"></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-brands fa-facebook-f fa-width-auto" aria-hidden="true"></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-brands fa-get-pocket fa-width-auto" aria-hidden="true"></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-solid fa-rss fa-width-auto" aria-hidden="true"></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,
.btn-social-flat:focus-visible .btn-social-flat-icon i {
  transform: rotateX(360deg);
}

@media (prefers-reduced-motion: reduce) {
  .btn-social-flat:hover .btn-social-flat-icon i,
.btn-social-flat:focus-visible .btn-social-flat-icon i {
    transition: none;
    transform: none;
  }
}

シンプルなフラットボタンです。ホバー時にはアイコンが回転します。

アイソメトリック

コードを表示
HTML
<!--以下twitter-->
<a href="#" class="btn-social-isometric">
  <span class="btn-social-isometric-icon btn-social-isometric-icon--twitter">
    <i class="fa-brands fa-twitter fa-width-auto" aria-hidden="true"></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-brands fa-facebook-f fa-width-auto" aria-hidden="true"></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-brands fa-get-pocket fa-width-auto" aria-hidden="true"></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-solid fa-rss fa-width-auto" aria-hidden="true"></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,
.btn-social-isometric:focus-visible {
  transform: translateY(4px);
}
.btn-social-isometric:hover .btn-social-isometric-text, .btn-social-isometric:hover .btn-social-isometric-icon,
.btn-social-isometric:focus-visible .btn-social-isometric-text, .btn-social-isometric:focus-visible .btn-social-isometric-icon {
  border-bottom: none;
}

下線をつけて立体的にしてみました。「アイソメトリック」と呼ばれるようなカクカクしたデザインですね。

ギザギザ

コードを表示
HTML
<div class="btn-social-giza">
  <!--以下twitter-->
  <a href="#" class="btn-social-giza-twitter" aria-label="旧Twitterのページ">
    <span class="fa-stack">
    <i class="fa-solid fa-certificate fa-stack-2x" aria-hidden="true"></i>
    <i class="fa-brands fa-twitter fa-stack-1x" aria-hidden="true"></i>
    </span>
  </a>
  <!--以下facebook-->
  <a href="#" class="btn-social-giza-facebook" aria-label="Facebookのページ">
    <span class="fa-stack">
    <i class="fa-solid fa-certificate fa-stack-2x" aria-hidden="true"></i>
    <i class="fa-brands fa-facebook-f fa-stack-1x" aria-hidden="true"></i>
    </span>
  </a>
  <!--以下feedly-->
  <a href="#" class="btn-social-giza-feedly" aria-label="Feedlyのページ">
    <span class="fa-stack">
    <i class="fa-solid fa-certificate fa-stack-2x" aria-hidden="true"></i>
    <i class="fa-solid fa-rss fa-stack-1x" aria-hidden="true"></i>
    </span>
  </a>
  <!--以下pocket-->
  <a href="#" class="btn-social-giza-pocket" aria-label="旧Pocketのデザイン見本">
    <span class="fa-stack">
    <i class="fa-solid fa-certificate fa-stack-2x" aria-hidden="true"></i>
    <i class="fa-brands fa-get-pocket fa-stack-1x" aria-hidden="true"></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,
.btn-social-giza a:focus-visible .fa-stack-2x {
  transform: rotate(60deg);
}

.btn-social-giza .fa-stack {
  width: 2em;
}

@media (prefers-reduced-motion: reduce) {
  .btn-social-giza a:hover .fa-stack-2x,
.btn-social-giza a:focus-visible .fa-stack-2x {
    transition: none;
    transform: none;
  }
}

FontAwesomeのアイコンは簡単に２つ重ねることができます。上のボタンの場合、となどを重ねているわけですね。もちろん他のアイコン種類を使ってもOKです。コードの書き方が気になる方は「FontAwesomeのアイコンの重ね方」を読んでみてください。

スマホの中にアイコンを表示

コードを表示
HTML
<div class="btn-social-phone">
  <!--以下twitter-->
  <a href="#" aria-label="旧Twitterのページ">
    <span class="fa-stack">
    <i class="fa-solid fa-tablet-screen-button fa-stack-2x" aria-hidden="true"></i>
    <i class="fa-brands fa-twitter fa-stack-1x btn-social-phone-twitter" aria-hidden="true"></i>
    </span>
  </a>
  <!--以下facebook-->
  <a href="#" aria-label="Facebookのページ">
    <span class="fa-stack">
    <i class="fa-solid fa-tablet-screen-button fa-stack-2x" aria-hidden="true"></i>
    <i class="fa-brands fa-facebook-f fa-stack-1x btn-social-phone-facebook" aria-hidden="true"></i>
    </span>
  </a>
  <!--以下feedly-->
  <a href="#" aria-label="Feedlyのページ">
    <span class="fa-stack">
    <i class="fa-solid fa-tablet-screen-button fa-stack-2x" aria-hidden="true"></i>
    <i class="fa-solid fa-rss fa-stack-1x btn-social-phone-feedly" aria-hidden="true"></i>
    </span>
  </a>
  <!--以下pocket-->
  <a href="#" aria-label="旧Pocketのデザイン見本">
    <span class="fa-stack">
    <i class="fa-solid fa-tablet-screen-button fa-stack-2x" aria-hidden="true"></i>
    <i class="fa-brands fa-get-pocket fa-stack-1x btn-social-phone-pocket" aria-hidden="true"></i>
    </span>
  </a>
</div>
CSS
.btn-social-phone a {
  text-decoration: none;
  line-height: 70px;
  font-size: 18px;
  margin: 8px;
}
.btn-social-phone .fa-stack-2x {
  color: black;
  font-size:56px;
}
.btn-social-phone .fa-stack-1x{
  display: inline-block;  
  position: relative;
  font-size: 20px;
  top: 4px;
  left:7px;
  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,
.btn-social-phone a:focus-visible .fa-stack-1x {
  transform: rotateX(360deg);
}

.btn-social-phone .fa-stack {
  width: 2em;
}

@media (prefers-reduced-motion: reduce) {
  .btn-social-phone a:hover .fa-stack-1x,
.btn-social-phone a:focus-visible .fa-stack-1x {
    transition: none;
    transform: none;
  }
}

こちらも先程と同じで、スマホ（タブレット）アイコンの上にSNSアイコンをのせているだけです。カーソルを当てると、中のアイコンだけが回転します。

光沢のある滑らかな円形ボタン

コードを表示
HTML
<!--twitter-->
<a href="#" class="btn-social-circle btn-social-circle--twitter" aria-label="旧Twitterのページ">
  <i class="fa-brands fa-twitter fa-width-auto" aria-hidden="true"></i>
</a>
<!--facebook-->
<a href="#" class="btn-social-circle btn-social-circle--facebook" aria-label="Facebookのページ">
  <i class="fa-brands fa-facebook-f fa-width-auto" aria-hidden="true"></i>
</a>
<!--はてぶ-->
<a href="#" class="btn-social-circle btn-social-circle--hatebu" aria-label="はてなブックマークのページ">
  B!
</a>
<!--pocket-->
<a href="#" class="btn-social-circle btn-social-circle--pocket" aria-label="旧Pocketのデザイン見本">
  <i class="fa-brands fa-get-pocket fa-width-auto" aria-hidden="true"></i>
</a>
<!--feedly-->
<a href="#" class="btn-social-circle btn-social-circle--feedly" aria-label="Feedlyのページ">
  <i class="fa-solid fa-rss fa-width-auto" aria-hidden="true"></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,
.btn-social-circle:focus-visible {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
  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%);
}

淡い色のグラデーションをかけて丸みのあるデザインにしてみました。

シンプルなフラットボタン

コードを表示
HTML
<!--twitter-->
<a href="#" class="btn-social-square btn-social-square--twitter" aria-label="旧Twitterのページ">
  <i class="fa-brands fa-twitter fa-width-auto" aria-hidden="true"></i>
</a>
<!--facebook-->
<a href="#" class="btn-social-square btn-social-square--facebook" aria-label="Facebookのページ">
  <i class="fa-brands fa-facebook-f fa-width-auto" aria-hidden="true"></i>
</a>
<!--はてぶ-->
<a href="#" class="btn-social-square btn-social-square--hatebu" aria-label="はてなブックマークのページ">
  B!
</a>
<!--pocket-->
<a href="#" class="btn-social-square btn-social-square--pocket" aria-label="旧Pocketのデザイン見本">
  <i class="fa-brands fa-get-pocket fa-width-auto" aria-hidden="true"></i>
</a>
<!--feedly-->
<a href="#" class="btn-social-square btn-social-square--feedly" aria-label="Feedlyのページ">
  <i class="fa-solid fa-rss fa-width-auto" aria-hidden="true"></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,
.btn-social-square:focus-visible {
  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;
}

シンプルな単色で塗りつぶしました。どんなデザインにも合うのではないかと思います。

旧Twitter風

コードを表示
HTML
<a href="#" class="btn-twitter-follow">
  <i class="fa-solid fa-user-plus fa-width-auto" aria-hidden="true"></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,
.btn-twitter-follow:focus-visible {
  background-color: #e6ecf0;
  background-image: linear-gradient(#fff,#e6ecf0);
  border-color: #e6ecf0;
}

公開当時のTwitterのフォローボタンの外観を再現しました。この見本は仮リンクで、フォロー操作は行いません。

インスタグラム用ボタン

このボタンの作り方とコードはこちらの記事で解説しています。

あわせて読みたい美しいInstagramフォローボタンのCSSデザイン例と設置方法

公開当時のInstagramアイコンはグラデーションがおしゃれなので、それを存分に活かせるような正方形にしてみました。

6. ユニーク・かっこいい系

斜めにカットしたようなデザイン

コードを表示
HTML
<a href="#" class="btn-edge">
  BUTTON
</a>
CSS
.btn-edge {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 0 30px;
  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,
.btn-edge:focus-visible::before, .btn-edge:focus-visible::after {
  border-left-width: 25px;
}

.btn-edge:hover,
.btn-edge:focus-visible {
  background: #2c3148;
}

擬似要素でボタンを斜めに切っています。かっこいい系のサイトデザインにマッチするはずです。

一部にだけ線

コードを表示
HTML
<a href="#" class="btn-partial-line">
  <i class="fa-solid fa-caret-right fa-width-auto" aria-hidden="true"></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,
.btn-partial-line:focus-visible {
  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: calc(100% + 14px);
  background-color: black;
  transition: .3s;
}
.btn-cross::before {
  left: 7px;
}
.btn-cross::after {
  right: 7px;
}
.btn-cross:hover::before,
.btn-cross:focus-visible::before {
  top: 0px;
  left:0;
  height: 100%;
}
.btn-cross:hover::after,
.btn-cross:focus-visible::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,
.btn-brackets:focus-visible {
  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;
  isolation: isolate;
  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: 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,
.btn-bottom-jagged:focus-visible::before {
  background-size: 13px 10px;
}

ボタンの下側を切り取られたようにギザギザにしてみました。ホバー時にはギザギザの大きさが変化します。

参考

この記事中で使用しているボタンのフォントはGoogle FontsのQuicksandです。Google Fontsの使い方は次の記事で解説しています。

あわせて読みたい【2019年版】Google Fontsの使い方：初心者向けに解説！

「そもそもウェブサイトでリンクボタンってどうやって作るの？」という方は次の記事が参考になるはずです。

あわせて読みたいHTMLのリンク＜aタグ＞の書き方を初心者向けに解説

見出しや箇条書きなどのデザインサンプルも作っています。よろしければどうぞ。

あわせて読みたいコピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）