CSSで実装するボタンのホバーエフェクトまとめ
CSSで作成したボタンにカーソルをマウスオーバーした際に、色が変わる、大きさが変わるなど様々な効果を付けるホバーエフェクトのサンプルをまとめてみました。
色を変える
ホバーするとボタンの背景色が変わるエフェクトです。
<a href="#">SAMPLE</a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
border-radius: 6px;
transition: .3s;
}
a:hover {
background: #13c3ac;
}transitionを設定することで、色の変化にわずかにじんわりとした動きをつけています。
透過する
ホバーすると、ボタン全体が透過するエフェクトです。
<a href="#">SAMPLE</a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
border-radius: 6px;
transition: .3s;
}
a:hover {
opacity: 0.6;
}opacityを設定することで背景を透過しています。
背景が下から上に変化
ホバーすると、ボタンの背景が上から下にスライドするように変化するエフェクトです。
<a href="#">SAMPLE</a>a {
color: #333;
font-size: 16px;
font-weight: bold;
background: transparent;
padding: 18px 30px;
border: 3px solid #333;
border-radius: 6px;
position: relative;
z-index: 1;
transition: .3s;
}
a::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #333;
transform-origin: 50% 0%;
transform: scaleY(0);
transition: transform ease .3s;
}
a:hover {
color: #fff;
}
a:hover::before {
transform-origin: 50% 100%;
transform: scaleY(1);
}擬似要素beforeで作成した背景を、transformの値を「scaleY(0)」と設定することで非表示にしておき、ホバー時に「scaleY(1)」とすることで背景を変形させています。
transform-originは背景が変形する際の原点となる位置をそれぞれ指定しています。伸ばした背景をそのまま下に戻したい場合は、a::beforeのtransform-originの値を「50% 100%」と設定します。
背景が左から右に変化
<a href="#">SAMPLE</a>a {
color: #333;
font-size: 16px;
font-weight: bold;
background: transparent;
padding: 18px 30px;
border: 3px solid #333;
border-radius: 6px;
position: relative;
z-index: 1;
transition: .3s;
}
a::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #333;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform ease .3s;
}
a:hover {
color: #fff;
}
a:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}上記と同様に擬似要素beforeで作成した背景を、今度はtransformの値を「scaleX(0)」と設定することで、横方向に変形させています。
伸ばした背景をそのまま左方向に戻したい場合は、a::beforeのtransform-originの値を「0% 50%」と設定します。
背景が斜めに変化
<a href="#">SAMPLE</a>a {
color: #333;
font-size: 16px;
font-weight: bold;
background: transparent;
width: 130px;
height: 60px;
text-align: center;
line-height: 60px;
border: 2px solid #333;
position: relative;
z-index: 1;
display: block;
overflow: hidden;
transition: .3s;
}
a::before {
content: "";
width: 100%;
position: absolute;
top: 0;
right: -60px;
z-index: -1;
border-right: 60px solid transparent;
border-bottom: 60px solid #333;
transform: translateX(-100%);
transition: transform ease .3s;
}
a:hover {
color: #fff;
}
a:hover::before {
transform: translateX(0);
}ボタンの高さをheightで設定し、同じ大きさの一辺が斜めになった背景を擬似要素beforeで作成しています。
ボタンの背景からはみ出る部分を、overflowに「hidden」を設定して非表示にしておき、transformの「translateX」の値を変化することで斜めになった背景をスライドさせています。
背景が中央へ斜めに変化
<a href="#">SAMPLE</a>a {
color: #333;
font-size: 16px;
font-weight: bold;
background: transparent;
width: 130px;
height: 60px;
text-align: center;
line-height: 60px;
border: 2px solid #333;
position: relative;
z-index: 1;
display: block;
overflow: hidden;
transition: .3s;
}
a::before,
a::after {
content: "";
width: 100%;
position: absolute;
top: 0;
z-index: -1;
transition: transform ease .3s;
}
a::before {
right: -60px;
border-right: 60px solid transparent;
border-bottom: 60px solid #333;
transform: translateX(-100%);
}
a::after {
left: -60px;
border-left: 60px solid transparent;
border-top: 60px solid #333;
transform: translateX(100%);
}
a:hover {
color: #fff;
}
a:hover::before {
transform: translateX(-49%);
}
a:hover::after {
transform: translateX(49%);
}擬似要素beforeとafterで作成した斜めの背景を、transformで左右からボタンの中央へスライドさせています。
背景の斜めの部分はborderを利用しています。線の太さを調整することで、斜めの角度を変更できます。
中央へスライドするためのtransformの値が、ぴったり「50%」の場合、わずかに境目が見えるため、「translateX(-49%)」「translateX(49%)」で中央よりわずかに進めることで隙間を消しています。
丸い背景を左から右へ
<a href="#">SAMPLE</a>a {
color: #333;
font-size: 16px;
font-weight: bold;
background: transparent;
width: 130px;
height: 60px;
text-align: center;
line-height: 60px;
border: 2px solid #333;
position: relative;
z-index: 1;
display: block;
overflow: hidden;
transition: .3s;
}
a::before {
content: "";
width: 120%;
height: 200%;
position: absolute;
top: -50%;
right: 0;
z-index: -1;
background: #333;
border-radius: 0 100% 100% 0;
transform: translateX(-100%);
transition: transform ease .3s;
}
a:hover {
color: #fff;
}
a:hover::before {
transform: translateX(10%);
}背景の擬似要素beforeに、border-radiusで円を作成してスライドさせています。
大きくなる
ホバーするとボタンが大きくなるエフェクトです。
<a href="#">SAMPLE</a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
border-radius: 6px;
display: inline-block;
transition: .3s;
}
a:hover {
transform: scale(1.1);
}transformに「scale」を設定することで、ボタンのサイズを変えています。「1.1」のように「1」以上の数値で大きくなり、「0.9」のように下回ることでボタンは小さくなります。
斜めになる
ホバーするとボタンが斜めに傾くエフェクトです。
<a href="#">SAMPLE</a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
border-radius: 6px;
display: inline-block;
transition: .3s;
}
a:hover {
transform: rotate(-10deg);
}transformに「rotate」を設定することで、ボタンの角度を変えています。
角丸になる
ホバーするとボタンの角が直角から角丸に変化するエフェクトです。
<a href="#">SAMPLE</a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
display: inline-block;
transition: .3s;
}
a:hover {
border-radius: 12px;
}border-radiusで角丸の大きさを設定しています。
外側から枠線をつける
<a href="#">SAMPLE</a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
border-radius: 6px;
position: relative;
z-index: 1;
display: inline-block;
transition: .3s;
}
a::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 3px solid #333;
border-radius: 6px;
box-sizing: border-box;
z-index: -1;
transform: scale(1.2);
opacity: 0;
transition: transform ease .3s, opacity .3s;
}
a:hover {
color: #333;
background: transparent;
}
a:hover::before {
transform: scale(1);
opacity: 1;
}擬似要素beforeにtransformの「scale」で大きめの枠線を作っておき、ホバー時にopacityとtransformの値を変更することで表示させています。ホバー時には、ボタンの背景と文字の色も合わせて変更しています。
transformの値を「scale(0.8)」のように、「1」よりも小さく設定した場合、内側から枠線が広がるようなエフェクトになります。
内側へ枠線をつける
<a href="#">SAMPLE</a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: transparent;
padding: 18px 30px;
border: 3px solid #333;
box-sizing: border-box;
border-radius: 6px;
position: relative;
z-index: 1;
display: inline-block;
transition: .3s;
}
a::before,
a::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 6px;
}
a::before {
background: #333;
z-index: -1;
transition: transform ease .3s, opacity .3s;
}
a::after {
border: 3px solid #333;
box-sizing: border-box;
}
a:hover {
color: #333;
}
a:hover::before {
transform: scale(0);
opacity: 0;
}背景を透過したボタンに擬似要素afterで枠線を作成しておき、擬似要素beforeに設定した背景の大きさをopacityとtransformで変形させています。
浮かび上がる
ホバー時にボタンが上に浮かび、下に影が付くエフェクトです。
<a href="#">SAMPLE</a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
border-radius: 6px;
position: relative;
z-index: 1;
display: inline-block;
transition: .3s;
}
a::before {
content: "";
width: 90%;
height: 10px;
position: absolute;
top: 100%;
left: 5%;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
z-index: -1;
opacity: 0;
transition: .3s;
}
a:hover {
transform: translateY(-7px);
}
a:hover::before {
transform: translateY(7px);
opacity: 1;
}擬似要素beforeのbackgroundに「radial-gradient」で影を作っています。
ホバー時には、ボタンはtransformに「translateY」を設定して上に移動し、影はopacityで表示されるようにしています。また、影がボタンと一緒に浮かび上がらないように、その際にtransformの「translateY(7px)」を設定して、位置を維持するようにしています。
押されて下がる
立体的なボタンが下に押し込まれたようなエフェクトです。
<a href="#">SAMPLE</a>a {
color: #333;
font-size: 16px;
font-weight: bold;
background: #fff;
padding: 18px 30px;
border: 3px solid #333;
box-shadow: 0 5px 0 #333;
border-radius: 6px;
display: inline-block;
transition: .3s;
}
a:hover {
transform: translateY(5px);
box-shadow: 0 0 0 #333;
}box-shadowでボタンの立体となる影を作っています。
ホバー時は、transformの「translateY(5px)」でボタンを下に移動し、box-shadowを「0」まで縮めています。
鼓動する
ホバーすると鼓動するような動きを繰り返すエフェクトです。
<a href="#">SAMPLE</a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
border-radius: 6px;
display: inline-block;
transition: .3s;
}
a:hover {
animation: pulsation .7s alternate infinite;
}
@keyframes pulsation {
0% { transform: scale(1); }
50% { transform: scale(0.9); }
100% { transform: scale(1.1); }
}keyframesの「pulsation」に設定した、ボタンを拡大縮小する設定を、ホバー時にanimationで繰り返しています。
光を放つ
ホバーすると連続的に光を放つエフェクトです。
<a href="#">SAMPLE</a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
outline: 1px solid;
outline-color: #333;
outline-offset: 0px;
display: inline-block;
transition: .3s;
}
a::hover {
animation: light .8s infinite;
}
@keyframes light {
100% {
outline-color: transparent;
outline-offset: 12px;
}
}ボタンに設定したoutlineを変更することで、光が放たれるような効果を作っています。outlineは角丸には適応できません。角丸の場合は、擬似要素にborderを設定することで代用もできますが、ボタンの縦横比が異なる場合、均等に光を放つことができないという欠点もあります。
ちなみにanimationの「infinite」を「1」に変更すると、1回だけ光を放ちます。
文字が縦方向に回転
ホバーすると、ボタンの文字が縦方向に回転するエフェクトです。
<a href="#"><span>SAMPLE</span></a>a {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
border-radius: 6px;
display: inline-block;
}
a span {
display:inline-block;
transition: .5s;
}
a:hover span {
transform: rotateX(360deg);
}<span>タグで囲った文字を、transformの「rotateX(360deg)」で一回転させています。
3Dの回転
ホバーするとボタン全体が立体的に回転するエフェクトです。
<a href="#"><span data-text="SAMPLE">SAMPLE</span></a>a {
display: inline-block;
transition: .3s;
perspective: 1000px;
perspective-origin: 50% 50%;
vertical-align: bottom;
overflow: hidden;
}
a span {
color: #fff;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
display: inline-block;
position: relative;
transform-origin: 50% 0%;
transform-style: preserve-3d;
transition: .4s;
}
a span:after {
position: absolute;
left: 0;
top: 0;
content: attr(data-text);
padding: 18px 30px;
background-color: #32c3ac;
display: inline-block;
transform-origin: 50% 0%;
transform: translate3d(0, 100%, 0) rotateX(-90deg);
}
a:hover span {
transform: translate3d(0, 0, -60px) rotateX(90deg);
}<span>タグのdate属性に回転した際に下から表示されるテキストを設定しています。date属性は擬似要素afterのcontentで読み込んでいます。
ボタン全体を構成する<a>タグに、perspectiveで立体となるための奥行きを設定しています。
ボタンとして表示される<span>タグのtransform-styleに、「preserve-3d」を指定して、３Dで変形するように設定します。
擬似要素afterは、transformに「translate3d(0, 100%, 0)」を設定し、回転して見える底面に当たる部分を作成します。そのままでは、立体になった正面以外の部分（ここではホバー時に見えるようになる面）が見えてしまうので、「rotateX(-90deg)」を設定し、回転させて隠しておきます。
ホバー時に<sapn>をtransformの「rotateX(90deg)」で回転させ、after部分のテキストを表示させます。その際に、「translate3d(0, 0, -60px)」で奥行きがある奥行きのある立体的な回転になるように変形させています。
今回のサンプルでは、コードが長くなってしまうので、ベンダープレフィックスを省略しています。必要に応じて「-webkit-」、「-moz-」などを追加してください。
