How to Modify Button Appearance After It\'s Been Pressed Using the :target Pseudo-class?

"Pressed" Button Selector

When aiming to alter a button's appearance after it has been pressed, the conventional :active selector might not suffice. This selector only triggers when the button is physically held down.

To achieve the desired functionality, an alternative approach is to utilize the :target pseudo-class. This class activates when the corresponding anchor point (#btn in this case) is targeted.

Implementation:

Replace the tag with an tag:

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

Adjust the CSS to incorporate the :active and :target pseudo-classes:

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

With this implementation, the button will initially appear in its normal state (white). When it is clicked, it will turn green (active state). After releasing the button, it will switch to the red state (target state).

The above is the detailed content of How to Modify Button Appearance After It\'s Been Pressed Using the :target Pseudo-class?. For more information, please follow other related articles on the PHP Chinese website!