Web 按鈕點擊高亮反饋：CSS :active 偽類與 Box-Shadow 實現發光效果

CSS 實現

.btn {
    padding: 10px 20px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.btn:active {
    background: #45a049;
    box-shadow: 0 0 10px 2px rgba(76, 175, 80, 0.8); /* 發光效果 */
    transform: scale(0.98); /* 按下縮放 */
}

進階：持久高亮（當前頁面標識）

.btn.active {
    box-shadow: 0 0 15px 3px rgba(76, 175, 80, 1);
    background: #3d8b40;
}
/* JS 切換 */
document.querySelectorAll('.btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
    });
});

無 JS 方案：:target 偽類（單頁錨點）

<nav>
  <a class="btn" href="#page1">頁面1</a>
  <a class="btn" href="#page2">頁面2</a>
</nav>
<section id="page1">...</section>
<section id="page2">...</section>

/* CSS */
.btn:target { /* 被錨點指向時高亮 */ }