ブログBLOG

【コピペでOK】CSSのホバーアニメーションまとめ（デモ・サンプルコード付き）

更新日：2024/04/01

ナビゲーションやボタンは、サイトを閲覧するときに必ず操作する要素ですよね。
ちょっとした要素に素敵なホバーアニメーションがついていると、細部へのこだわりが見えて、サイトの印象もよくなります。

また、ナビやボタンのホバー時のデザインはなく、コーダーにおまかせということもあります。
コーダーにおまかせしたらかっこよくないホバーをつけられてしまった…、
なんて言われないよう、素敵なホバーアニメーションをつけて、お客さまやディレクターさんの期待に応えましょう！

本記事では、イメージ通りのアニメーションを探しやすいように、シンプル・綺麗、ポップ、スタイリッシュ・かっこいい、かわいい・柔らかい　といった、イメージ別にホバーアニメーションをご紹介していきます。
デモ・サンプルコード付きですので、ご活用ください。

また、CSSアニメーションをまとめた記事もあります。
ぜひこちらもご覧いただき、サイトをリッチに演出してみてください！
イメージ別！サイトをリッチに見せるためのCSSアニメーションまとめ

サンプルを一覧で見れるデモサイトを用意しましたので、ご覧ください。
デモサイト

ベースのHTML・CSS

以下のHTML・CSSをベースに、ホバーアニメーションをつけていきます。
ボタン用・画像バナー用・テキスト用と分かれています。

また、サンプルコードにはベンダープレフィックスをつけませんので、必要に応じて適宜つけてください。


// ボタン
<div class="c-btn">button</div>

// 画像バナー
<div class="c-bnr"></div>

// テキスト
<p class="c-txt">ホバーしてください</p>

// ボタン

<div class="c-btn">button</div>

// 画像バナー

// テキスト

<p class="c-txt">ホバーしてください</p>


