How to Create a Button with Three Distinct States: Default, Hover, and Activated?

Pressed Button Indicator

Question:

Creating a button that visually toggles its state on interaction can be a useful feature in user interfaces. However, the provided CSS only alters the button's style while it's actively being pressed. The intended behavior is to have three distinct states: a default state, a hover state, and an activated (pressed) state.

Answer:

While using a tag may not yield the desired output, it's worth exploring an alternative approach using an tag. This solution provides similar functionality and may offer additional flexibility:

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

The above is the detailed content of How to Create a Button with Three Distinct States: Default, Hover, and Activated?. For more information, please follow other related articles on the PHP Chinese website!