Toshi
CSSはHTMLの装飾をするだけではなく、JavaScriptのような動きをつけることもできます。今回は、hover , active , focus を紹介したいと思います。
今回解説していく内容は以下です！
本記事の内容
・hover , active , focus の使い方
hover , active , focus の使い方
サンプルを作ったので、見ながら少しコードをいじってもらったらすぐどこがどういうプログラムになっているのかわかるかと思います！
.btn0{
font-size:20px;
display: inline-block;
text-decoration: none;
color: #fff;
width: 120px;
height: 120px;
line-height: 120px;
border-radius:50%;
border:double 5px #000000;
text-align:center;
vertical-align: middle;
overflow: hidden;
transition: .6s;background:#C5C5C5;
}
.btn0:hover{
-webkit-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
transform:rotateY(360deg);
color:#000000;
background:#fff
}
.btn1{
display: inline-block;
text-decoration: none;
background:#fff;
color:#000000;
width: 122px;
font-size: 20px;height:120px;
line-height: 120px;border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
box-shadow: inset 0px 3px 0
rgba(255,255,255,0.3),
0 3px 3px rgba(0, 0, 0, 0.3);
font-weight: bold;
border-bottom: solid 3px #000000;
text-shadow: 1px 1px 1px
rgba(255, 255, 255, 0.65);
transition: .4s;
}
.btn1:active{
-ms-transform: translateY(1px);
-webkit-transform:translateY(1px);
transform:translateY(1px);
box-shadow: 0 0 2px
rgba(0, 0, 0, 0.35);
border-bottom: none;
}
.btn2 {
display: inline-block;
text-decoration: none;color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
background-image:
-webkit-linear-gradient
(45deg, #fff 0%, #000000 100%);
background-image:
linear-gradient
(45deg, #000000 0%, #fff 100%);
transition: .4s;font-size:20px;
}
.btn2:focus{
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
transform: rotate(180deg);
}
ちょっと詳しく解説すると…
左のボタンは : hover なので、マウスカーソルをボタンの上に載せてあげましょう。ボタンが回転したのがわかると思います。
: hover の後の記述をみてみましょう。transform:rotateY(360deg);でボタンを回してあげています。
真ん中のボタンは : active なので、ボタンをクリックしてから離した時の動きをしています。
: active の後の記述をみてみましょう。box-shadow: 0 0 2px rgba(0, 0, 0, 0.35); border-bottom: none;
ボーダーのシャドーを無くしていることがわかります。
右のボタンは : focus なのでクリックした時に変化するようになっています。
ちょっと試してもらいたいのですが、ボタンをクリックしたあとにボタン以外の場所を押すと元に戻ると思います。
: focus の後の記述をみてみましょう。こちらも : hover と同じようにtransform:rotate(10deg);で
要素を動かしていることがわかりますね！
３つとも使いやすく、ちょっとボタンに動きを出したい時は便利です。ぜひ、参考にしてみてください。
まとめ
Toshi
いかがでしたか？ぜひ、サンプルコードを使って勉強に役立ててみてください！
コメント