文字が押せるボタン

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

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

まず押された時、テキストの影をなくします。
そしてテキスト全体をテキストの影の長さだけ下に動かすと完成です。

ログインして解答を見る

完了にする！

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