【脱ビギナーCSS】基本のボタンを拡張してボタンをいろいろ作ってみる

  • 投稿日
  • 更新日
  • 著者 ホリエ
  • カテゴリー HTML/CSS

こんにちは。Web制作フリーランスのホリエです。

今回は、基本のボタンを拡張する形で、いろいろなボタンを作ります。前回の記事でご紹介したように、基本のボタンを上書きするプロパティのみ書けばいいので、意外と楽に作れますよ！

なお、この記事の読者としては、下記のレベル感の方を想定しています。

  • HTML/CSSの入門を終えている（書籍、Progate / ドットインストールなどどれでもOK）
  • シンプルな既存サイトの模写、またはデザインカンプのコーディングを２，３ページ終えている

なお今回の記事は、前回、前々回の記事の続きとしてお読みいただくと、より理解が深まると思いますので、よろしければご一読ください。

それでは始めましょう！

【大ボタン】完成コードと実装結果

コード

<a class="btn btn--large" href="#">大ボタン</a>
/* .btnは以前の記事と同じため省略。以下のコードを追加 */

/* 大ボタン */
.btn--large {
  width: 340px;
  padding-top: 30px;　　/* ① */
  padding-bottom: 30px;　　/* ① */
  font-size: 1.375rem;
}

実装結果

See the Pen ボタン-大(original) by hori-suke (@hori-suke) on CodePen.

詳細説明：①padding-top: 30px; / padding-bottom: 30px;

以前の記事で説明したように、heightではなく、padding-top/ padding-bottomでボタンの高さを調整します。

【小ボタン】完成コードと実装結果

コード

<a class="btn btn--small" href="#">小ボタン</a>
/* .btnは以前の記事と同じため省略。以下のコードを追加 */

/* 小ボタン */
.btn--small {
  width: 200px;
  padding: 10px 5px;
  font-size: 1rem;
}

実装結果

See the Pen ボタン-小(original) by hori-suke (@hori-suke) on CodePen.

詳細説明

とくに説明は不要と思います。ボタンのサイズによって、width、上下のpadding、フォントサイズを上書きしています。

【色違いボタン】完成コードと実装結果

コード

<a class="btn btn--warning" href="#">warningボタン</a>
/* .btnは以前の記事と同じため省略。以下のコードを追加 */

/* warningボタン */
.btn--warning {
  color: #fa577d;  /* ① */
}

/* フォーカス、マウスホバー時 */
.btn--warning:focus,
.btn--warning:hover {
  background-color: #fa577d;
  border-color: #fa577d;
}

実装結果

See the Pen ボタン-warning(original) by hori-suke (@hori-suke) on CodePen.

詳細説明：①color: #fa577d;

文字色をピンク色(#fa577d)で上書きしています。なお、.btnではborder-colorがcurrentColorで指定されているため、文字色がピンク色に上書きされたのと同期してボーダー色もピンク色になります。

【番外編：立体ボタン】完成コードと実装結果

コード

<a class="btn-3d" href="#">立体ボタン</a>
/* メインカラーの設定 */
:root {
  --main-color: #1093cd;
}

/* 立体ボタン */
.btn-3d {
  position: relative;
  display:inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 2em 20px 1.38em;
  color: #333;
  border: 2px solid var(--main-color);
  border-radius: 10px;
  background-color: var(--main-color);
  box-shadow: 0 5px 0 #aaa;
  font-size: 1.125rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: 0.25s;
}

.btn-3d::after {
  content: '\f101';
  position: absolute;
  top: 50%;
  right: 0.83em;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  transform: translateY(-50%);
}

.btn-3d:focus,
.btn-3d:hover {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #aaa;
}

実装結果

See the Pen ボタン-立体(original) by hori-suke (@hori-suke) on CodePen.

追加クラスではなく新規クラスで対応する場合もあり

マウスホバーで高さが変化するように見える立体ボタンです。

このボタンは、基本のボタンからの変更点が多数あります（角が丸い、立体的になっている・・・等）。このような場合は、基本のボタンへの追加クラスで対応しようとせず、全く別のクラスとして新規作成したほうがよいでしょう。

先程例とした挙げたような、サイズ違い、色違いといった程度の変更であれば、追加クラスで上書きされるプロパティが限定されるので、追加クラス名から上書きされるプロパティが容易に推定でき、後々の保守が容易です（サイズや色を再変更するときなど）。

しかし、今回のような多岐にわたる変更を一つの追加クラスで対応すると、上書きされるプロパティの範囲が推定困難となり、保守しにくいコードになってしまいます。

そういった理由から、このボタンは追加クラスではなく、新規クラスで対応しています。

【豆知識：ボタンの影はbox-shadowで作ろう】
border-bottomで影を作ると、マウスホバーで影の高さが変わったときに、ボタンより下の要素が位置ずれして「ガクッと」して見えてしまいます。
そのため、ボタンの影はbox-shadowで作りましょう。

おわり

今回は、基本のボタンを拡張していろいろなボタンを作ってみました。基本のパーツに追加クラスを当てて拡張する、という考え方は、ボタンに限らず、他のパーツ（ラベル、カード、メディアなど）でも共通の考え方になりますので、是非みなさんもご自身でいろいろ試してみてくださいね。

この書き方に慣れると、CSSを書くのがより一層楽しくなってくると思います！

なお、この記事は以下の書籍を参考にさせていただいてます。CSS設計を体系的に学ぶには最高の一冊です。

CSS設計 ボタン

この記事を書いた人

ホリエ

新卒で大企業に入社。16年後に「そうだ、これからは個人で生きていこう」と思いたち、フリーランスになった人。
Web制作を中心にこつこつモノづくりの日々を送っています。

記事一覧