CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:hoverセレクターでホバー可能なボタンを作成する方法

CSSの:hoverセレクターを使うと、マウスカーソルが要素に重なったときにスタイルを変化させることができます。これを利用すれば、ボタンにマウスを乗せた瞬間に色や枠線が変わる、インタラクティブなホバーエフェクト付きボタンを簡単に作成できます。

以下のコードでは、通常時は黄色い背景と破線の青い枠線を持つボタンが、ホバーするとオレンジ色の背景と実線の枠線に変化します。実際に動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         .btn {
            background-color: yellow;
            color: black;
            text-align: center;
            font-size: 15px;
            padding: 20px;
            border-radius: 15px;
            border: 3px dashed blue;
         }
         .btn:hover {
            background-color: orange;
            color: black;
            border: 3px solid blue;
         }
      </style>
   </head>
   <body>
      <h2>実行結果</h2>
      <p>下のボタンにマウスを乗してみてください：</p>
      <button class = "btn">結果</button>
   </body>
</html>

コードの解説

このコードのポイントは以下の通りです。

  • .btnクラスでは、ボタンの基本スタイル（背景色・文字色・パディング・角丸・破線の枠線）を定義しています。
  • .btn:hoverは、ボタンにマウスカーソルが乗ったときだけ適用されるスタイルです。背景色が黄色からオレンジへ、枠線が破線から実線へと変化します。

:hoverセレクターの応用

:hoverセレクターはボタン以外にも、リンクやカード型のレイアウトなど、あらゆる要素に適用できます。さらにtransitionプロパティを組み合わせれば、色の変化を滑らかにアニメーションさせることも可能です。

.btn {
  transition: background-color 0.3s ease, border 0.3s ease;
}

このようにCSSだけで実装できるため、JavaScriptを使わずに軽量でパフォーマンスの良いインタラクティブなUIを作れます。ぜひ自分のサイトにも取り入れてみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>