如何创建具有三种不同状态的按钮：默认、悬停和激活？

按下按钮指示器

问题：

创建一个以可视方式切换其状态的按钮交互可能是用户界面中的一个有用的功能。然而，提供的 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>

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

以上是如何创建具有三种不同状态的按钮：默认、悬停和激活？的详细内容。更多信息请关注PHP中文网其他相关文章！