如何在 CSS 中创建发布时样式更改的类似按钮的效果？

按下按钮选择器

在 CSS 中，您可以使用 :active 伪类来设置当前单击并按住的元素的样式。然而，这种行为对于按钮来说并不理想，因为按钮的样式只会在按住时改变。

要达到让按钮在按下和释放后改变样式的预期效果，您可以使用标签而不是按钮：

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>

HTML:

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

此代码创建一个行为类似于按钮的链接。单击链接时，其样式变为绿色。然后，当释放鼠标按钮时，链接的样式将变为红色。

以上是如何在 CSS 中创建发布时样式更改的类似按钮的效果？的详细内容。更多信息请关注PHP中文网其他相关文章！