.c-btn,
.c-bnr,
.c-txt {
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

// ボタン基本コード
.c-btn {
  background: #ff701e;
  border: 2px solid #ff701e;
  border-radius: 60px;
  color: #fff;
  display: block;
  font-weight: bold;
  max-width: 300px;
  padding: 15px 40px;
  text-align: center;
}

// 画像バナー基本コード
.c-bnr {
  background: url(../img/btn-bnr.jpg)no-repeat center center / cover;
  display: inline-block;
  width: 240px;
  height: 240px;
}

// テキスト基本コード
.c-txt {
  color: #ff701e;
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.06em;
}

.c-btn,

.c-bnr,

.c-txt {

cursor: pointer;

transition: .2s cubic-bezier(0.45, 0, 0.55, 1);

}

// ボタン基本コード

.c-btn {

background: #ff701e;

border: 2px solid #ff701e;

border-radius: 60px;

color: #fff;

display: block;

font-weight: bold;

max-width: 300px;

padding: 15px 40px;

text-align: center;

}

// 画像バナー基本コード

.c-bnr {

background: url(../img/btn-bnr.jpg)no-repeat center center / cover;

display: inline-block;

width: 240px;

height: 240px;

}

// テキスト基本コード

.c-txt {

color: #ff701e;

display: inline-block;

font-size: 22px;

font-weight: bold;

letter-spacing: 0.06em;

}

シンプル・分かりやすい・綺麗

シンプルでスタンダードなホバーアニメーションを集めました。
組み合わせて使うと、より印象的になります。

ボタンの色が反転する

シンプルですが、見た目が大きく変わるため印象的なアニメーションです。


.c-btn.reverse:hover {
  background: #fff;
  color: #ff701e;
}

.c-btn.reverse:hover {

background: #fff;

color: #ff701e;

}

字間が広がる

おとなしい印象の綺麗なホバーアニメーションです。
アニメーションの秒数を長くし、ホバー時の字間を更に広げると、優しいイメージになります。
単体だとささやかなので、他のアニメーションと組み合わせてみるのもよいかと思います


.c-btn.letter-space:hover {
  letter-spacing: 0.15em;
}

.c-btn.letter-space:hover {

letter-spacing: 0.15em;

}

浮き上がる

下に沈んだり、ボックスシャドウで立体感を出すなどの工夫ができます。


.c-btn.float:hover {
  transform: translateY(-5px);
}

.c-btn.float:hover {

transform: translateY(-5px);

}

ズームイン[バナー]

バナーに囲み（.zoom-box）を追加し、.c-bnr.zoomを拡大させたときに画像がはみ出ないように、overflow: hidden; をかけています。


<div class="zoom-box"> // ← 囲みを一つ増やす
  <div class="c-bnr zoom"></div>
</div>

<div class="zoom-box"> // ← 囲みを一つ増やす

</div>


.zoom-box {
  display: inline-block;
  overflow: hidden;
}
.c-bnr.zoom {
  display: block;
  transition-duration: .5s;
}
.c-bnr.zoom:hover {
  transform: scale(1.2);
}

.zoom-box {

display: inline-block;

overflow: hidden;

}

.c-bnr.zoom {

display: block;

transition-duration: .5s;

}

.c-bnr.zoom:hover {

transform: scale(1.2);

}

色が付く+テキスト[バナー]

ホバーで「Read More」が出てくることによって、このボタンをクリックすると詳細が見られる、ということがわかりやすくなります。
「Read More」は疑似要素（::before）で表示させています。


.c-bnr.bg {
  position: relative;
  overflow: hidden;
}
.c-bnr.bg::before,
.c-bnr.bg::after {
  content: "";
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  margin: auto;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
  opacity: 0;
}
.c-bnr.bg::before {
  background: rgba(190,91,70,.6);
  width: 100%;
  height: 100%;
}
.c-bnr.bg::after {
  color: #fff;
  content: "Read More";
  font-size: 22px;
  font-weight: bold;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  bottom: 0;
  right: 0;
}

.c-bnr.bg:hover::before,
.c-bnr.bg:hover::after {
  opacity: 1;
}

.c-bnr.bg {

position: relative;

overflow: hidden;

}

.c-bnr.bg::before,

.c-bnr.bg::after {

content: "";

display: block;

position: absolute;

margin: auto;

top: 0;

left: 0;

margin: auto;

transition: .3s cubic-bezier(0.45, 0, 0.55, 1);

opacity: 0;

}

.c-bnr.bg::before {

background: rgba(190,91,70,.6);

width: 100%;

height: 100%;

}

.c-bnr.bg::after {

color: #fff;

content: "Read More";

font-size: 22px;

font-weight: bold;

display: flex;

text-align: center;

justify-content: center;

align-items: center;

bottom: 0;

right: 0;

}

.c-bnr.bg:hover::before,

.c-bnr.bg:hover::after {

opacity: 1;

}

ポップ・勢いがいい

ポップで元気のよい印象のホバーアニメーションを集めました。

押下

ホバーしたときに、少し立体的なボタンが凹んで、よりクリックできそうな雰囲気があります。


.c-btn.press {
  box-shadow: 0 4px 0 #d01a0a; // ボタンの影
}
.c-btn.press:hover {
  transform: translateY(4px);
  box-shadow: none;
}

.c-btn.press {

box-shadow: 0 4px 0 #d01a0a; // ボタンの影

}

.c-btn.press:hover {

transform: translateY(4px);

box-shadow: none;

}

スライド

左から背景色が流れてくる、勢いのよいホバーアニメーションです。
ホバー時の「transform-origin」を「right top」に設定することで、ホバーを離したときに背景色が右に帰っていくように設定できます。
他にも右から左、真ん中から、などカスタマイズできます。


.c-btn.slide {
  background: #fff;
  color: #ff701e;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.c-btn.slide::after {
  background: #ff701e;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.c-btn.slide:hover {
  color: #fff;
}
.c-btn.slide:hover::after {
  transform: scale(1, 1);
}

.c-btn.slide {

background: #fff;

color: #ff701e;

overflow: hidden;

position: relative;

z-index: 1;

}

.c-btn.slide::after {

background: #ff701e;

position: absolute;

top: 0;

left: 0;

content: '';

width: 100%;

height: 100%;

transform: scale(0, 1);

transform-origin: left top;

transition: .2s cubic-bezier(0.45, 0, 0.55, 1);

z-index: -1;

}

.c-btn.slide:hover {

color: #fff;

}

.c-btn.slide:hover::after {

transform: scale(1, 1);

}

スライド斜め

スライドのマイナーチェンジです（コードを流用しています）。
疑似要素（::after）で作った背景色を斜めに変形させて、左斜め上から背景色が下りてくるようにします。
heightは100%だと高さが足りないため、数値を増やしておきます。


.c-btn.slide.skew::after {
  transform: skewY(-10deg) scale(1, 0);
  height: 140px; // ボタンの高さによって調整
}
.c-btn.slide.skew:hover::after {
  transform: skewY(-10deg) scale(1, 1);
}

.c-btn.slide.skew::after {

transform: skewY(-10deg) scale(1, 0);

height: 140px; // ボタンの高さによって調整

}

.c-btn.slide.skew:hover::after {

transform: skewY(-10deg) scale(1, 1);

}

迫る

ホバーで拡大します。
シンプルですが、存在感のある元気な印象のホバー効果です。


.c-btn.big {
  transition-duration: .4s;
}
.c-btn.big:hover {
  transform: scale(1.1);
}

.c-btn.big {

transition-duration: .4s;

}

.c-btn.big:hover {

transform: scale(1.1);

}

スタイリッシュ・かっこいい・スピーディー

スタイリッシュでおしゃれな印象を与えるのにぴったりなホバーアニメーションです。

グラデーションが切り替わる

background-sizeの横幅を予め200%にしておき、ホバー時にbackground-positionを横に100%移動させることで、色がガラッと変えることができます。
グラデーションは色の変化がわかりやすいように、2色ではなく3色で設定するのがおすすめです。


.c-btn.grad {
  background: linear-gradient(90deg, rgba(255,112,30,1) 0%, rgba(255,191,48,1) 50%, rgba(255,77,48,1) 100%);
  background-size: 200% 100%;
  border: none;
}
.c-btn.grad:hover {
  background-position: 100% 0;
}

.c-btn.grad {

background: linear-gradient(90deg, rgba(255,112,30,1) 0%, rgba(255,191,48,1) 50%, rgba(255,77,48,1) 100%);

background-size: 200% 100%;

border: none;

}

.c-btn.grad:hover {

background-position: 100% 0;

}

ズレ

色の反転+薄い背景色がずれるアニメーションです。
「.c-btn.slip」にbackground-colorを設定すると重なり順をうまく設定できないため、黄色と薄黄色の背景色は疑似要素（::before、::after）で背景色を付けています。
囲みをひとつ増やす形でも再現できると思います。


.c-btn.slip {
  background: transparent;
  border: none;
  position: relative;
  border-radius: 0;
  z-index: 1;
}
.c-btn.slip::before,
.c-btn.slip::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.c-btn.slip::before {
  background: #ffb509;
  border: 2px solid #ffb509;
  z-index: -1;
}
.c-btn.slip::after {
  background: #fff6dc;
  z-index: -2;
}
.c-btn.slip:hover {
  color: #ffb509;
}
.c-btn.slip:hover::before {
  background: transparent;
}

.c-btn.slip:hover::after {
  top: 6px;
  left: 6px;
}

.c-btn.slip {

background: transparent;

border: none;

position: relative;

border-radius: 0;

z-index: 1;

}

.c-btn.slip::before,

.c-btn.slip::after {

content: "";

display: block;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

margin: auto;

transition: .2s cubic-bezier(0.45, 0, 0.55, 1);

}

.c-btn.slip::before {

background: #ffb509;

border: 2px solid #ffb509;

z-index: -1;

}

.c-btn.slip::after {

background: #fff6dc;

z-index: -2;

}

.c-btn.slip:hover {

color: #ffb509;

}

.c-btn.slip:hover::before {

background: transparent;

}

.c-btn.slip:hover::after {

top: 6px;

left: 6px;

}

縮小[バナー]

画像をホバーすると、縮小します。
transition-durationの値を大きくすると、綺麗な印象になります。


.c-bnr.scale:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.c-bnr.scale:hover {

box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);

transform: scale(0.9);

}

