CSS按鈕點(diǎn)擊特效可以通過(guò)添加CSS過(guò)渡或動(dòng)畫(huà)來(lái)實(shí)現(xiàn)。通過(guò)改變按鈕樣式或添加其他元素效果，可以創(chuàng)建出很多不同的點(diǎn)擊特效。下面演示一些CSS按鈕點(diǎn)擊特效。

.button {
padding: 20px 50px;
background-color: #008CBA;
color: white;
border-radius: 5px;
transition: 0.4s;
}
.button:hover {
background-color: #004a64;
}
.button:active {
background-color: #002e3d;
transform: translateY(3px);
}

在上面的代碼中，我們?yōu)榘粹o添加了一個(gè)過(guò)渡效果，當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，背景色從亮藍(lán)色變成深藍(lán)色，過(guò)渡時(shí)間為0.4秒；當(dāng)按鈕被點(diǎn)擊時(shí)，背景顏色變?yōu)楦畹乃{(lán)色，并向下移動(dòng)3像素。

.button {
padding: 20px 50px;
background-color: #008CBA;
color: white;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.button:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #004a64;
z-index: -1;
transition: transform 0.4s ease-out;
transform: scaleX(0);
transform-origin: 0 50%;
}
.button:hover:after {
transform: scaleX(1);
}

在上面的代碼中，我們使用偽類:after來(lái)創(chuàng)建一個(gè)覆蓋在按鈕上的元素。當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，這個(gè)元素的 scaleX（橫向縮放）屬性從0變成1，通過(guò)transition屬性使過(guò)渡更加平滑。

.button {
padding: 20px 50px;
background-color: #008CBA;
color: white;
border-radius: 5px;
position: relative;
cursor: pointer;
overflow: hidden;
user-select: none;
}
.button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 100%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.4);
opacity: 0;
pointer-events: none;
}
.button:active::before {
width: 220px;
height: 220px;
opacity: 1;
transition: all 0.4s linear;
}

在上面的代碼中，我們?cè)黾恿艘粋€(gè)圓形的白色光環(huán)。光環(huán)在按鈕正中央，并且在按鈕被點(diǎn)擊時(shí)，光環(huán)的半徑急速擴(kuò)大，達(dá)到放大的光效的效果。

這些是一些CSS按鈕點(diǎn)擊特效的示例。有了這些想法，你可以嘗試自己創(chuàng)建自己的CSS按鈕效果。