BLOG ブログ

ホームページ制作
BLOG
【コピペでOK】サイトを印象的に！ホバーアニメーションまとめ【デモ・サンプルコード付き】

【コピペでOK】サイトを印象的に！ホバーアニメーションまとめ【デモ・サンプルコード付き】

更新日：2022/05/18

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

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

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

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

1 ベースのHTML・CSS
2 シンプル・分かりやすい・綺麗
3 ポップ・勢いがいい
4 スタイリッシュ・かっこいい・スピーディー
5 かわいい・柔らかい
6 組み合わせ例
7 最後に

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

ベースの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 <

【コピペでOK】サイトを印象的に！ホバーアニメーションまとめ【デモ・サンプルコード付き】

ベースのHTML・CSS

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

ボタンの色が反転する

字間が広がる

浮き上がる

ズームイン[バナー]

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

ポップ・勢いがいい

押下

スライド

スライド 斜め

迫る

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

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

ズレ

縮小[バナー]

スライド斜め