ラインが引かれる[テキスト]

ナビゲーションでよく使われるアニメーションです。左からラインが引かれて、マウスカーソルを離すと右に消えます。


.c-txt.line {
  padding-bottom: 5px;
  position: relative;
}
.c-txt.line::before {
  background: #ff701e;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.c-txt.line:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.c-txt.line {

padding-bottom: 5px;

position: relative;

}

.c-txt.line::before {

background: #ff701e;

content: '';

width: 100%;

height: 2px;

position: absolute;

left: 0;

bottom: 0;

margin: auto;

transform-origin: right top;

transform: scale(0, 1);

transition: transform .3s;

}

.c-txt.line:hover::before {

transform-origin: left top;

transform: scale(1, 1);

}

ラインが引かれる：センター[テキスト]

ラインが引かれるのマイナーチェンジです（コードを流用しています）。
transform-originの値を変えて、中央から線が広がるようにしました。


.c-txt.line.center::before {
  transform-origin: center top;
}

.c-txt.line.center::before {

transform-origin: center top;

}

マーカー[テキスト]

同じくナビゲーションや、テキストリンクに使えそうなアニメーションです。
こちらもサイトに合わせて、transform、transform-originの値を変えて、上から背景色が下りてくるようにするなど、方向を調整してみてください。


.c-txt.marker {
  position: relative;
  z-index: 1;
  padding: 0 10px;
}
.c-txt.marker::before {
  background: #ff701e;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
  z-index: -1;
}
.c-txt.marker:hover {
  color: #fff;
}
.c-txt.marker:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.c-txt.marker {

position: relative;

z-index: 1;

padding: 0 10px;

}

.c-txt.marker::before {

background: #ff701e;

content: "";

display: block;

width: 100%;

height: 100%;

position: absolute;

left: 0;

bottom: 0;

margin: auto;

transform: scale(0, 1);

transform-origin: right top;

transition: transform .3s;

z-index: -1;

}

.c-txt.marker:hover {

color: #fff;

}

.c-txt.marker:hover::before {

transform-origin: left top;

transform: scale(1, 1);

}

かわいい・柔らかい

柔らかい雰囲気のホバーアニメーションです。優しい感じを演出するときに役立ちます。

中央から背景色が変わる

ボタンの中央から円が広がっていきます。
円形の疑似要素（::after）を、opacity: 0;、transform: scale(0.1);で設置しておき、ホバーで表示させます。


.c-btn.circle {
  background: #fff;
  color: #ff701e;
  overflow: hidden;
  position: relative;
  transition-duration: .4s;
  z-index: 2;
}
.c-btn.circle::after {
  background: #ff701e;
  border-radius: 50%;
  content: "";
  display: block;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 100%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .5s, transform 0s;
  transition-delay: 0s, .4s;
}

.c-btn.circle:hover {
  color: #fff;
}
.c-btn.circle:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  transition-delay: 0s;
  transition: opacity .8s, transform .6s ease-in-out;
}

.c-btn.circle {

background: #fff;

color: #ff701e;

overflow: hidden;

position: relative;

transition-duration: .4s;

z-index: 2;

}

.c-btn.circle::after {

background: #ff701e;

border-radius: 50%;

content: "";

display: block;

margin: auto;

opacity: 0;

pointer-events: none;

position: absolute;

top: 50%;

left: 0;

right: 0;

width: 100%;

padding-top: 100%;

height: 0;

z-index: -1;

transform: translateY(-50%) scale(0.1);

transition: opacity .5s, transform 0s;

transition-delay: 0s, .4s;

}

.c-btn.circle:hover {

color: #fff;

}

.c-btn.circle:hover::after {

opacity: 1;

transform: translateY(-50%) scale(1.1);

transition-delay: 0s;

transition: opacity .8s, transform .6s ease-in-out;

}

ブラー[バナー]

filter: blur(3px);をかけるとフチがぼやけてしまうため、フチを隠すためにoverflow: hidden;をかけておきます。
今回は3pxぼかすので、top・left・right・bottomの値は、-3pxにします。ぼかすpx数に合わせて変更します。

※ IEではfilterが非対応のため、別のホバー効果を合わせて付けておくとよいです。
今回はホバー時にボックスシャドウを付けています。


