ログイン

問題1 クリックで押したように見えるボタンの作り方

CSSAnimationの問題

CSSAnimation

クリックで押したように見えるボタンの作り方

問題

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¥
            
答えのアイコン

解説

いかがでしたか?
今回の問題は簡単な実装の組み合わせですが
このボタンの実装方法を知らかった方は意外と分からなかったのではないでしょうか

まずbox-shadowで要素に影をつけます。
ちなみにbox-shadowのプロパティの指定が三個の場合プロパティは(影を右方向に〜移動 影を下方向に〜移動 影の色)です。 そして要素がクリックされたときに適用される擬似要素activeを使ってbox-shadowの下方向の移動距離をなくします。
これで終わりではなく最後にtranslate、transformY を使って要素自体を下方向に動かします。
これで沈んだようなボタンが実装できました

今回のポイント
box-shadowの使い方
擬似要素activeの使い方
translate、translateYの使い方
transitionを使ったアニメーションの長さ指定
完了にする!
LINEの友達追加でお役立ち動画をGET!!