問題

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を使ったアニメーションの長さ指定

さらにスキルアップしたい方は公式LINEから「CSSアニメーション」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは?LINE適正コース診断はこちら
最大100,000円OFF 対象期間中に初めて無料相談にお申し込みされた方へ 無料相談はこちら