【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 Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

このサイトは「プログラミングとアフィリエイト」のことをメインにいろいろな情報を発信していきます!

Toshikazu Hiranoをフォローする
CSS
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント