ログイン
問題1

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

アイコン画像

問題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¥
            

コメントのアイコン解説

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

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

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

閉じる