今回は、CSSを使ってアイコン付きのこのようなボタンの作り方を紹介します。
単なるボタンと比べて、このようにアクションやボタンの意味をアイコンで示すことで、UIとして優れたボタンになるので、ぜひ使ってみてください。
主な作り方は全部で主に３つあります。それぞれ紹介していきましょう。

今回紹介するコードが実際に動いているものはこちらです。

See the Pen Untitled by Yoshimune (@hachidaime) on CodePen.

今回の例では、テキストの左側と右側の両方にアイコンを入れていますが、
実際に使用する場合にはどちらか一方を使用するようにしてください。

::before, ::aftrerを使ったアイコン付きボタン

まずは、::before, ::afterを使った実装です。
HTML部分は、必要な要素はボタンとなるアンカータグのみで、非常にシンプルです。
スタイルシートで::before, ::afterを使って、要素の前後にアイコンを配置します。
開始タグ直後の::beforeには「戻る」ボタンを、終了タグ直前の::after要素には「次へ」のボタンをcontent属性を使って実装しています。
実装の仕方は簡単で、これらのアイコンを、position:absoluteを使って配置します。
この方法の特徴は、HTML部分が非常にシンプルなことです。
また、CSSでアイコンを制御しているので、コードが共通化され運用に向いています。

<a href="" class="button normal">アイコン付きボタン</a>

.button {
  display: inline-block;
  background: #000;
  border-radius: 5px;
  color: #fff;
  width: 500px;
  text-align: center;
  padding: 15px 0;
  text-decoration: none;
  position: relative;
}

.button::before {
  position: absolute;
  content: "<";
  top: 15px;
  left: 20px;
}

.button::after {
  position: absolute;
  content: ">";
  top: 15px;
  right: 20px;
}

複雑に見えますが、以下の属性はただの装飾なので、

  background: #000;
  border-radius: 5px;
  color: #fff;
  width: 500px;
  text-align: center;
  padding: 15px 0;
  text-decoration: none;

実際に重要な以下の指定を理解しておきましょう

.button {
  display: inline-block;
  position: relative;
}

.button::before {
  position: absolute;
  content: "<";
  top: 15px;
  left: 20px;
}

.button::after {
  position: absolute;
  content: ">";
  top: 15px;
  right: 20px;
}

display:flexを使ったアイコン付きボタン

次にdisplay:flexを使ったアイコン付きボタンの実装について紹介します。
display:flexは、要素の1次元配置をするためのCSS属性で、縦に並べたり横に並べたりする事が簡単にできます。
今回は、横に並べて要素を配置しましょう。
HTMLでは３つの要素（アイコン、テキスト、アイコン）を配置します。

<a href="" class="button flex"><span class="icon"><</span><span class="text">アイコン付きボタン</span><span class="icon">></span></a>

さて、これらの要素を隙間なく敷き詰めてみましょう。
3つの要素のサイズを合計で100%になるようにこのように設定します。

.button {
  display: inline-block;
  background: #000;
  border-radius: 5px;
  color: #fff;
  width: 500px;
  text-align: center;
  padding: 15px 0;
  text-decoration: none;
  display: flex;
  text-align: center;
}

.button .icon {
  width: 50px;
}

.button .text {
  width: calc(100% - 100px);
}

ボタンとしての細かい装飾はありますが、ここで重要なのは各要素のサイズです。

アイコンを「width: 50px;」、テキストを「width: calc(100% – 100px);」とすることで、
合計100%となるように並べています。

display:gridを使ったアイコン付きボタン

display:gridは、2次元に要素を配置するのが特徴のCSS属性です。
2次元の配置ができますが、今回は横方向の１次元の配置に利用します。

次の指定で、３つの要素のサイズを指定します。

grid-template-columns: 50px auto 50px;

左右のアイコン部分は50pxで、テキスト部分は自動調整されます。

.button {
  display: inline-block;
  background: #000;
  border-radius: 5px;
  color: #fff;
  width: 500px;
  text-align: center;
  padding: 15px 0;
  text-decoration: none;
  display: grid;
  grid-template-columns: 50px auto 50px;
}

とてもシンプルですね。

いかがだったでしょうか。
今回はスタイルシートを使ったアイコン付きボタン作り方について３つ紹介しました。
それぞれ特徴があり、覚えれば簡単に使えるものばかりですのでぜひ使ってみてください。

[RelService] [Service]