本篇文章主要給大家介紹關於css button按鈕的多種狀態。希望對有需要的朋友有所協助。
首先給大家舉一段button按鈕的狀態碼樣本如下:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>button按鈕的狀態碼不同效果樣本</title> <style> .btn{ appearance: none; background: #026aa7; color: #fff; font-size: 20px; padding: 0.65em 1em; border-radius: 4px; box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.2); margin-right: 1em; cursor: pointer; border:0; } .btn1:hover{ box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5); } .btn1:focus{ position: relative; top: 4px; box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.2); outline: 0; } .btn2:hover{ box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5); } .btn2:active{ position: relative; top: 4px; box-shadow: inset 0 3px 5px 0 rgba(0,0,0,0.2); outline: 0; } .btn2:focus{ outline: 0; } </style></head><body><button class="btn btn1">點擊不會彈起</button><button class="btn btn2">點擊會彈起</button></body></html>
以上代碼可直接複製粘貼在本地測試,效果如:
綜上所述,給大家總結一下關於button按鈕的幾種狀態:
普通狀態
hover 滑鼠移至上方狀態
active 點擊狀態
focus 取得焦點狀態
註:.btn:focus{outline:0;} 可以去除按鈕或a標籤點擊後的藍色邊框
cursor 屬性規定要顯示的游標的類型(形狀)。該屬性定義了滑鼠指標放在一個元素邊界範圍內時所用的游標形狀
:active 選取器用於選擇活動連結。當您在一個連結上點擊時,它就會成為活動的(啟用的)。
希望本篇關於button狀態的不同情況介紹,對有需要的朋友有所協助。