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