ボタンは、特定のアクションを実行するために使用されるクリック可能な要素です。 CSS を使用すると、さまざまなスタイルのボタンを設定できます。その 1 つは、クリック時にボタンの色を変更することです。ボタンの色は CSS を使用して設定できます。 ：アクティブ 」疑似クラス。
このブログでは、クリック時にボタンの色を変更する手順について説明します。そのためには、まず :active 疑似クラスについて学びます。
それでは始めましょう！
CSSの「:active」とは？
CSS でクリック時にボタンの色を変更するには、「 ：アクティブ 」疑似クラス。 HTML では、ユーザーがクリックしたときにアクティブ化されている要素を示します。また、マウスを使用する場合は、マウスキーを押すと起動します。
構文
a : アクティブ {
色 : 緑 ;
}
「 a 」は、:active クラスが適用される HTML 要素を指します。
述べられた概念を理解するために例に向かいましょう。
CSSでクリック時にボタンの色を変更する方法は?
クリック時にボタンの色を変更するには、まず、HTML ファイルでボタンを作成し、クラス名「 ボタン 」。
HTML
< 体 >< ボタン クラス = 「ボタン」 > ボタン < / ボタン >
< / 体 >
次に、CSS でボタンの色を設定します。そのために、「 .btn 」をクリックしてボタンにアクセスし、ボタンの色を「 RGB(0, 255, 213) 」。
CSS
.btn {背景色 : RGB ( 0 、 255 、 213 ) ;
}
その後、ボタンに :active 疑似クラスを「 .btn:アクティブ 」、アクティブな状態で表示されるボタンの色を「 RGB(123, 180, 17) 」：
.btn : アクティブ {背景色 : RGB ( 123 、 180 、 17 ) ;
}
これにより、次の結果が表示されます。
では、
タグとボタン クラス名で見出しを追加しましょう。 ボタン 」、 タグ内。
HTML
< 中心 >
< h1 > ボタンの色を変える < / h1 >
< ボタン クラス = 'ボタン' > クリックミー < / ボタン >
< / 中心 >
次に、CSS に移動してボタンのスタイルを設定し、:active を適用します。そのために、境界線のスタイルを「 なし 」とパディングを「 15px 」。その後、ボタンテキストの色を「 RGB(50, 0, 54) 」とその背景を「 RGB(177, 110, 149) 」、その半径を「 15px 」：
。ボタン {
国境 : なし ;
パディング : 15px ;
色 : RGB ( 50 、 0 、 54 ) ;
背景色 : RGB ( 177 、 110 、 149 ) ;
境界半径 : 15px ;
}
これにより、次の結果が表示されます。
その後、ボタンに :active 疑似クラスを適用します。 .button:アクティブ 」とボタンの色を「 RGB(200, 255, 0) 」：
。ボタン : アクティブ {
背景色 : RGB ( 200 、 255 、 0 ) ;
}
上記のコードをすべて実装したら、HTML ファイルに移動して実行し、結果を確認します。
出力から、ボタンをクリックすると、指定された RGB カラーコードに従って色が変更されることがわかります。
結論
CSS でクリック時にボタンの色を変更するには、「 ：アクティブ 」 疑似クラスを使用できます。より具体的には、アクティブ化されたときにボタン要素を表すことができます。このクラスを使用すると、マウスでクリックしたときに異なるボタンの色を設定できます。この記事では、CSS でクリック時にボタンの色を変更する手順を説明しました。
HTML
< 中心 >< h1 > ボタンの色を変える < / h1 >
< ボタン クラス = 'ボタン' > クリックミー < / ボタン >
< / 中心 >
次に、CSS に移動してボタンのスタイルを設定し、:active を適用します。そのために、境界線のスタイルを「 なし 」とパディングを「 15px 」。その後、ボタンテキストの色を「 RGB(50, 0, 54) 」とその背景を「 RGB(177, 110, 149) 」、その半径を「 15px 」：
。ボタン {国境 : なし ;
パディング : 15px ;
色 : RGB ( 50 、 0 、 54 ) ;
背景色 : RGB ( 177 、 110 、 149 ) ;
境界半径 : 15px ;
}
これにより、次の結果が表示されます。
その後、ボタンに :active 疑似クラスを適用します。 .button:アクティブ 」とボタンの色を「 RGB(200, 255, 0) 」：
。ボタン : アクティブ {背景色 : RGB ( 200 、 255 、 0 ) ;
}
上記のコードをすべて実装したら、HTML ファイルに移動して実行し、結果を確認します。
出力から、ボタンをクリックすると、指定された RGB カラーコードに従って色が変更されることがわかります。
結論
CSS でクリック時にボタンの色を変更するには、「 ：アクティブ 」 疑似クラスを使用できます。より具体的には、アクティブ化されたときにボタン要素を表すことができます。このクラスを使用すると、マウスでクリックしたときに異なるボタンの色を設定できます。この記事では、CSS でクリック時にボタンの色を変更する手順を説明しました。