最近はボタンの上でホバーしたときに、ボタンの上を覆うように背景が動くデザインを見かけることが増えてきました。
ここでは、ボタンホバー時に背景が右から左、あるいは左から右に動くボタンの作り方をコード解説も含めてしています。
どんなものが作れるか？
例えば、次のようなボタンを作ることができます。
行って戻る動き
コード全容
ホバーした時とホバーを解除したときに、動く背景が行って戻るようにすることができます。
例えば、以下はホバーの「開始→終了」は右から左に動き、ホバー終了後の「終了→開始」は左から右に戻る動きになります。
<a href="#" class="my-contact-btn2 my-btn-animation2"><span>CONTACT</span></a>.my-contact-btn2{
display: inline-block;
background: skyblue;
width: 100px;
text-decoration: none;
padding: 10px 30px;
text-align: center;
position: relative; /* ←ポイント */
}
/*ボタン内のテキストを疑似要素の上にもってくる*/
.my-contact-btn2 span {
color: #eee;
position: relative; /* ←ポイント */
z-index: 3; /* ←ポイント */
transition: .3s; /* ←ポイント */
}
.my-contact-btn2:hover span{
color: white;
}
/*ボタン上のアニメーションの設定*/
.my-btn-animation2:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: red;
width: 100%;
height: 100%;
transform: scale(0, 1); /* ←ポイント */
transition: transform .3s linear; /* ←ポイント */
transform-origin: right; /* ←ポイント */
}
.my-btn-animation2:hover:before{
transform: scale(1, 1); /* ←ポイント */
}考え方としては、通常のボタンを作成して、そのボタンの左端（まはた右端など）にホバーしたいときに背景色をした疑似要素を:beforeで作成し、X軸方向の大きさを0とすることでデフォルトでは見えない状態にしておきます。
ホバーしたときに、この疑似要素がボタンの上を覆うようにします。
このとき、aタグの中に記述しているリンクテキストも疑似要素に覆われて見えなくなってしまうことを防ぐため、spanタグで囲っておきz-indexで背景を覆う疑似要素よりも上に表示するようにします。
あとはtransition-originでアニメーションの開始位置を指定すれば完了です。
:beforeの使い方については下記をご参考ください。
ボタンの基本設定
ボタンの基本設定配下のようになっています。
.my-contact-btn2{
display: inline-block;
background: skyblue;
width: 100px;
text-decoration: none;
padding: 10px 30px;
text-align: center;
position: relative; /* ←ポイント */
}text-decorationでaタグのリンクテキストの下に表示される青い下線を消しています。
ここでのポイントはposition: relative;を設定していることです。
:beforeを使ってホバー時の背景となる疑似要素を作成するのですが、その疑似要素の位置を指定するために必要になります。
ここでは親要素にposition: relative;を設定するんだなということがわかっていれば問題ありません。なぜこれを設定しなければいけないかの詳細については下記をご参考ください。
ボタンの中のテキストを上に持ってくる（z-index）
次に、ボタン（aタグ）の中のテキストを上に持ってくるコードを記述します。
/*ボタン内のテキストを疑似要素の上にもってくる*/
.my-contact-btn2 span {
color: #eee;
position: relative; /* ←ポイント */
z-index: 3; /* ←ポイント */
transition: .3s; /* ←ポイント */
}
ここでのポイントはposition: relative;とz-index、あとテキストにアニメーションをかけるtransitionです。
z-index
z-indexは要素の表示順序を指定することができる便利なプロパティです。正数（マイナスも）で表示順序の優先順位を指定します。
数値が大きいほど上に表示されます。ここでは、z-index: 3;とすることで、z-indexが1や2の要素よりも上に来るようにしています。z-indexの設定イメージは以下のようになります。
- z-index: 1; 最初から表示しているボタン要素
- z-index: 2; ホバー時にボタンを覆う疑似要素
- z-index: 3; リンクテキスト
こうすることで、ホバー時も必ずリンクテキストが一番上に表示されます。
なお、z-indexを使うためには、postinoプロパティを設定することが必須です（値の指定はstatic以外）。
値がrelativeであれば親要素を基準にして順序を指定することができます。（absoluteにすると一番上の要素が基準になるので、基本的には使いません）
- z-indexで順序を指定する（2にして、1よりも上に来るようにする）
- z-indexを使うときは
position: relative;を記述する。（positionがないとz-indexが動かない）
transition
transitionでアニメーションを設定しないと、ホバーした瞬間にテキストがクルッと変化してしまいます。
背景色の流れにあわせてフワーっと変化させたいためtransition: .3s;で、0.3秒かけて色が変化する指定をしています。
ホバーした後のカラーは白に指定しています。
.my-contact-btn2:hover span{
color: white;
}背景が流れるアニメーション（ホバー前, 「終了→開始」の方向）
最後は一番肝となる背景が流れるアニメーションの設定です。
まずは事前準備としてホバー前の状態の背景を疑似要素で作成します。
/*ボタン上のアニメーションの設定*/
.my-btn-animation2:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: red;
width: 100%;
height: 100%;
transform: scale(0, 1); /* ←ポイント */
transition: transform .3s linear; /* ←ポイント */
transform-origin: right; /* ←ポイント */
}
z-index: 2;
1つ目のポイントはz-indexです。先ほどリンクテキストのzindexを２にすることで、大本のボタン要素（aタグ）の上、かつ、リンクテキスト（spanタグ）の下に来るようにしています。
transform: scale(0, 1);
次のポイントはtransformです。transformは形状を変形することができる便利なプロパティで、ホバーなどの動きとあわせてよく使われます。
transform: scale(0, 1);と設定することで、x軸方向の長さは0、y軸方向は100%（元の要素のまま）となります。
x軸方向の長さが0ということはつまり、存在しているけど見えない状態ということです。
transition
続いて、ホバーしたときにアニメーションをさせるためにtransition: transform .3s linear; を記述しています。
これは、transformプロパティを0.3秒かけてアニメーションする。その際の、動きはlinear（直線的な動き）にするという指定です。
transform-origin
次のポイントはtransform-originプロパティの設定です。ホバーで背景を流すときに流す向きを決める重要なプロパティです。
ここでは、transform-origin: left;とすることで、開始位置が左側になります。
ここで重要なポイントはホバー前の要素とホバー後の要素の両方にtransform-originを設定した場合、挙動が異なるということです。
ホバー後の要素にもtransform-originを設定した場合、ホバー前の要素にしたtransform-originは「終了→開始」時の指定になります。
つまり、ホバーした後にもとに戻る挙動が左から右（指定がない時の逆）になるということです。
ホバー後の状態（「開始→終了」の動き）
最後に、ホバーしたときの状態を記述します。
.my-btn-animation2:hover:before{
transform: scale(1, 1); /* ←ポイント */
}疑似要素にホバーを掛けるときは、セレクタ:hover:beforeの順番で記述します。これがかなり重要で、:hoverと:beforeを逆にして、セレクタ:before:hoverとすると動きません。
scale(1, 1)
ホバーしたときの疑似要素の状態をtransform: scale(1, 1);とすることで、x軸方向とy軸方向の大きさがどちらも100%（1倍）となります。
ホバー前はscale(0, 1)で見えていなかった背景が見えるようになります。
transform-origin
ホバー前の要素に加えて、ホバー後の要素にも「transform-origin」を指定しています。こうすることで、「開始→終了」時のtransformの動く方向を指定することができます。
ここでは、transform-origin: right;とすることで、アニメーションが右から始まります。つまり、背景が右から左に流れます。
コードの解説は以上です。
一方向に動く（右から左）
コード全容
ボタンの動きの中でよく見かけるのは行って戻るものが多いですが、ホバーすると左から右に背景が覆われて、ホバーを解除すると同じく左から右に動くアニメーションも作成することができます。
このコードは以下のようになっています。
<a href="#" class="my-contact-btn my-btn-animation"><span>CONTACT</span></a>.my-contact-btn{
display: inline-block;
background: black;
width: 100px;
text-decoration: none;
padding: 10px 30px;
text-align: center;
position: relative; /* ←ポイント */
}
/*ボタン内のテキストを疑似要素の上にもってくる*/
.my-contact-btn span {
color: #fff;
position: relative; /* ←ポイント */
z-index: 2; /* ←ポイント */
transition: .3s; /* ←ポイント */
}
.my-contact-btn:hover span{
color: gray;
}
/*ボタン上のアニメーションの設定*/
.my-btn-animation:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: #ccc;
width: 100%;
height: 100%;
transform: scale(0, 1); /* ←ポイント */
transition: transform .3s linear; /* ←ポイント */
transform-origin: left; /* ←ポイント */
}
.my-btn-animation:hover:before{
transform: scale(1, 1); /* ←ポイント */
transform-origin: right; /* ←ポイント */
}これは基本的に一番最初に解説したコードと同じです（背景色や文字色を変えているぐらいです）。
一番大きな違い（ポイント）はホバー前とホバー後の両方の要素にtransform-originプロパティを設定していることです。
ホバー前の疑似要素
/*ボタン上のアニメーションの設定*/
.my-btn-animation:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2; /* ←ポイント */
background: #ccc;
width: 100%;
height: 100%;
transform: scale(0, 1); /* ←ポイント */
transition: transform .3s linear; /* ←ポイント */
transform-origin: left; /* ←ポイント */
}
ホバー前の疑似要素にtransform-origin: left;をつけています。
ホバー時（:hover）の要素にもtransform-originがある場合、ホバー前の要素に設定したものは、アニメーションの「終了→開始」の戻る動きのみに適用されます。
transform-origin: left;が指定してある場合、通常であれば、「開始→終了」は「左→右」、「終了→開始」は「右→左」となります。
ですが、ここではホバー時の疑似要素に別のtransform-originが設定してあるため、「終了→開始」は「右→左」のみが適用されます。
ホバー時の疑似要素
.my-btn-animation:hover:before{
transform: scale(1, 1); /* ←ポイント */
transform-origin: right; /* ←ポイント */
}
ホバー時の疑似要素にもtransform-origin: right;をつけています。
ホバー時疑似要素に設定したtransform-originはアニメーションの「開始→終了」に適用となるため、ホバーしたときは右（right）から動く動きになります。
真ん中から変化する
transform-originを指定しない場合は真ん中から変化します。
<a href="#" class="my-contact-btn3 my-btn-animation3"><span>CONTACT</span></a>.my-contact-btn3{
display: inline-block;
background: seagreen;
width: 100px;
text-decoration: none;
padding: 10px 30px;
text-align: center;
position: relative; /* ←ポイント */
}
/*ボタン内のテキストを疑似要素の上にもってくる*/
.my-contact-btn3 span {
color: #eee;
position: relative; /* ←ポイント */
z-index: 3; /* ←ポイント */
transition: .3s; /* ←ポイント */
}
.my-contact-btn3:hover span{
color: white;
}
/*ボタン上のアニメーションの設定*/
.my-btn-animation3:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: gold;
width: 100%;
height: 100%;
transform: scale(0, 1); /* ←ポイント */
transition: transform .3s linear; /* ←ポイント */
}
.my-btn-animation3:hover:before{
transform: scale(1, 1); /* ←ポイント */
}斜めに動く
疑似要素のデフォルトの状態を scale(0, 0)として、ホバー時にscale(1, 1)に拡大するように指定します。
このときに、アニメーションが左上から右下に向かうようにtransform-originを設定すれば斜めの動きになります。
<a href="#" class="my-contact-btn4 my-btn-animation4"><span>CONTACT</span></a>.my-contact-btn4{
display: inline-block;
background: darkslateblue;
width: 100px;
text-decoration: none;
padding: 10px 30px;
text-align: center;
position: relative; /* ←ポイント */
}
/*ボタン内のテキストを疑似要素の上にもってくる*/
.my-contact-btn4 span {
color: #eee;
position: relative; /* ←ポイント */
z-index: 3; /* ←ポイント */
transition: .3s; /* ←ポイント */
}
.my-contact-btn4:hover span{
color: black;
}
/*ボタン上のアニメーションの設定*/
.my-btn-animation4:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: hotpink;
width: 100%;
height: 100%;
transform: scale(0, 0); /* ←ポイント */
transition: transform .3s linear; /* ←ポイント */
transform-origin: bottom right; /* ←ポイント */
}
.my-btn-animation4:hover:before{
transform: scale(1, 1); /* ←ポイント */
transform-origin: top left;
}上から下に動く
transformでホバー前の状態をscale(1, 0)にすると、x軸方向は背景があるが、y軸方向は見えていない状態になります。
この状態でホバー時にscale(1, 1)にすると、y軸方向のアニメーションを設定することができます。
<a href="#" class="my-contact-btn5 my-btn-animation5"><span>CONTACT</span></a>.my-contact-btn5{
display: inline-block;
background: teal;
width: 100px;
text-decoration: none;
padding: 10px 30px;
text-align: center;
position: relative; /* ←ポイント */
}
/*ボタン内のテキストを疑似要素の上にもってくる*/
.my-contact-btn5 span {
color: #eee;
position: relative; /* ←ポイント */
z-index: 3; /* ←ポイント */
transition: .3s; /* ←ポイント */
}
.my-contact-btn5:hover span{
color: black;
}
/*ボタン上のアニメーションの設定*/
.my-btn-animation5:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: lightcyan;
width: 100%;
height: 100%;
transform: scale(1, 0); /* ←ポイント */
transition: transform .3s linear; /* ←ポイント */
transform-origin: bottom; /* ←ポイント */
}
.my-btn-animation5:hover:before{
transform: scale(1, 1); /* ←ポイント */
transform-origin: top;
}