ホバーで背景色が変わるボタンを作る方法
ボタンにカーソルを重ねると、背景色が変わるボタンを作る方法を紹介します。このサンプルでは、通常時は白い背景と青い枠線で表示し、ホバーすると背景を青、文字を白へ切り替えます。JavaScriptを使用せず、CSSの:hoverだけでシンプルに実装できます。
通常時とホバー時で見た目を変えることで、ボタンが操作できる要素であることを視覚的に伝えられます。お問い合わせページへのリンク、詳細ページへの移動、申し込みページへのリンクなど、さまざまな場所で利用できます。背景色だけでなく文字色も同時に切り替えるため、ホバー後も文字を読みやすく表示できます。
HTMLではa要素を使ってリンクとして利用できるボタンを配置し、CSSでは通常時とホバー時の背景色や文字色を設定します。さらにtransitionを指定することで、背景色と文字色が瞬時に切り替わるのではなく、滑らかに変化するデザインにしています。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンにカーソルを重ねて、背景色が変化する動きを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>ホバーで背景色が変わるボタン</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ホバーで背景色が変わるボタン -->
<a
class="hover-background-button_link"
href="#">
ボタン
</a>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではa要素を使ってリンクとして利用できるボタンを配置し、CSSでは通常時の背景色と文字色、ホバー時の背景色と文字色を設定します。ボタンにカーソルを重ねると、白い背景から青い背景へ滑らかに変化します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはホバーで背景色が変わるボタンを配置するファイルです。a要素の文字を変更でき、href="#"を変更すると任意のリンク先を設定できます。
style.cssはボタンのデザインとホバー時の変化を設定するファイルです。通常時は白い背景と青い文字で表示し、:hoverを使って背景色を青、文字色を白へ変更します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ボタンにカーソルを重ねると、背景色が白から青へ変化し、文字色も青から白へ切り替わります。実際にリンクとして使用する場合は、a要素のhref="#"を移動先のURLへ変更してください。
カスタマイズできる内容
index.htmlではボタンに表示する文字とリンク先を変更できます。style.cssでは通常時とホバー時の背景色や文字色、枠線、内側余白、角丸、文字サイズを変更できます。また、transitionを調整することで、背景色と文字色が切り替わる速さも変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。
padding:14px 28px;
ボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の28pxを大きくするとボタンが横に広がります。
border:2px solid #2563eb;
ボタンの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると角丸のない四角いボタンになります。
font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると文字が小さくなります。
transition:background-color .3s ease,color .3s ease;
背景色と文字色が切り替わる時間です。.3sを大きくするとゆっくり変化し、小さくすると速く変化します。
レスポンシブ対応
このサンプルではページ全体の左右に20pxの余白を確保し、ボタンは内容に合わせた横幅で表示されます。そのため、スマートフォン・タブレット・PCなど画面幅が異なる環境でも、画面端との間隔を保ちながら表示できます。
コメント