角を丸めてボタンにする

01 / 05

リンクは放っておくと地味

<a> はそのままだと青い文字に下線だけ。文章の中ならこれでいいけれど、「ここを押してほしい」と伝えたいときは弱い。

CSSでボタンらしい見た目に作りかえよう。

02 / 05

text-decoration: none; で下線が消える。text-decoration（文字のかざり）は下線や取り消し線をあつかうプロパティだよ。

下線が消えると、文字ではなく部品として見えはじめる。

.btn {  text-decoration: none;}

03 / 05

リンクは横に流れる性質（インライン）なので、display: inline-block; にしてから padding を入れる。

padding: 12px 24px; は「上下 12px・左右 24px」。左右を広めにするとボタンらしくなるよ。

.btn {  display: inline-block;  padding: 12px 24px;  background-color: #2f7d6f;  color: white;}

04 / 05

border-radius（角の丸み）は角をどれくらい丸くするかの指定。

.btn {  border-radius: 6px;}

05 / 05

border-radius はボタン専用ではない。カードや画像にも使えて、角が丸いだけでやわらかい印象になるよ。

枠線・背景色・丸み——ここまでの道具を組み合わせて作っていこう。ここから書いてみよう。

.card {  border: 1px solid #dddddd;  border-radius: 8px;}