試一試
.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-偽類 |
瀏覽器相容性
載入中…