CSSで作るホバーエフェクト20選（ボタン・カード）

2026.04.03

ホバーエフェクトは、ユーザー体験を向上させる重要なUI要素です。
特にボタンやカードに動きを加えることで、直感的で魅力的なデザインを実現できます。

この記事では、コピペOKで使えるホバーエフェクトを20種類紹介します。

ボタンホバーエフェクト10選

① シンプルフェード

CSS

.btn {
  color: #fff;
  background: #333;
  padding: 0.5em 1em;
  transition: .3s;
}

.btn:hover {
  background: #555;
}

.btn {
  color: #fff;
  background: #333;
  padding: 0.5em 1em;
  transition: .3s;
}

.btn:hover {
  background: #555;
}

シンプルフェード

② スライド背景

CSS

.btn {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #000;
  padding: 0.5em 1em;
  z-index: 1;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0af;
  z-index: -1;
  transform: translateX(-100%);
  transition: .3s;
}

.btn:hover::before {
  transform: translateX(0);
}

.btn {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #000;
  padding: 0.5em 1em;
  z-index: 1;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0af;
  z-index: -1;
  transform: translateX(-100%);
  transition: .3s;
}

.btn:hover::before {
  transform: translateX(0);
}

スライド背景

③ ボーダーアニメーション

CSS

.btn {
  border: 2px solid #333;
  padding: 0.5em 1em;
  transition: .3s;
}

.btn:hover {
  color: #fff;
  background: #333;
}

.btn {
  border: 2px solid #333;
  padding: 0.5em 1em;
  transition: .3s;
}

.btn:hover {
  color: #fff;
  background: #333;
}

ボーダーアニメーション

④ 拡大エフェクト

CSS

.btn {
  color: #fff;
  background: #333;
  padding: 0.5em 1em;
  transition: transform .3s;
}

.btn:hover {
  transform: scale(1.1);
}

.btn {
  color: #fff;
  background: #333;
  padding: 0.5em 1em;
  transition: transform .3s;
}

.btn:hover {
  transform: scale(1.1);
}

拡大エフェクト

⑤ 下線スライド

CSS

.btn {
  position: relative;
  color: #fff;
  background: #333;
  padding: 0.5em 1em;
}

.btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #2CB1DC;
  transition: .3s;
}

.btn:hover::after {
  width: 100%;
}

.btn {
  position: relative;
  color: #fff;
  background: #333;
  padding: 0.5em 1em;
}

.btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #2CB1DC;
  transition: .3s;
}

.btn:hover::after {
  width: 100%;
}

下線スライド

⑥ グラデーション変化

CSS

.btn {
  color: #fff;
  background: linear-gradient(45deg, #f00, #00f);
  padding: 0.5em 1em;
}

.btn:hover {
  background: linear-gradient(45deg, #00f, #f00);
}

.btn {
  color: #fff;
  background: linear-gradient(45deg, #f00, #00f);
  padding: 0.5em 1em;
}

.btn:hover {
  background: linear-gradient(45deg, #00f, #f00);
}

グラデーション変化

⑦ シャドウ浮き上がり

CSS

.btn {
  color: #fff;
  background: #333;
  padding: 0.5em 1em;
  box-shadow: 0 5px 0 #222;
  transition: .2s;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, .3);
}

.btn {
  color: #fff;
  background: #333;
  padding: 0.5em 1em;
  box-shadow: 0 5px 0 #222;
  transition: .2s;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, .3);
}

シャドウ浮き上がり

⑧ 波紋風エフェクト

CSS

.btn {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #333;
  padding: 0.5em 1em;
}

.btn::after {
  content: "";
  position: absolute;
  width: 50%;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, .3);
  border-radius: 50%;
  transform: scale(0);
  transition: .4s;
}

.btn:hover::after {
  transform: scale(3);
}

.btn {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #333;
  padding: 0.5em 1em;
}

.btn::after {
  content: "";
  position: absolute;
  width: 50%;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, .3);
  border-radius: 50%;
  transform: scale(0);
  transition: .4s;
}

