How to Achieve Persistent Button Style Changes on Click?

Pressed Button Selector

Problem:

You encounter a scenario where you desire to modify the appearance of a button when it is pressed to create a noticeable visual feedback. You have attempted to use the :active pseudo-class, but the style change only occurs when you click and hold the button.

Answer:

While the :active pseudo-class may seem like a suitable option, it is specifically designed to style an element while it is actively being pressed. To achieve your desired effect, an alternative approach is recommended.

Consider using an anchor element instead of a element. This may not align precisely with your initial requirement, but it opens up additional possibilities if you are unable to find a direct solution using :

CSS Code:

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

HTML Code:

<code class="html"><a id="btn" href="#btn">Demo</a></code>

With this approach, you can now observe the following behavior:

• Normal state: Button is white
• While clicked: Button turns green
• After released: Button turns red

The above is the detailed content of How to Achieve Persistent Button Style Changes on Click?. For more information, please follow other related articles on the PHP Chinese website!