【コピペOK】ボタンのエフェクトどうする？CSSだけでできるボタンホバーのアイデア集

2025年7月30日2025年8月1日

サンプルコード集

「ボタンのホバーエフェクト、何にしよう…」

そんなときにサッと使えるCSSボタンエフェクトをまとめました。

すべてコピペで使えるように、HTML＋CSSコード付きで掲載しています。サイズや色など、表現に合わせて適時CSSを変更してご利用ください。

スマホやタブレットの場合はhoverが正常に機能しません。正しい動作でご覧いただくためにPCからの閲覧を推奨いたします。

ボタンホバーエフェクト集
ボタンタグの配置の仕方
まとめ

ボタンホバーエフェクト集

シンプル・王道系

シンプルがゆえに視認性が高く、多くの人にとって分かりやすいホバーエフェクトです。

「洗練されている」「誠実」「クセがない」「控えめだけど丁寧」などのイメージで、安心感や信頼感を与えます。

コーポレートサイト・採用サイトなど信頼性が重視される場面
問い合わせ・送信ボタンなど、UIの邪魔をしたくないとき
どんなデザインにも合わせやすく、迷ったときの基本形として◎

色が薄くなる

<a class="c-btn__hover-lighter">
  <span>色が薄くなる</span>
</a>

.c-btn__hover-lighter {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 15rem;
  height: 5rem;
  background-color: #00abae;
  border: 1px solid #00abae;
  font-size: inherit;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;

  span {
    z-index: 1;
    color: #ffffff;
    transition: all 0.3s;
  }
}

.c-btn__hover-lighter:hover {
  background-color: #ffffff;

  span {
    color: #00abae;
  }
}

色が濃くなる

<a class="c-btn__hover-darker">
  <span>色が濃くなる</span>
</a>

.c-btn__hover-darker {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 15rem;
  height: 5rem;
  background-color: #ffffff;
  border: 1px solid #00abae;
  font-size: inherit;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;

  span {
    z-index: 1;
    color: #00abae;
    transition: all 0.3s;
  }
}

.c-btn__hover-darker:hover {
  background-color: #00abae;

  span {
    color: #ffffff;
  }
}

左からスライド

<a class="c-btn__from-left">
  <span>左からスライド</span>
</a>

.c-btn__from-left {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 15rem;
  height: 5rem;
  background-color: #00abae;
  border: 1px solid #00abae;
  font-size: inherit;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  position: relative;

  span {
    z-index: 1;
    color: #ffffff;
    transition: all 0.6s;
  }
}

.c-btn__from-left::before {
  content: "";
  position: absolute;
  background-color: #ffffff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(0, 1);
  transform-origin: left;
  transition: all 0.6s;
}

.c-btn__from-left:hover {
  span {
    color: #00abae;
  }
}

.c-btn__from-left:hover::before {
  transform: scale(1, 1);
}

上からスライド

<a class="c-btn__from-top">
  <span>上からスライド</span>
</a>

.c-btn__from-top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 15rem;
  height: 5rem;
  background-color: #00abae;
  border: 1px solid #00abae;
  font-size: inherit;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  position: relative;

  span {
    z-index: 1;
    color: #ffffff;
    transition: all 0.6s;
  }
}

.c-btn__from-top::before {
  content: "";
  position: absolute;
  background-color: #ffffff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(1, 0);
  transform-origin: top;
  transition: all 0.6s;
}

.c-btn__from-top:hover {
  span {
    color: #00abae;
  }
}

.c-btn__from-top:hover::before {
  transform: scale(1, 1);
}

ポップ・アクティブ系

動きが直感的で分かりやすく、ユーザーの注意を引きやすいホバーエフェクトです。

「元気」「親しみやすい」「楽しい」「フレンドリー」といった印象を与え、ユーザーに「押したくなる」気持ちよさを演出します。

キャンペーンページやサービスサイトなど、勢いや明るさを出したい場面
購入・予約ボタンなど、目立たせてアクションを促したい導線
子ども向け・若年層向けなど、親しみやすさが求められるデザイン

作成中です！

アニメーション・動きが印象的系

動きに工夫があることで、デザインにセンスやテクニックを感じさせるホバーエフェクトです。

「スタイリッシュ」「洗練されている」「遊び心がある」「技術的にこなれている」といった印象を与え、見る人の記憶に残りやすくなります。

ポートフォリオサイトや制作実績紹介など、センスを見せたい場面
ブランドサイトやスタートアップなど、トレンド感を打ち出したいとき
他と差別化したボタンデザインを使いたいとき

