マウスを乗せると動くボタンをCSSだけで｜コピペで使える5種類と、スマホ・キーボードへの配慮

見本ごとに、HTMLとCSSを並べました。HTMLはボタンを置きたい場所に、CSSはサイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。HTMLの href="#" は、実際のリンク先に書きかえてください（この記事の見本は、押すと「応用」の節へ移るようにしています）。

CSSの前半にある .kd-bh-btn は、5種類に共通するボタンの形です。同じページで何種類か使うときは、1回だけ入れれば足ります。クラス名の頭の kd-bh- は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

1. 色が入れかわる

白地に青い文字のボタンが、マウスを乗せると青地に白い文字へ入れかわります。動かないので、どんなサイトにもなじむ、いちばん基本の形です。

お問い合わせ

自動で再生中

HTML

<a class="kd-bh-btn kd-bh-color" href="#">
  お問い合わせ
</a>

CSS

.kd-bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid #0369A1;
  border-radius: 999px;
  background-color: #0369A1;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-bh-btn:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}
.kd-bh-color {
  background-color: #fff;
  color: #0369A1;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.kd-bh-color:hover,
.kd-bh-color:focus-visible {
  background-color: #0369A1;
  color: #fff;
}

2. ふわっと浮く

ボタンが少し上に浮いて、下の影が広がります。「押せるもの」だと伝わりやすく、資料請求や申し込みのボタンに向いています。

資料請求

自動で再生中

HTML

<a class="kd-bh-btn kd-bh-lift" href="#">
  資料請求
</a>

CSS

.kd-bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid #0369A1;
  border-radius: 999px;
  background-color: #0369A1;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-bh-btn:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}
.kd-bh-lift {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.18);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.kd-bh-lift:hover,
.kd-bh-lift:focus-visible {
  background-color: #075985;
  border-color: #075985;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.22);
}
/* 動きを減らす設定の人には、動かさずに色だけ変える */
@media (prefers-reduced-motion: reduce) {
  .kd-bh-lift:hover,
  .kd-bh-lift:focus-visible {
    transform: none;
  }
}

3. ふくらむ

ボタン全体が、ほんの少しだけ大きくなります。まわりの文章は動かないので、レイアウトは崩れません。

無料で相談する

自動で再生中

HTML

<a class="kd-bh-btn kd-bh-grow" href="#">
  無料で相談する
</a>

CSS

.kd-bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid #0369A1;
  border-radius: 999px;
  background-color: #0369A1;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-bh-btn:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}
.kd-bh-grow {
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}
.kd-bh-grow:hover,
.kd-bh-grow:focus-visible {
  background-color: #075985;
  border-color: #075985;
  transform: scale(1.06);
}
/* 動きを減らす設定の人には、動かさずに色だけ変える */
@media (prefers-reduced-motion: reduce) {
  .kd-bh-grow:hover,
  .kd-bh-grow:focus-visible {
    transform: none;
  }
}

4. 矢印が進む

ボタンの中の矢印だけが、右へ少し進みます。「次のページへ進む」ことが、動きでそのまま伝わります。

詳しく見る

自動で再生中

HTML

<a class="kd-bh-btn kd-bh-arrow" href="#">
  詳しく見る
  <span class="kd-bh-icon" aria-hidden="true">→</span>
</a>

CSS

.kd-bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid #0369A1;
  border-radius: 999px;
  background-color: #0369A1;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-bh-btn:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}
.kd-bh-arrow {
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.kd-bh-arrow .kd-bh-icon {
  display: inline-block;
  transition: transform 0.25s ease;
}
.kd-bh-arrow:hover,
.kd-bh-arrow:focus-visible {
  background-color: #075985;
  border-color: #075985;
}
.kd-bh-arrow:hover .kd-bh-icon,
.kd-bh-arrow:focus-visible .kd-bh-icon {
  transform: translateX(5px);
}
/* 動きを減らす設定の人には、動かさずに色だけ変える */
@media (prefers-reduced-motion: reduce) {
  .kd-bh-arrow:hover .kd-bh-icon,
  .kd-bh-arrow:focus-visible .kd-bh-icon {
    transform: none;
  }
}

5. 左から色が塗られる

白いボタンに、左から青が塗られていきます。目に留まりやすい動きなので、ページの中で一番押してほしいボタンに1つだけ使います。

サービス一覧

自動で再生中

HTML

<a class="kd-bh-btn kd-bh-fill" href="#">
  サービス一覧
</a>

CSS

.kd-bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid #0369A1;
  border-radius: 999px;
  background-color: #0369A1;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-bh-btn:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}
.kd-bh-fill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #fff;
  color: #0369A1;
  transition: color 0.3s ease;
}
.kd-bh-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #0369A1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.kd-bh-fill:hover,
.kd-bh-fill:focus-visible {
  color: #fff;
}
.kd-bh-fill:hover::before,
.kd-bh-fill:focus-visible::before {
  transform: scaleX(1);
}
/* 動きを減らす設定の人には、塗る動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-bh-fill::before {
    transition: none;
  }
}

仕組み：:hover が「いつ」、transition が「どう変わるか」

5種類とも、やっていることは同じです。「乗せたときの見た目」を書き、「そこまでの変わり方」を決める。この2つに分けると分かりやすくなります。

:hover と :focus-visible：乗せたとき・選んだとき

:hover は、マウスなどのポインターが乗っている間だけ当てはまる指定です。見本ではいつも、:focus-visible（フォーカス・ビジブル）を並べて書いています。こちらは、キーボードのTabキーなどでボタンを選んだときに当てはまる指定です。並べておくと、マウスを使わない人にも同じ変化が見えます。

.kd-bh-lift:hover,
.kd-bh-lift:focus-visible {
  transform: translateY(-3px);
}

transition：変化のあいだを滑らかにつなぐ

transition を書かないと、見た目は一瞬で切りかわります。transition は、「どのプロパティを・何秒で・どんな速さで」変えるかの指定です。

transition: transform 0.25s ease, box-shadow 0.25s ease;

書いたもの	意味	もとのプロパティ名
transform	変化を滑らかにするプロパティ	transition-property
0.25s	変化にかける時間（0.25秒）	transition-duration
ease	速さの変え方（途中で速くなり、最後はゆっくり）	transition-timing-function

ポイントは、transition を:hover の側ではなく、普段の側に書くことです。普段の側に書いておくと、乗せたときも、離したときも、同じ時間をかけて変わります。:hover の側だけに書くと、乗せたときは滑らかに変わりますが、離したときは一瞬で元に戻ります。

もう1つ、変化させるプロパティを1つずつ書いているのにも理由があります。transition: all と書くと、あとから足した指定まで全部動くようになり、意図しない変化が起きやすくなるためです。

transform と ::before：まわりを動かさずに動く

浮く・ふくらむ・矢印は、transform で動かしています。transform で動かしても、まわりの文章やボタンの位置はずれません。前回のローディングと同じ理由で、レイアウトががたつきません。

「左から色が塗られる」は、ボタンの中に ::before（ビフォー）で見えない色の板を足し、それを横に0倍（scaleX(0)）から1倍へ伸ばしています。transform-origin: left で、伸び始める位置を左端にしています。

ここで使った transition は2015年9月から、:hover は2015年7月から、:focus-visible は2022年3月から、主要なブラウザで使える機能とMDNで示されています。いまのスマホやパソコンのブラウザなら、特別な準備なしで動きます。

数値を変えるとどうなるか

同じコードでも、数値を1つ変えると印象が変わります。ここの見本も、自動でくり返しています。

速さ：transition-duration

資料請求

0.1秒

資料請求

0.25秒
（見本）

資料請求

0.6秒

0.1秒だと、ほとんど一瞬で切りかわり、動きとして見えません。0.6秒だと、マウスを乗せてから反応するまでが遅く、もたついて見えます。ボタンなら0.2〜0.3秒あたりが「すぐ反応して、しかも滑らか」に見える、というのがKAKERUの判断です。

動き方：transition-timing-function

無料で相談する

ease-out
（見本）

無料で相談する

linear

無料で相談する

行きすぎて戻る

ease-out は、すばやく動き始めて、最後にゆっくり止まります。linear は、最初から最後まで同じ速さです。cubic-bezier() で数値を細かく決めると、少し大きくなりすぎてから戻る、弾むような動きも作れます。弾む動きは目立つ分、使うのは1か所までにしています。

大きさ：scale の倍率

無料で相談する

1.03倍

無料で相談する

1.06倍
（見本）

無料で相談する

1.2倍

1.03倍だと、ほとんど気づかれません。1.2倍まで大きくすると、隣のボタンや文章に重なることがあります。見本の1.06倍は、変化が分かって、まわりにもぶつからない大きさとして選びました。

スマホと、見る人への配慮

ボタンは、押してもらうための部品です。動きをつけるときに、気をつけたいことを4つにまとめます。

スマホには「マウスを乗せる」がない

スマホは指で触るので、マウスを乗せている状態がありません。MDNでは、タッチ画面の :hover はブラウザによって、まったく当てはまらない、触った一瞬だけ当てはまる、別の場所を触るまで当てはまり続ける、のどれかになる、と注意しています。押したあとも色が変わったままになるのは、このためです。

そこで、ホバーでしか分からない情報は作らないことが大切です。ボタンは、普段の状態で「押せるもの」と分かる見た目にしておきます。押したあとに色が残るのが気になるときは、@media (hover: hover) で囲むと、マウスのようにホバーできる機器のときだけ変化させられます。MDNでは、2018年12月から主要なブラウザで使える機能とされています。

@media (hover: hover) {
  .kd-bh-color:hover {
    background-color: #0369A1;
    color: #fff;
  }
}

この書き方にするときも、:focus-visible の指定は外に残しておきます。キーボードで選んだときの見た目は、ホバーできるかどうかと関係がないためです。

キーボードで選んだときの枠を消さない

ボタンの周りに出る枠（フォーカスの枠）を、デザインの都合で outline: none で消してしまうことがあります。WCAG（ウェブのアクセシビリティの国際的な基準）には、いまどこを選んでいるかが見えるようにする、という基準（2.4.7）があります。見本では枠を消さずに、濃い紺 #0F172A の3pxの線を、ボタンから3px離して出しています。

「動きを減らす」設定の人には、色の変化だけ

画面の動きで気分が悪くなる人や、動きが気になって集中しにくい人は、スマホやパソコンで「動きを減らす」設定をオンにしていることがあります。iPhoneなら「設定 > アクセシビリティ > 動作 > 視差効果を減らす」です。CSSの prefers-reduced-motion を使うと、この設定がオンの人にだけ別の見た目を出せます。

見本では、この設定の人には、浮く・ふくらむ・矢印の動きを transform: none で止め、色の変化だけを残しています。「左から色が塗られる」は、塗る動きをなくして、すぐに色が切りかわる形にしました。ボタンが反応したことは、色だけで十分に伝わります。

白い文字は、背景との差を4.5:1以上に

ボタンの文字は、背景の色との差（コントラスト比）が 4.5:1以上 という基準があります。KAKERUのブランドカラーの青 #0EA5E9 に白い文字を乗せると、約2.8:1で足りません。前回のローディングで使った #0284C7 でも約4.1:1で、16pxの文字には少し足りません。

そこで見本では、さらに一段濃い #0369A1（白い文字で約5.9:1）を普段の色に、乗せたときはもう一段濃い #075985（約7.6:1）にしています。乗せたときに薄くするのではなく濃くするのは、変化したときにも文字が読みにくくならないようにするためです。

ブランドの色を、そのままボタンの背景に使うと、白い文字が読みにくくなることがあります。
ボタンは「読める濃さ」を先に決めてから、ブランドの色に近づけていきます。

応用：実際にマウスを乗せて試す

ここのボタンは自動では動きません。パソコンならマウスを乗せて、キーボードならTabキーで1つずつ選んで、変化を確かめてみてください。スマホでは、触ったときの見え方の違いが分かります。

お問い合わせ資料請求無料で相談する詳しく見るサービス一覧

5種類を1つのページに全部並べるのは、試すためだけです。実際のサイトでは、次の節のように役割を決めて使い分けます。

AIに頼むなら

同じようなボタンは、Claudeなどの生成AIに頼んでもすぐ作れます。そのときは、見た目だけでなく、用途・数値・配慮まで伝えると、直す回数が減ります。

お問い合わせボタンに、マウスを乗せると少し浮いて影が広がる動きをつけたい。
HTMLとCSSだけで。変化は0.25秒、浮くのは3pxまで。
キーボードで選んだときも同じ変化にして、動きを減らす設定の人には色だけ変えて。白い文字のコントラストは4.5:1以上で。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

スマホで押したあと、色が変わったままにならないか。実際のスマホで触って確かめます。気になるときは @media (hover: hover) で囲みます
フォーカスの枠が消されていないか。outline: none が入っていたら、かわりの枠があるかを見ます。Tabキーで選んでみると分かります
動きが大きすぎないか、遅すぎないか。transition: all や、1秒近い時間、1.2倍以上の拡大が入っていたら、数値を小さくします