How to Create a Button-like Effect with a Style Change on Release in CSS?-CSS Tutorial-php.cn

How to Create a Button-like Effect with a Style Change on Release in CSS?

Mary-Kate Olsen

Release： 2024-11-02 23:12:30

Original

899 people have browsed it

How to Create a Button-like Effect with a Style Change on Release in CSS?

Pressed Button Selector

In CSS, you can use the :active pseudo-class to style elements that are currently being clicked and held. However, this behavior is not ideal for buttons, as the button's style will only change while it's being held down.

To achieve the desired effect of having the button change style after it's pressed and released, you can use an tag instead of a button:

CSS:

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

Copy after login

HTML:

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

Copy after login

This code creates a link that behaves like a button. When the link is clicked, its style changes to green. Then, when the mouse button is released, the link's style changes to red.

The above is the detailed content of How to Create a Button-like Effect with a Style Change on Release in CSS?. For more information, please follow other related articles on the PHP Chinese website!