.c-bnr.blur,
.c-bnr.blur::before {
  transition: .4s cubic-bezier(0.45, 0, 0.55, 1);
}
.c-bnr.blur {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.c-bnr.blur::before {
  background: inherit;
  content: "";
  display: block;
  filter: blur(3px);
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: -1;
  opacity: 0;
}
.c-bnr.blur:hover {
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}
.c-bnr.blur:hover::before {
  opacity: 1;
}

.c-bnr.blur,

.c-bnr.blur::before {

transition: .4s cubic-bezier(0.45, 0, 0.55, 1);

}

.c-bnr.blur {

position: relative;

z-index: 1;

overflow: hidden;

}

.c-bnr.blur::before {

background: inherit;

content: "";

display: block;

filter: blur(3px);

position: absolute;

top: -3px;

left: -3px;

right: -3px;

bottom: -3px;

z-index: -1;

opacity: 0;

}

.c-bnr.blur:hover {

box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);

}

.c-bnr.blur:hover::before {

opacity: 1;

}

ブラーのかけ方については、以下のページを参考にさせていただきました。
CSSで簡単ぼかし（ブラー）掛ける方法

丸くなる[バナー]

アニメーションの秒数を長めに設定し、ゆっくりと丸くなってふわっとしたシャドウが付きます。
正方形の画像限定にはなりますが、柔らかい雰囲気を演出できます。
※正方形の画像でない場合は正円になりませんが、border-radiusの数値を調整して可愛らしいアニメーションにできると思います。


.c-bnr.radius {
  border-radius: 6px;
  transition-duration: .5s;
}
.c-bnr.radius:hover {
  border-radius: 50%;
  box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
}

.c-bnr.radius {

border-radius: 6px;

transition-duration: .5s;

}

.c-bnr.radius:hover {

border-radius: 50%;

box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);

}

組み合わせ例

こちらではこれまでにご紹介したアニメーションを組み合わせた、より実用的なホバー効果を載せていきます。

【例01】反転 + 字間

シンプルな効果を組み合わせて、より目立つホバー効果になりました。
切り替えをゆっくりめに設定して、優しい雰囲気を出しています。


.c-btn.practice01 {
  transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
}
.c-btn.practice01:hover {
  background: #fff;
  color: #ff701e;
  letter-spacing: 0.15em;
}

.c-btn.practice01 {

transition: .4s cubic-bezier(0.37, 0, 0.63, 1);

}

.c-btn.practice01:hover {

background: #fff;

color: #ff701e;

letter-spacing: 0.15em;

}

【例02】反転 + 迫る

ボタンが大きくなって、色が反転します。
アニメーションの終わりに緩やかになるイージングをつけて、ボタンがぎゅっと迫ってくる感じになっています。


.c-btn.practice02 {
  transition: .3s cubic-bezier(0.5, 1, 0.89, 1);
}
.c-btn.practice02:hover {
  background: #fff;
  color: #ff701e;
  transform: scale(1.1);
}

.c-btn.practice02 {

transition: .3s cubic-bezier(0.5, 1, 0.89, 1);

}

.c-btn.practice02:hover {

background: #fff;

color: #ff701e;

transform: scale(1.1);

}

【例03】縮小 + 色がつく + テキスト + 字間[バナー]

画像が小さくなって、「Read More」のテキストが広がりながら表示されます。
小さくなる動作と広がる動作の、逆の動きが同時に起こって、スタイリッシュな印象です。


.c-bnr.practice03 {
  position: relative;
  transition: .6s cubic-bezier(0.33, 1, 0.68, 1);
}
.c-bnr.practice03::before,
.c-bnr.practice03::after {
  content: "";
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  margin: auto;
  transition: .6s cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 0;
}
.c-bnr.practice03::before {
  background: rgba(190,91,70,.6);
  width: 100%;
  height: 100%;
}
.c-bnr.practice03::after {
  color: #fff;
  content: "Read More";
  font-size: 22px;
  font-weight: bold;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  bottom: 0;
  right: 0;
}
.c-bnr.practice03:hover::before,
.c-bnr.practice03:hover::after {
  opacity: 1;
}
.c-bnr.practice03:hover::after {
  letter-spacing: 0.1em;
}
.c-bnr.practice03:hover {
  transform: scale(0.9);
}

