CSS 點擊按鈕發光效果

.btn {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
position: relative;
}
.btn:active {
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
.btn:focus::before {
content: "";
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
background-color: rgba(0, 123, 255, 0.5);
border-radius: 10px;
z-index: -1;
}

以上是一個基本的點擊按鈕效果，使用偽類選擇器來控制元素狀態的變化。

當按鈕被激活（即被點擊）時，我們給它添加一個淺色的陰影。這樣能夠增強用戶操作的反饋，并讓用戶感受到按鈕的響應。

在按鈕獲得焦點時，我們才會使用“:focus”偽類選擇器。在按鈕上增加一個虛擬元素“::before”，把它放在實際元素的底下，給它一個半透明的背景色。然后使用“z-index: -1;”來保證實際元素在虛擬元素的上方，可以讓虛擬元素背景色的半透明程度適中。

這樣，當用戶通過 tab 鍵來切換選項卡時，按鈕會發光，讓用戶更容易知道自己在哪個選項卡上。另外，這個效果還有助于提升用戶的滿意度，增強用戶體驗。