ボタンは、さまざまなタスクを実行する HTML の基本的な部分です。 CSS を使用して、ボタンのデザインとスタイルを設定できます。ボタンのデザインには、ボタンの色付け、サイズ変更、ホバリングなど、さまざまな方法があります。

この記事では、最初にボタンの作成方法を学び、次にホバー時にボタンの色を変更します。

始めましょう！

CSSでホバー時にボタンの色を変更する方法は?

CSSでは、「 :ホバー 」は、ホバー時のボタンの色を変更するために使用されます。「 :ホバー 」は、リンク、ボタン、画像などの要素の上にマウスを置いたときに HTML 要素の動作を変更できる疑似クラスです。

の構文 :ホバー を以下に示します。

構文

上記の構文では、「 a 」は、「 :ホバー 」が適用されます。 CSS では、要素の色、サイズ、幅など、HTML 要素のホバー動作を設定できます。

ステップ 1: Div とボタンを作成する

HTML では、まず div を作成し、

で見出しを追加し、タグを使用してボタンを追加します。ここでは、ボタンのクラス名を「ボタン」、ボタンのテキストは「私にカーソルを合わせる」。

HTML

上記のコードの結果を以下に示します。見出しとボタンが作成されたことがわかります。

次に、CSS に移動して、div とボタンを 1 つずつスタイル設定します。

ステップ 2: スタイルボタンと Div

まず、「」を使用して、作成したコンテナーをスタイルします。分周」。次に、divの高さを「 250px 」、背景色は「 RGB(199, 173, 192) 」。また、border プロパティを使用して、div の境界線、幅を「 5px 」、スタイルは「個体」、「 RGB(40, 2, 55) 」。

CSS

以下の出力は、追加されたスタイルが div に正常に適用されたことを示しています。

次のステップでは、CSS を使用してボタンのスタイルを設定します。

次に、「」を使用してボタンのスタイルを設定します。 .btn 」で HTML で作成されたボタンにアクセスします。その後、「なし」を境界プロパティ値として指定します。その後、フォントサイズを「大きい」とボタンのパディングを「 10px 」を使用して、ボタンのコンテンツとボタンの境界線の間にスペースを作成します。最後に、テキストと背景の色を「 RGB(50, 0, 54) ' と ' RGB(193, 54, 135) 」：

ボタンがスタイルアップされました。

さらに、「 :ホバー」ホバー時のボタンの色を変更します。

ステップ 3: ホバー時のボタンの色を変更する

今、私たちは「 .btn:ホバー」ボタンをホバー疑似クラス要素にリンクします。その結果、ホバーがボタンに適用されます。次に、ボタンの背景色とテキスト色を「 RGB(66, 2, 41) ' と ' RGB(119, 255, 0) 」。これらの色は、マウスがボタンの上にあるときにボタンに適用されます。

以下に示す出力では、マウスをホバーするとボタンの色が変更されることがわかります。

それでおしまい！ CSSを使ってホバー時のボタンの色を変える方法を解説しました。

ホバー時のボタンの色を変更するには、「 :ホバー 」擬似クラス要素が使用されます。これを行うには、ボタンを :hover にリンクし、ボタンの色を設定します。ボタンにカーソルを合わせると色が変わります。この記事では、ホバー時にボタンの色を変更する方法とその例を説明しました。