【CSSで動きを出す】hover ,active,focus の使い方

CSS
Toshi
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);で

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

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

まとめ

Toshi
Toshi

いかがでしたか?ぜひ、サンプルコードを使って勉強に役立ててみてください

 

Toshikazu

Nagasaki→Tokyo→China→Fukuoka

1992/07/02

2017年からブログを運営。
現在エンジニアとして福岡で働いています。

Toshikazuをフォローする
CSS
シェアする

コメント