.c-bnr.practice03 {

position: relative;

transition: .6s cubic-bezier(0.33, 1, 0.68, 1);

}

.c-bnr.practice03::before,

.c-bnr.practice03::after {

content: "";

display: block;

position: absolute;

margin: auto;

top: 0;

left: 0;

margin: auto;

transition: .6s cubic-bezier(0.33, 1, 0.68, 1);

opacity: 0;

}

.c-bnr.practice03::before {

background: rgba(190,91,70,.6);

width: 100%;

height: 100%;

}

.c-bnr.practice03::after {

color: #fff;

content: "Read More";

font-size: 22px;

font-weight: bold;

display: flex;

text-align: center;

justify-content: center;

align-items: center;

bottom: 0;

right: 0;

}

.c-bnr.practice03:hover::before,

.c-bnr.practice03:hover::after {

opacity: 1;

}

.c-bnr.practice03:hover::after {

letter-spacing: 0.1em;

}

.c-bnr.practice03:hover {

transform: scale(0.9);

}

【例04】ブラー + テキスト[バナー]

ブラーの効果のみですと綺麗ですがリンク感が薄く押しづらい印象なので、
「Read More」のテキストを表示させて、よりページ遷移できることがわかりやすくしました。
アニメーションが長くなってしまいますが、ブラー効果とテキスト表示のタイミングをずらすことで、少しリッチな感じがします。


