snippet html css

ボタンの矢印を中央に配置する

本ページにはプロモーションが含まれる場合があります

ボタンの矢印を中央に配置する

実務ではかなりの頻度で使う矢印付きのボタン。
上下中央にする方法はいろいろありますが、一番簡単なやり方はtranslateを使った方法かなと思います。

DEMO

more

HTML

<a href="#" class="button-02">more</a>

CSS

.button {
  position: relative;
  padding: 10px 50px;
  color: #fff;
  border-radius: 50vh;
  background-color: #90aaf7;
  text-decoration: none;
}
.button::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(0, -50%) rotate(45deg);
}

top: 50%;で要素を中央に配置しますが、positionは左上が基準になるため完全に中央にはなりません。
translateに%で値を指定すると要素に対して相対的に参照されるため、-50%で要素の半分の大きさを移動させて中央に表示させます。

上下左右中央にしたい場合は、topとleftを50%、translate(-50%, -50%)にすれば真ん中に配置されます。

-snippet, html, css