【初心者向け:CSSでできるボタンのホバーアクション】

ひぐま
ひぐま

サイトを作る上で必ずといっていいほど登場する「詳しくみる」などのボタンですが、
デザインの通り設計したあと、ホバーエフェクト(マウスをのせたときに状態が変化する)をつけてあげることで、操作の視覚的なわかりやすさ、
すなわち、ユーザービリティの向上につながります。

今回は始めたての人も簡単に実装できるホバーエフェクトをいくつか紹介します。
是非お試しください。

下準備

HTML

まずは基本的なボタンのHTMLを用意します。

<p><a href="#">Hover Me!<a></p>

CSS

p a{
	width:122px;
	padding:10px 0;
	display:inline-block;	
	text-align:center;
	color:#fff;
	text-decoration:none;
	background:#555;
}

上記をベースにして、動きごとにCSSを付け加えてゆきます。

1.ホバーすると背景の色がふわっと変化する

p a{ -webkit-transition: all .3s ease;
	transition: all .3s ease; 
}/*ボタンのベースに追加してください*/
/*マウスオーバーしたら*/
p:hover a{
background:#cd5c5c;/*赤色に変化する*/
}

ふわっとした動きを実装するためにaタグにtransitionを設定しています。
transitionはホバー時などスタイルの変化がある場合にその遷移にかかる時間を指定します。
1s＝1秒間で遷移の指定です。小数点が使えます。

デモ

2.ホバーするとボックスがラインだけになる

p a{
	border:1px solid #555;/*枠線*/
	-webkit-transition: all .3s ease;
	transition: all .3s ease; 
}/*ボタンのベースに追加してください*/
/*マウスオーバーしたら*/
p:hover a{ 	
 	color:#555;/*文字の色が灰色に*/
  	background:none;/*背景色なし*/
}

デモ

3.ホバーすると角が丸くなる

p a{ -webkit-transition: all .3s ease;
	transition: all .3s ease; 
}/*ボタンのベースに追加してください*/
/*マウスオーバーしたら*/
p a:hover { border-radius:40px;/*角が丸くなる*/ }

デモ

4.ホバーで浮く

p a{ -webkit-transition: all .3s ease;
	transition: all .3s ease; 
}/*ボタンのベースに追加してください*/
/*マウスオーバーしたら*/
p a:hover {
	-webkit-transform: translateY(-4px);
   	-ms-transform: translateY(-4px);
   	transform: translateY(-4px);/* 少し浮く */
}

デモ

5.ホバーすると立体的なボタンをプッシュしてる風になる

p a{
	border-radius:5px;/* 角丸にするとより立体的に見える */
	border-bottom:5px solid #3f3f3f;/* ボタンの影になる部分 */
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
 }/*ボタンのベースに追加してください*/
/*マウスオーバーしたら*/
p a:hover {
	margin-top:3px;/* 押される分 */
	border-bottom:2px solid #3f3f3f;/* 押し込んだ分 */
}

ボーダーでボタンの側面の影のように見せています。ホバーで上側にmarginで押される分のあきを作り、ボーダーの長さを短くして押し込んだ風の動きが再現されています。

デモ

6.ホバーすると光彩風

p a{
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}/*ボタンのベースに追加してください*/
/*マウスオーバーしたら*/
p a:hover {
	box-shadow: 0px 0px 10px 0px #00ffff;/*box-shadowで光彩風*/
}

box-shadowのプロパティは、box-shadow:横方向にどれだけずらすか 縦方向にどれだけずらすか ぼかしの大きさ 影の広がり 影色です。 ずれを0にすることで光彩風になっています。

デモ

関連記事