CSSでaタグを角丸ボタンにする

codepen.io

Flexboxを使って実現している。
justify-content: center; で水平方向の中央寄せ、 align-items: center; で垂直方向の中央寄せをすることで、テキストをボタンの真ん中に持ってくる。

角丸は border-radius で調整。
幅や高さ、色などは好みで。

.-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 216px;
  height: 56px;
  text-align: center;
  border-radius: 12px;
}

aタグの中身にdivタグなどを使えば、テキストが複数行でも対応できる。

<a href="#" class="-btn -bg -txt">
  <div>
    BUTTON<br>
    <span class="-xs">
      Please Touch me!
    </span>
  </div>
</a>