キャプションが複数行のボタンでインジケーターをボタンの高さの中心に配置したい - CSS

キャプションが複数行のボタンでインジケーターをボタンの高さの中心に表示するコードを紹介します。

実装したい内容

下図が完成形のイメージです。ボタンの右側に矢印記号などのインジケーターを表示します。ボタンのキャプションの行数が複数の場合でも、ボタンのインジケーターはボタンの高さの中央に表示します。

実装方針

ボタンの内部の領域をflexboxで2分割し、左側の領域にボタンのキャプションを表示します。右側の領域にインジケーターの画像を表示します。FlexBoxの各枠を中央揃えにするために、 align-items プロパティを指定して高さの中心でそれぞれの枠を揃える配置とします。
align-items プロパティの動作に関する詳細はこちらの記事を参照してください。

実装

コード

下記のHTML、CSSファイルを作成します。

IndicatorButton.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="IndicatorButton.css" />
</head>
<body>
  <p>インジケーターつきボタンのテスト</p>
  <button class="IndicatorButton IB2Line">
    <div class="IndicatorButtonCaption">
      キャプションが<br />2行のボタン
    </div>
    <div class="IndicatorButtonIndicator">
      <img src="indicator.svg" />
    </div>
  </button>

  <hr />

  <button class="IndicatorButton IB3Line">
    <div class="IndicatorButtonCaption">
      キャプションが<br />3行のボタン<br />テストテスト
    </div>
    <div class="IndicatorButtonIndicator">
      <img src="indicator.svg" />
    </div>
  </button>

</body>
</html>

IndicatorButton.css

.IndicatorButton {
  display: flex;
  align-items: center;
  color: #FFFFFF;
  background-color: #213EB1;
  border: none;
  width: 16rem;
  padding: 0 2rem 0 2rem;
}

  .IndicatorButton.IB2Line {
    height: 4rem;
    border-radius: 2rem 2rem 2rem 2rem;
  }
  .IndicatorButton.IB3Line {
    height: 6rem;
    border-radius: 1rem 1rem 1rem 1rem;
  }

  .IndicatorButton:hover {
    background-color: #516ddc;
  }
  .IndicatorButton:active {
    background-color: #63a1ed;
  }

.IndicatorButtonCaption {
  flex: 1;
  border: 1px solid #a6e6ff;
  text-align: left;
}
.IndicatorButtonIndicator {
  flex: 1;
  border: 1px solid #a6e6ff;
  max-width: 1rem;
}

解説

ボタンのコードは下記のコードです。
今回ボタンはbuttonタグで記述しています。ボタン内部のコンテンツはbuttonタグ内部に記述します。 buttonタグはブロック要素のため、buttonタグのクラスIndicatorButtonクラスに display:flex; を指定しFlexBox表示とします。内部のdiv枠がテキストを表示する枠と、インジケーターを表示する枠になります。
なお、動作確認のため、内部のflexboxの枠には境界線を描画する処理を入れています。

  <button class="IndicatorButton IB2Line">
    <div class="IndicatorButtonCaption">
      キャプションが<br />2行のボタン
    </div>
    <div class="IndicatorButtonIndicator">
      <img src="indicator.svg" />
    </div>
  </button>

.IndicatorButton {
  display: flex;
  align-items: center;
  color: #FFFFFF;
  background-color: #213EB1;
  border: none;
  width: 16rem;
  padding: 0 2rem 0 2rem;
}

右側のインジケーターの枠はmax-widthを指定し、インジゲーターの表示が大きくなないよう調整しています。

.IndicatorButtonCaption {
  flex: 1;
  border: 1px solid #a6e6ff;
  text-align: left;
}
.IndicatorButtonIndicator {
  flex: 1;
  border: 1px solid #a6e6ff;
  max-width: 1rem;
}

ボタンのテキスト行が2行か3行の違いで表示を切り替えています。
指定しないで実装することもできますが、2行の場合にボタンの左右を半円形にする場合は高さの制定が必要なため、サブクラスでの切り替えをしています。

  .IndicatorButton.IB2Line {
    height: 4rem;
    border-radius: 2rem 2rem 2rem 2rem;
  }
  .IndicatorButton.IB3Line {
    height: 6rem;
    border-radius: 1rem 1rem 1rem 1rem;
  }

マウスポインタをボタンの領域に入った場合とクリックした場合にボタンの背景色を変える処理を記述しています。

  .IndicatorButton:hover {
    background-color: #516ddc;
  }
  .IndicatorButton:active {
    background-color: #63a1ed;
  }

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ボタンのキャプションの枠と、インジケーターの枠が高さの中心で揃えられていることが確認できます。

マウスポインタがボタンの領域に入ると背景色が変わります。

ボタンをクリックした場合も背景色が変わります。

CSSを修正してFlexBoxの枠を非表示にした完成形の表示結果です。

.IndicatorButtonCaption {
  flex: 1;
  /*border: 1px solid #a6e6ff;*/
  text-align: left;
}
.IndicatorButtonIndicator {
  flex: 1;
  /*border: 1px solid #a6e6ff;*/
  max-width: 1rem;
}

補足:行数の違いによる高さ設定をしない場合の例

ボタンの高さを指定しない場合の例です。

コード

HTMLとCSSファイルのコードです。

IndicatorButton-m.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="IndicatorButton-m.css" />
</head>
<body>
  <p>インジケーターつき複数行ボタンのテスト</p>

  <button class="IndicatorButton">
    <div class="IndicatorButtonCaption">
      キャプションが<br />2行のボタン
    </div>
    <div class="IndicatorButtonIndicator">
      <img src="indicator.svg" />
    </div>
  </button>

  <hr/>

  <button class="IndicatorButton">
    <div class="IndicatorButtonCaption">
      キャプションが<br />6行のボタン<br />テストテスト<br />テストテスト<br />テストテスト<br />テストテスト
    </div>
    <div class="IndicatorButtonIndicator">
      <img src="indicator.svg" />
    </div>
  </button>

</body>
</html>

IndicatorButton-m.css

.IndicatorButton {
  display: flex;
  align-items: center;
  color: #FFFFFF;
  background-color: #213EB1;
  border: none;
  width: 16rem;
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 1.4rem 1.4rem 1.4rem 1.4rem;
}

  .IndicatorButton:hover {
    background-color: #516ddc;
  }
  .IndicatorButton:active {
    background-color: #63a1ed;
  }

.IndicatorButtonCaption {
  flex: 1;
  text-align: left;
}
.IndicatorButtonIndicator {
  flex: 1;
  max-width: 1rem;
}

解説

先ほどのコードとほぼ同様ですが、ボタンの高さを指定しないため、上下のマージンを明示的に指定する必要があり、 IndicatorButton クラスの padding-top padding-bottom に値を設定しています。

.IndicatorButton {
  display: flex;
  align-items: center;
  color: #FFFFFF;
  background-color: #213EB1;
  border: none;
  width: 16rem;
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 1.4rem 1.4rem 1.4rem 1.4rem;
}

表示結果

上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。
ボタンの角丸も表現できていますが、高さを明示的に指定しないため、2行のボタンで左右が半円形になった表現にはならないです。

ちなみに、border-radius プロパティの値を十分大きな数値にすると、角丸を最大限適用して半円形の表示にできますが、高さのあるボタンでも同様の表現をするため見栄えがきれいでなくなってしまいます。

.IndicatorButton {
  display: flex;
  align-items: center;
  color: #FFFFFF;
  background-color: #213EB1;
  border: none;
  width: 16rem;
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 4rem 4rem 4rem 4rem;
}