問題
1
CSSアニメーション
クリックで押したように見えるボタンの作り方
CSSアニメーションの問題に挑戦しよう！
問題
「クリックで押したように見えるボタンの作り方」
1番基礎的といえるcssアニメーションを学ぼう！
基礎的だからといってばかにはできません。
このアニメーションは以外に多くの場所で使われています。
※クリック押し続けるとわかりやすいです。
あらかじめエディタに書くコード
<div class="btn">クリックしてください</div>
¥HTML¥
.btn {
padding: 10px;
text-align: center;
width: 200px;
cursor: pointer;
background-color: #dddddd;
}
¥CSS¥
期待する画面
解答と解説（クリックで押したように見えるボタンの作り方）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
いかがでしたか？
今回の問題は簡単な実装の組み合わせですが
このボタンの実装方法を知らかった方は意外と分からなかったのではないでしょうか
まずbox-shadowで要素に影をつけます。
ちなみにbox-shadowのプロパティの指定が三個の場合プロパティは（影を右方向に〜移動 影を下方向に〜移動 影の色）です。 そして要素がクリックされたときに適用される擬似要素activeを使ってbox-shadowの下方向の移動距離をなくします。
これで終わりではなく最後にtranslate、transformY を使って要素自体を下方向に動かします。
これで沈んだようなボタンが実装できました
今回のポイント
box-shadowの使い方
擬似要素activeの使い方
translate、translateYの使い方
transitionを使ったアニメーションの長さ指定
