首先給大家舉一段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狀態的不同情況介紹，對有需要的朋友有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