.c-bnr.practice04,
.c-bnr.practice04::before,
.c-bnr.practice04::after {
  transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
.c-bnr.practice04 {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.c-bnr.practice04::before,
.c-bnr.practice04::after {
  display: block;
  opacity: 0;
  position: absolute;
}
.c-bnr.practice04::before {
  background: inherit;
  content: "";
  filter: blur(3px);
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: -1;
  transition-duration: 0.4s;
}
.c-bnr.practice04::after {
  color: #fff;
  content: "Read More";
  font-size: 22px;
  font-weight: bold;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition-duration: 0.2s;
}
.c-bnr.practice04:hover::after {
  transition-delay: .5s;
}
.c-bnr.practice04:hover::before,
.c-bnr.practice04:hover::after {
  opacity: 1;
}

.c-bnr.practice04,

.c-bnr.practice04::before,

.c-bnr.practice04::after {

transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);

}

.c-bnr.practice04 {

position: relative;

z-index: 1;

overflow: hidden;

}

.c-bnr.practice04::before,

.c-bnr.practice04::after {

display: block;

opacity: 0;

position: absolute;

}

.c-bnr.practice04::before {

background: inherit;

content: "";

filter: blur(3px);

top: -3px;

left: -3px;

right: -3px;

bottom: -3px;

z-index: -1;

transition-duration: 0.4s;

}

.c-bnr.practice04::after {

color: #fff;

content: "Read More";

font-size: 22px;

font-weight: bold;

display: flex;

text-align: center;

justify-content: center;

align-items: center;

margin: auto;

top: 0;

right: 0;

bottom: 0;

left: 0;

transition-duration: 0.2s;

}

.c-bnr.practice04:hover::after {

transition-delay: .5s;

}

.c-bnr.practice04:hover::before,

.c-bnr.practice04:hover::after {

opacity: 1;

}

【例05】丸くなる + 色がつく + テキスト[バナー]

こちらも「Read More」を表示させて、よりリンクであることをわかりやすくしています。
丸くなる効果と背景色がつく効果がゆっくりしているので、優しい印象があります。


.c-bnr.practice05 {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  transition-duration: .4s;
}
.c-bnr.practice05:hover {
  border-radius: 50%;
}
.c-bnr.practice05::before,
.c-bnr.practice05::after {
  content: "";
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  margin: auto;
  transition: .6s cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 0;
}
.c-bnr.practice05::before {
  background: rgba(190,91,70,.6);
  width: 100%;
  height: 100%;
  transition-duration: 0.8s;
}
.c-bnr.practice05::after {
  color: #fff;
  content: "Read More";
  font-size: 22px;
  font-weight: bold;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  bottom: 0;
  right: 0;
}
.c-bnr.practice05:hover::before,
.c-bnr.practice05:hover::after {
  opacity: 1;
}
.c-bnr.practice05:hover::after {
  transition-delay: 0.5s;
}

.c-bnr.practice05 {

border-radius: 6px;

overflow: hidden;

position: relative;

transition-duration: .4s;

}

.c-bnr.practice05:hover {

border-radius: 50%;

}

.c-bnr.practice05::before,

.c-bnr.practice05::after {

content: "";

display: block;

position: absolute;

margin: auto;

top: 0;

left: 0;

margin: auto;

transition: .6s cubic-bezier(0.33, 1, 0.68, 1);

opacity: 0;

}

.c-bnr.practice05::before {

background: rgba(190,91,70,.6);

width: 100%;

height: 100%;

transition-duration: 0.8s;

}

.c-bnr.practice05::after {

color: #fff;

content: "Read More";

font-size: 22px;

font-weight: bold;

display: flex;

text-align: center;

justify-content: center;

align-items: center;

bottom: 0;

right: 0;

}

.c-bnr.practice05:hover::before,

.c-bnr.practice05:hover::after {

opacity: 1;

}

.c-bnr.practice05:hover::after {

transition-delay: 0.5s;

}

最後に

イメージに合ったアニメーションは見つけられましたか？
サンプルは、よりイメージに近いものになるようにカスタマイズして使ってみてください。
アニメーションの方向や秒数、イージングの調整をしてみるとまた印象が違ってきます。
イージングは、こちらのイージング関数チートシートがとても見やすくて便利ですので、ぜひご覧ください。

ホバーアニメーションは目立つものではありませんが、ボタンやナビゲーションはサイトを閲覧する上で必ず操作すると言ってもいいほど重要な要素です。
細かなところにもこだわってコーディングし、魅力的なサイトを制作しましょう！
本記事がサイト制作のお役に立てれば幸いです。

WEB アニメーションコーディングサイト制作

一覧へ戻る

ブログBLOG

【コピペでOK】CSSのホバーアニメーションまとめ（デモ・サンプルコード付き）

ベースのHTML・CSS

シンプル・分かりやすい・綺麗

ボタンの色が反転する

字間が広がる

浮き上がる

ズームイン[バナー]

色が付く+テキスト[バナー]

ポップ・勢いがいい

押下

スライド

スライド斜め

迫る

スタイリッシュ・かっこいい・スピーディー

グラデーションが切り替わる

ズレ

縮小[バナー]

ラインが引かれる[テキスト]

ラインが引かれる：センター[テキスト]

マーカー[テキスト]

かわいい・柔らかい

中央から背景色が変わる

ブラー[バナー]

丸くなる[バナー]

組み合わせ例

【例01】反転 + 字間

【例02】反転 + 迫る

【例03】縮小 + 色がつく + テキスト + 字間[バナー]

【例04】ブラー + テキスト[バナー]

【例05】丸くなる + 色がつく + テキスト[バナー]

最後に

関連記事

Category

Search

Weekly Ranking

ブログBLOG

【コピペでOK】CSSのホバーアニメーションまとめ（デモ・サンプルコード付き）

ベースのHTML・CSS

シンプル・分かりやすい・綺麗

ボタンの色が反転する

字間が広がる

浮き上がる

ズームイン[バナー]

色が付く+テキスト[バナー]

ポップ・勢いがいい

押下

スライド

スライド 斜め

迫る

スタイリッシュ・かっこいい・スピーディー

グラデーションが切り替わる

ズレ

縮小[バナー]

ラインが引かれる[テキスト]

ラインが引かれる：センター[テキスト]

マーカー[テキスト]

かわいい・柔らかい

中央から背景色が変わる

ブラー[バナー]

丸くなる[バナー]

組み合わせ例

【例01】反転 + 字間

【例02】反転 + 迫る

【例03】縮小 + 色がつく + テキスト + 字間[バナー]

【例04】ブラー + テキスト[バナー]

【例05】丸くなる + 色がつく + テキスト[バナー]

最後に

関連記事

Category

Search

Weekly Ranking

スライド斜め