ホバーで背景色が変わる枠線ボタンを作る方法【HTML/CSS・サンプルコード付き】

ボタン

ホバーで背景色が変わる枠線ボタンを作る方法

ホバーで背景色が変わる枠線ボタンを作る方法を紹介します。通常時は枠線だけのシンプルなボタンとして表示し、マウスを重ねたときに背景色と文字色を切り替えることで、クリックできる要素であることを分かりやすく伝えられます。

このサンプルでは、HTMLとCSSだけを使って枠線ボタンを作成します。CSSの border で枠線を表示し、:hover を使って背景色と文字色を変更します。JavaScriptは使用しないため、シンプルな構成で導入しやすいボタンです。

お問い合わせボタン、詳細を見るボタン、ダウンロードボタン、メニュー内のボタンなど、さまざまな場所で活用できます。枠線の太さ、角の丸み、背景色、文字色、ホバー時の切り替わり速度はCSSから調整できるため、サイトのデザインに合わせてカスタマイズしやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

border で枠線を表示し、ホバーすると背景色と文字色が切り替わります。

コードをコピーして使おう！

<!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>

  <!-- ボタン配置エリア -->
  <div class="outline-button_wrap">

    <!-- 枠線ボタン -->
    <button class="outline-button_button" type="button">
      枠線ボタン
    </button>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLに枠線ボタンを配置し、CSSで枠線や色、角の丸み、ホバー時の背景色や文字色の切り替えを設定します。JavaScriptを使用しないため、HTMLとCSSだけで簡単に導入できます。 

sample/
├── index.html
└── style.css

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。ボタンへマウスを重ねると背景色と文字色が切り替わります。枠線の太さや色、角の丸み、ホバー時の色、切り替え速度はCSSから自由に変更できるため、サイトデザインに合わせてカスタマイズできます。

コメント