试一试
.joinBtn {
width: 10em;
height: 5ex;
background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
border: none;
border-radius: 5px;
font-weight: bold;
color: white;
cursor: pointer;
}
.joinBtn:active {
box-shadow: 2px 2px 5px #fc894d;
}
<p>Would you like to subscribe to our channel?</p>
<button class="joinBtn">Subscribe</button>
:active 伪类通常用于 <a> 和 <button> 元素。此伪类的其他常见目标包括包含在已激活元素中的元素，以及通过其关联的 <label> 激活的表单元素。
由 :active 伪类定义的样式将被任何后续的具有至少相等特异性的链接相关伪类（:link、:hover 或 :visited）覆盖。为了适当地样式链接，请将 :active 规则放在所有其他链接相关规则之后，如 LVHA-order 所定义：:link — :visited — :hover — :active。
注意：在带有多个按钮的鼠标系统上，CSS 规定 :active 伪类必须仅适用于主按钮；在惯用右手鼠标上，这通常是最左边的按钮。
语法
css
:active {
/* ... */
}
示例
激活的链接
HTML
html
<p>
This paragraph contains a link:
<a href="#">This link will turn red while you click on it.</a>
The paragraph will get a gray background while you click on it or the link.
</p>
CSS
css
/* Unvisited links */
a:link {
color: blue;
}
/* Visited links */
a:visited {
color: purple;
}
/* Hovered links */
a:hover {
background: yellow;
}
/* Active links */
a:active {
color: red;
}
/* Active paragraphs */
p:active {
background: #eeeeee;
}
结果
激活的表单元素
HTML
html
<form>
<label for="my-button">My button: </label>
<button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
CSS
css
form :active {
color: red;
}
form button {
background: white;
}
结果
规范
| 规范 |
|---|
| HTML # 选择器-active |
| 选择器 Level 4 # active-伪类 |
浏览器兼容性
加载中…