HTMLとCSSで色んなボタンを作る

はじめに

今回は、HTML5/CSS3を使って、色んなボタンを作っていきます。どんな場面でも使いやすいよう、５種類に分けて制作していきます。

シンプルなボタン

See the Pen シンプルなボタン by Uka Suzuki (@uukasuzuki_) on CodePen.

ホバーすると背景色が現れるボタン

See the Pen ホバーすると背景色が現れるボタン by Uka Suzuki (@uukasuzuki_) on CodePen.

左から流れる背景色アニメーションの説明

• position: relative;で、子要素（擬似要素）を相対的に配置するための基準を設定。overflow: hidden;は、ボタン外に出る部分を隠すことで、アニメーションがスムーズに見えます。また、最初にbackground-color: transparent;を指定すると、初期状態の背景色を透明にすることができます。

• ::before擬似要素を使って、ホバー時に左から流れる背景を作成します。また、テキストはz-index を使って、背景の上に表示されるようにしています。

• .btn07::beforeでは、content: '';で擬似要素を作成し、position: absolute;で親要素に対して絶対的に配置します。left: -100%;で、初期位置を左端の外に設定（アニメーション開始点）し、width: 100%; height: 100%;親要素全体をカバーしています。z-index: 0;は、背景を前面に出すために指定しています。

立体的なボタン

See the Pen 立体的なボタン by Uka Suzuki (@uukasuzuki_) on CodePen.

立体の説明

• :active擬似クラスは、要素がクリックされている間（マウスボタンが押されている間）のスタイルを適用します。

• box-shadow: none;は、クリック時にボタンの影を消します。これにより、押し込まれた感じを強調します。transform: translateY(5px);は、ボタンを垂直方向に5ピクセル下に移動させます。これにより、押されたように見える視覚的効果が得られます。

グラデーションのかかったボタン

See the Pen グラデーションのかかったボタン by Uka Suzuki (@uukasuzuki_) on CodePen.

グラデーションの仕組み

• background: linear-gradient(135deg, #ff6b6b, #f06595);は、グラデーションの背景を設定します。135度の角度で、2つの色（#ff6b6b と #f06595）がグラデーションになります。

• background: -webkit-gradient(...)は、古いWebKitブラウザ用のグラデーション設定。linearを指定して、上から下へのグラデーションを設定しています。from(#f1e767)は開始色、to(#feb645)は終了色。
  
  background: -webkit-linear-gradient(...)は、新しいWebKitブラウザ（ChromeやSafari）向けのグラデーション設定。topからbottomへの線形グラデーションを指定。
  
  background: linear-gradient(to bottom, ...)は、最新のCSS仕様に基づく標準のグラデーション設定。to bottomは、上から下に向かうグラデーションを定義しています。

• .btn15:hoverのbackground: -webkit-gradient(...)では、ホバー時にグラデーションの方向を反転させるため、left bottomからleft topへのグラデーションを指定しています。
  
  background: -webkit-linear-gradient(...)は、WebKitブラウザ用のホバー時のグラデーション設定。bottomからtopに向かうグラデーション。
  
  background: linear-gradient(to top, ...)は、標準のCSS仕様に基づくホバー時のグラデーション設定。to topは、下から上へのグラデーションを定義しています。

矢印ボタン

See the Pen 矢印ボタン by Uka Suzuki (@uukasuzuki_) on CodePen.

三角矢印の作り方

• 前提として、矢印の作り方は色々あります。spanタグやdivタグでも作れますが、矢印は文字やリンクとセットで使われることが多いため、疑似要素で作っておくと便利です。疑似要素で作る利点として、SEO上の減点にならず、コードもまとまって見えるのが使い勝手が良い証拠です。

.arrow {
  position: relative;
}

.arrow::before {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 13px;    /* 左側の長さ */
  height: 13px;   /* 右側の長さ */
  border-top: 3px solid #000;     /* 左側の太さと色 */
  border-right: 3px solid #000;   /* 右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
}

• ::beforeでも::afterでも構いません。content: "";の中身は、必ず空のまま指定して下さい。これがないと疑似要素は機能しません。

• 上記では、borderで指定しましたが、widthとheightで棒の長さと太さを指定することができます。また、くの字作成で使用した疑似要素と重複しないようにして下さい。

まとめ

今回は、これまで学んだ事を活かし、色んなボタンを作りました。これから実務でも説明できるくらい、CSSの使い方について理解を深めていきます。