CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法

CSSで作ったボタンをマウスオーバーしたときに色を変えたい場合、「transition」を使うとふわっと色が徐々に変化するアニメーション効果を簡単に加える事ができます。
「transition:1s」なら1秒、「transition:0.5s」なら0.5秒のアニメーションになります。

<a href="#" class="button1">ボタン1</a>

.button1{
	display:block;
	width:200px;
	height:50px;
	line-height:50px;
	text-decoration:none;
	text-align:center;
	background:#0066ff;
	color:#fff;
	transition:0.5s;
}

.button1:hover{
	background:#ff3300;
}

ところがボタンの背景色を単色からグラデーションに変えてみると、「transition」を使っているにもかかわらずアニメーションが効かなくなってしまいます。簡単にできると思ったのに残念な思いをした人も多いのではないでしょうか。

<a href="#" class="button2">ボタン2</a>

.button2{
	display:block;
	width:200px;
	height:50px;
	line-height:50px;
	text-decoration:none;
	text-align:center;
	background:linear-gradient(#00ccff,#0066ff);
	color:#fff;
	transition:0.5s;
}

.button2:hover{
	background:linear-gradient(#ff3300,#ff9900);
}

でもまだあきらめないでください。ちょっと工夫すればグラデーションを使ったボタンでもアニメーション効果をつける事ができます。

「before・after」擬似要素を使って、「:before」にはホバー前のグラデーションカラーを、「:after」にはホバー後のグラデーションカラーを設定します。
それらを「position」と「z-index」を使ってレイヤーを上下に重ねるように配置します。普通に配置すると「ボタン3」の文字が隠れて見えなくなってしまいますので、「z-index」にマイナスの値を設定するのがコツです。
あとは「opacity」を使って、ホバー時に上に配置されたレイヤーを透明にしてやればアニメーション効果のあるグラデーションボタンの完成です。

<a href="#" class="button3">ボタン3</a>

.button3{
	display:block;
	width:200px;
	height:50px;
	line-height:50px;
	position:relative;
	text-decoration:none;
	text-align:center;
	color:#fff;
	z-index:0;
}

.button3:before{
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	z-index:-1;
	left:0;
	transition:0.5s;
	background:linear-gradient(#00ccff,#0066ff);
}

.button3:after{
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	z-index:-2;
	left:0;
	background:linear-gradient(#ff3300,#ff9900);
}

.button3:hover:before{
	opacity:0;
}

次のような方法でも似たようなアニメーションを実現する事ができます。「background-size」を元のボタンの高さよりも大きめに設定して、ホバー前とホバー後の4色を使ったグラデーションを作ります。
そしてホバー時に「background-position」を使ってグラデーション背景の位置を上から下に移動させるイメージです。
「background-size」はボタンの高さの最低3倍必要です。ゆとりを持って6倍程度の高さにするとフェードインに近いスムーズなアニメーションになります。この例では50pxの6倍の300pxに設定しています。

<a href="#" class="button4">ボタン4</a>

.button4{
	display:block;
	width:200px;
	height:50px;
	line-height:50px;
	position:relative;
	text-decoration:none;
	text-align:center;
	color:#fff;
	transition:0.5s;
	background:linear-gradient(#00ccff,#0066ff 50px,#ff3300 250px,#ff9900);
	background-size:200px 300px;
}

.button4:hover{
	background-position:0 100%;
}