CSSで動く :hover :active :focus の使い方

CSS
スポンサーリンク
.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);で

要素を動かしていることがわかりますね!

3つとも使いやすく、ちょっとボタンに動きを出したい時は便利です。ぜひ、参考にしてみてください。

コメント