CSS按鈕激活是指當用戶在鼠標單擊按鈕時,其樣式狀態發生變化的效果。這種效果不僅能夠讓用戶感知到自己的操作,還能夠增加按鈕的美觀度和交互性。
.btn { background-color: #ccc; border: none; color: #000; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .btn:active { background-color: #999; }
在上述代碼中,我們定義了.btn樣式,這是一個基礎的按鈕樣式,包括了背景色、邊框、顏色、內邊距、對齊方式等。而.btn:active則表示按鈕被激活時的狀態,我們將激活狀態下的背景色改為深灰色。
需要注意的是,:active偽類只在按鈕被按下時才會生效。此外,我們也可以使用:focus代替:active,用于表示當按鈕被獲得焦點時的狀態。
總的來說,CSS按鈕激活效果不僅能夠提高用戶交互體驗,還有很多靈活的應用場景,比如可以將按鈕激活效果與JavaScript交互結合,實現更復雜的功能。
上一篇mysql按周分組統計
下一篇css按鈕旋轉打開代碼