さわったときに見た目を変える

01 / 05

反応がないと押せると思えない

ボタンらしく作っても、さわって何も起きないと「ただの絵かな」と思われてしまう。

押せるものには反応をつける。それがこのレッスンの話だよ。

02 / 05

セレクタのうしろに :hover を足すと、「カーソルが乗っているあいだだけ」のルールになる。

.btn のふつうの見た目はそのまま残り、乗っているときだけ上書きされるんだ。

.btn {  background-color: #c85a2b;}.btn:hover {  background-color: #8c3d18;}

03 / 05

リンクの上ではカーソルが指の形になる。でも div や button で作った部品はそうならない。

cursor: pointer; と書けば、押せるものだと形で伝えられるよ。

.btn {  cursor: pointer;}

04 / 05

色がパッと切り替わると少し乱暴に見える。transition を書くと、変化に時間をかけてくれる。

値は変化にかける秒数。0.3s くらいがちょうどいい。ふつうの側（:hover でない側）に書くのがポイントだよ。

.btn {  transition: 0.3s;}

05 / 05

:active（押しているあいだ）を使うと、影を薄くして沈んだように見せられる。

浮いている → 沈む、という動きがあると、指で押した感じが伝わるよ。ここから書いてみよう。

.btn:active {  box-shadow: 0 1px 0 #8c3d18;}