.btn:hover::after {
  transform: scale(3);
}

波紋風エフェクト

⑨ 文字カラー反転

CSS

.btn {
  color: #fff;
  background: #000;
  border: 1px solid #000;
  padding: 0.5em 1em;
  transition: .3s;
}

.btn:hover {
  color: #000;
  background: #fff;
}

.btn {
  color: #fff;
  background: #000;
  border: 1px solid #000;
  padding: 0.5em 1em;
  transition: .3s;
}

.btn:hover {
  color: #000;
  background: #fff;
}

文字カラー反転

⑩ 斜めスライド背景

CSS

.btn {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #000;
  padding: 0.5em 1em;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff9900;
  transform: skewX(-45deg) translateX(-150%);
  transition: .4s;
}

.btn:hover::before {
  transform: skewX(-45deg) translateX(150%);
}

.btn {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #000;
  padding: 0.5em 1em;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff9900;
  transform: skewX(-45deg) translateX(-150%);
  transition: .4s;
}

.btn:hover::before {
  transform: skewX(-45deg) translateX(150%);
}

斜めスライド背景

カードホバーエフェクト10選

① 画像ズーム

CSS

.card img {
  transition: transform .4s;
}

.card:hover img {
  transform: scale(1.1);
}

.card img {
  transition: transform .4s;
}

.card:hover img {
  transform: scale(1.1);
}

② オーバーレイ表示

CSS

.card {
  position: relative;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: .3s;
}

.card:hover::after {
  opacity: 1;
}

.card {
  position: relative;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: .3s;
}

.card:hover::after {
  opacity: 1;
}

③ テキストスライド

CSS

.card {
  position: relative;
}

.card-text {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform: translateY(100%);
  transition: .3s;
  color: #fff;
  white-space: nowrap;
}

.card:hover .card-text {
  transform: translateY(0);
}

.card {
  position: relative;
}

.card-text {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform: translateY(100%);
  transition: .3s;
  color: #fff;
  white-space: nowrap;
}

.card:hover .card-text {
  transform: translateY(0);
}

テキストスライド

④ 影強調

CSS

.card {
  transition: box-shadow .3s;
}

.card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

.card {
  transition: box-shadow .3s;
}

.card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

⑤ 回転エフェクト

CSS

.card:hover {
  transform: rotate(2deg);
}

.card:hover {
  transform: rotate(2deg);
}

⑥ ブラー演出

CSS

.card:hover img {
  filter: blur(3px);
}

.card:hover img {
  filter: blur(3px);
}

⑦ カラーオーバーレイ

CSS

.card {
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff0000;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: .3s;
}

.card:hover::before {
  opacity: 1;
}

.card {
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff0000;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: .3s;
}

.card:hover::before {
  opacity: 1;
}

⑧ 枠線アニメーション

CSS

.card {
  border: 2px solid transparent;
  transition: .3s;
}

.card:hover {
  border-color: #333;
}

.card {
  border: 2px solid transparent;
  transition: .3s;
}

.card:hover {
  border-color: #333;
}

⑨ グレースケール解除

CSS

.card img {
  filter: grayscale(100%);
  transition: .3s;
}

.card:hover img {
  filter: grayscale(0);
}

.card img {
  filter: grayscale(100%);
  transition: .3s;
}

.card:hover img {
  filter: grayscale(0);
}

⑩ 浮遊エフェクト

CSS

.card {
  transition: transform .3s;
}

.card:hover {
  transform: translateY(-10px);
}

.card {
  transition: transform .3s;
}

.card:hover {
  transform: translateY(-10px);
}

アクセシビリティ配慮

CSS

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

動きが苦手なユーザーへの配慮も重要です。

まとめ

ホバーエフェクトでUXが向上する
シンプルな動きでも印象は大きく変わる
使いすぎず、目的に応じて使うのが重要

Altieのワンポイント

Altie：「動きをつけすぎると逆に使いづらくなるよ！“気持ちいい動き”を意識しよう！」