How to Change Button Style After Clicking Instead of While Holding?

Pressed Button Selector

The provided CSS code for the button using the :active selector does not change the button style until it is clicked and held. To achieve the desired effect where the button style changes after it is pressed, a different approach is required.

Instead of using the :active selector, which only triggers when the button is being clicked, you can use the :target selector to change the button style after it has been clicked. The :target selector matches an element that is the target of the current hyperlink reference.

Here is an example using an anchor () tag instead of a button:

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

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

In this example, the anchor tag has an id of "btn" and a link to the same id. When the link is clicked, the anchor tag becomes the target of the hyperlink reference, and the :target selector is applied, changing the button style to red.

The above is the detailed content of How to Change Button Style After Clicking Instead of While Holding?. For more information, please follow other related articles on the PHP Chinese website!