文字が押せるボタン
問題
押したらテキストが沈むボタンを作ってみましょう!
自分の環境に書くコード
<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¥
完了にする!
解説
そしてテキスト全体をテキストの影の長さだけ下に動かすと完成です。