CODE
.button {
display: block;
width: 10rem;
padding: 1rem;
background: #ef6179;
color: #FFF;
text-align: center;
letter-spacing: .1rem;
text-decoration: none;
}
<a class="button" href="https://code-idea.com/">詳しく見る</a>
DEMO
See the Pen button-sample-001 by CODE IDEA (@codeidea) on CodePen.
MEMO
クラス名、各数値、色の指定、リンク先、文言は用途に合わせて変えてください。
letter-spacing はお好みで、入れても入れなくても大丈夫です。
MANUAL
width | 横幅の指定 |
padding | ボタン内の隙間の指定 |
background | 背景色の指定 |
color | 文字色の指定 |
text-align | 文字位置の指定 |
letter-spacing | 文字間の調整 |
text-decoration | リンク下線の指定 |