CSSAnimation
Googleでログイン問題7：テキストが沈むボタン
押したらテキストが沈むボタンを作ってみましょう！
あらかじめエディタに書くコード
<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¥
完了にする！
活動記録をTweetする
そしてテキスト全体をテキストの影の長さだけ下に動かすと完成です。