CSSでボタンの右端にアイコンを配置する方法

みなさんこんにちは、ゆうやです！

この記事では、

「ボタンの右端に矢印アイコンを配置したいでやんす！」

「ボタンの右端に何かしらのアイコン画像を表示させたいんだえええ〜！」

という方に向けてその方法を紹介していきます！

MEMO

↑ONE PIECEのお玉ちゃんと天竜人風に言ってみました。

CSSでボタンの右端にアイコンを配置する方法
まとめ

CSSでボタンの右端にアイコンを配置する方法

ボタンの右端にアイコン完成イメージ

今回作成するボタンはこちら！

右矢印、下矢印、外部リンク

Webサイトで頻繁に使用されているアイコンたちです！！

実際のページで確認したい方は以下のページよりご覧になってください〜

デモページを見に行く

ボタンのHTML

さあ！それでは早速作っていきましょう！

ボタンのHTMLはこちらをお使い下さい(^o^)

注意

今回使用しているアイコン及び画像はフリーアイコンサイトの「Font Awesome」のものです！

Font Awesomeの読み込みがまだの方は以下のコード（CDN）をheadタグ内に追加してください。

index.html

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

使用するアイコンの検索の仕方などは以下を参考にしてください〜

右矢印アイコンと下矢印アイコンは「chevron」と検索すると出てきます
外部リンクアイコンは「external」と検索すると出てきます
imgタグを使用する場合はsrcに画像へのパスを入れて下さい

index.html

<a href="" class="Btn">
  もっとみる
  <img src="./img/arrow-right.svg" class="Btn-Icon" alt="">
</a>
<a href="" class="Btn">
  ひらく
  <i class="fas fa-chevron-down Btn-Icon"></i>
</a>
<a href="" class="Btn">
  外部サイトへ
   <i class="fas fa-external-link-alt Btn-Icon"></i>
</a>

ボタンのCSS

HTMLが書けたらCSSで服を着せてあげましょう〜

index.css

.Btn{
  position: relative;
  border: 1px solid #000;
  margin-top: 40px; /*なくてもOK*/
  display: block;
  width: 240px;/*ボタンの横幅指定*/
  padding: 20px 0;/*上下余白指定*/
  text-align: center;/*テキスト中央寄せ*/
  color: #000;
  font-size: 18px;
}
.Btn-Icon{
  position: absolute;
  top: 50%;
  right: 20px;/*右からの距離*/
  width: 13px;/*アイコンの横幅指定*/
  transform: translateY(-50%);/*この指定で上下中央に*/
}

「top:50%、right:◯px」という指定だけで右端の上下中央に配置できる場合もあるんですが、筆者が最近コーディングしている時はそれだけではうまく上下中央に配置されてくれないことが多く、、、

そんな時に解決してくれたのが、

transform: translateY(-50%)

です！！

これを指定すればまず間違いなくabsoluteの要素を上下中央に表示させることができるでしょう！！

ぜひお試しあれ(^o^)