ログイン

問題7 文字が押せるボタン

CSSAnimationの問題

CSSAnimation

文字が押せるボタン

問題

押したらテキストが沈むボタンを作ってみましょう!

自分の環境に書くコード

              <div class="btn">ここをクリック</div>
¥HTML¥
            
              .btn{
  text-shadow: 0px 4px black;
  font-size: 3em;
  font-weight: bold;
  color: #cccccc;
  transition: .5s;
}
¥CSS¥
            

期待する画面

コードのアイコン

解答ソースコード

              .btn{
  transition:.5s;
}
.btn:active{
  transform: translateY(4px);
  text-shadow: 0px 0px black;
}
¥CSS¥
            
答えのアイコン

解説

まず押された時、テキストの影をなくします。
そしてテキスト全体をテキストの影の長さだけ下に動かすと完成です。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!