ななめにスライド

<a class="c-btn__diagonal-slide">
  <span>ななめにスライド</span>
</a>

.c-btn__diagonal-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 15rem;
  height: 5rem;
  background-color: #00abae;
  border: 1px solid #00abae;
  font-size: inherit;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  position: relative;

  span {
    z-index: 1;
    color: #ffffff;
    transition: all 0.6s;
  }
}

.c-btn__diagonal-slide::before {
  content: "";
  position: absolute;
  background-color: #ffffff;
  top: -2rem;
  left: -1rem;
  width: 100%;
  height: 100%;
  transform: rotate(10deg) scale(0, 1.8);
  transform-origin: left;
  transition: all 0.6s;
}

.c-btn__diagonal-slide:hover {
  span {
    color: #00abae;
  }
}

.c-btn__diagonal-slide:hover::before {
  transform: rotate(10deg) scale(1.1, 1.8);
}

パカっと開く

<a class="c-btn__from-center">
  <span>パカっと開く</span>
</a>

.c-btn__from-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 15rem;
  height: 5rem;
  background-color: #00abae;
  border: 1px solid #00abae;
  font-size: inherit;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  position: relative;

  span {
    z-index: 1;
    color: #ffffff;
    transition: all 0.6s ease-out;
  }
}

.c-btn__from-center::before {
  content: "";
  position: absolute;
  background-color: #ffffff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(0, 1);
  transition: all 0.6s;
}

.c-btn__from-center:hover {
  span {
    color: #00abae;
  }
}

.c-btn__from-center:hover::before {
  transform: scale(1, 1);
}

円形に開く

<a class="c-btn__like-circle">
  <span>円形に開く</span>
</a>

.c-btn__like-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 15rem;
  height: 5rem;
  background-color: #00abae;
  border: 1px solid #00abae;
  font-size: inherit;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  position: relative;

  span {
    z-index: 1;
    color: #ffffff;
    transition: all 0.6s;
  }
}

.c-btn__like-circle::before {
  content: "";
  position: absolute;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0);
  transition: all 0.6s;
}

.c-btn__like-circle:hover {
  span {
    color: #00abae;
  }
}

.c-btn__like-circle:hover::before {
  transform: translateX(-50%) translateY(-50%) scale(4.2);
}

シャドウ・立体系

物理的な「押せそう感」や奥行きを演出できるため、操作性の高さやインタラクティブさが伝わるホバーエフェクトです。

「直感的」「操作しやすい」「立体感がある」「モダン」といった印象を与え、UI全体に心地よいリズム感を加えます。

CTAボタン（購入・申し込み・登録など）に押しやすさを演出したい場面
スマホアプリ風やマテリアルデザインを取り入れたUIで統一感を出したいとき
「押せる感」「クリック感」を視覚的に伝えたいボタンに

作成中です！

アウトライン・ボーダー系

線や余白の変化に注目させることで、ミニマルでありながらデザイン性を感じさせるホバーエフェクトです。

「スマート」「モダン」「おしゃれ」「余裕がある」といった印象を与え、上品で引き算的な美しさを表現できます。

スタイリッシュでミニマルなデザインを重視したい場面
ファッション、デザイン系、ポートフォリオなど感度の高いサイト
背景に余白が多いレイアウトやモノトーン基調のUIに

作成中です！

高級感・エモーショナル系

滑らかさや光の演出など、繊細なアニメーションが特徴で、感性に訴えるホバーエフェクトです。

「高級感がある」「印象的」「感情を揺さぶる」「特別感がある」といった印象を与え、ブランドイメージの強化や印象付けに効果的です。

ラグジュアリーブランドやアート・ブライダル系など、世界観を重視した場面
ビジュアル重視のLPやプロダクト紹介ページで印象を強く残したいとき
「特別な体験」「上質さ」を表現したいブランディングに◎

作成中です！

ボタンタグの配置の仕方

サイズや色など、表現に合わせて適時CSSを変更してご利用ください。

変更するプロパティの例

以下の下線部分などを書き換えることで自由に表現を変えられます。

color: #00829f;: 文字の色
background-color: #ffffff;: ボタンの背景色
border: 1px solid #00829f;: 枠線の太さ、種類、色
transition: all 0.6s;: アニメーションの時間（秒）

まとめ

色々な種類のボタンホバーエフェクトをご紹介しました。ぜひお気軽にご利用ください。

今後も追加予定ですので、気になる方はチェックをお願いします！

【図解あり】flex-grow / shrink / basisとは？基本から実例まで分かりやすく解説