• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

ボタンをホバーしたときのエフェクトまとめ(基本編)

投稿者アイコン
2019/09/19
書いた人:
rurippa!
カテゴリ:
CSS
22,428 views

ボタンをホバーした時のサンプルをまとめました。コピペでそのまま使用できます。

ボタンをホバーしたときのエフェクトまとめ(基本編)

ボタンをホバーしたときによく見る動きを、まとめてみました。コピペでもそのまま使用できます。

目次

はじめに

共通部分のHTML/CSSです。btnCommonはボタンの装飾、btn00は それぞれのボタンによって異なります。

		<p><a href="#" class="btnCommon btn00">button</a></p>
		
		p{
		text-align: center;
		}
		.btnCommon a{
			position: relative;
			display: block;
			width: 150px;
			height: 46px;
			box-sizing: border-box;
			padding: 10px;
			border: 1px solid #333;
			color: #333;
			transition: .2s;
		}
		

ゆっくりと背景色が変化

よく見る動作の1つですね。簡単に実装できて、使いやすいです。

button1

		/* ボタン1 */
		.btn01:hover {
			background-color: #333;
			color: #fff;
		}
		

枠線の種類が変化

枠線の種類を「dashed(点線)」にしています。

button2

		/* ボタン2 */
		.btn02:hover{
			border-style: dashed;
		}
		

角丸になる

ホバーすると枠線が角丸に変化します。

button3

		/* ボタン3 */
		.btn03:hover{
			border-radius: 10px;
		}
		

文字間が広がる

ホバーするとテキストの文字間が広がります。

button4

		/* ボタン4 */
		.btn04:hover{
			letter-spacing: 2px;
		}
		

背景がスライド(左から右へ)

ホバーすると背景がスライドします。これも、設定次第でいろんな角度・方向へスライドできます。

button5

		/* ボタン5 */
		.btn05{
			overflow: hidden;
		}

		.btn05:before{
			content: "";
			z-index: -1;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: -100%;
			background-color: #333;
			transition: .2s;
		}

		.btn05:hover{
			color: #fff;
		}

		.btn05:hover:before{
			left: 0;
		}
		

背景がスライド(下から上へ)

ホバーすると背景がスライドします。先ほどのと、方向が違うだけです。

button6

		/* ボタン6 */
		.btn06{
			overflow: hidden;
		}

		.btn06:before{
			content: "";
			z-index: -1;
			position: absolute;
			width: 100%;
			height: 100%;
			bottom: -100%;
			left: 0;
			background-color: #333;
			transition: .2s;
		}

		.btn06:hover{
			color: #fff;
		}

		.btn06:hover:before{
			bottom: 0;
		}
		

最後に

いかがでしたか?
色々な動きをしているボタンも見かけますが、まずは基本が大事なので シンプルでよく見るものをまとめました。よければ使ってみてくださいね。


この記事を読んだ人はこんな記事も読んでいます