CSSでaタグを角丸ボタンにする
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>