CSS是一種強(qiáng)大的樣式表語(yǔ)言，可以實(shí)現(xiàn)各種酷炫的效果，比如按鈕的點(diǎn)擊效果。在這里，我們將介紹如何利用CSS來(lái)實(shí)現(xiàn)按鈕的點(diǎn)擊效果。

.button {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #2196F3;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 1rem;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.25s ease-out;
}
.button:hover {
background-color: #1976D2;
}
.button:active {
background-color: #1565C0;
}

以上代碼中，我們首先定義了一個(gè).button類，這個(gè)類應(yīng)用到按鈕元素上。我們使用display屬性將按鈕設(shè)置為行內(nèi)塊元素，然后設(shè)置padding、background-color、color、text-align等屬性來(lái)美化按鈕。最重要的是我們要定義cursor屬性為pointer，以便將鼠標(biāo)光標(biāo)設(shè)置為手形。

接著，我們使用:hover偽類來(lái)實(shí)現(xiàn)按鈕的鼠標(biāo)懸浮效果。當(dāng)鼠標(biāo)懸浮到按鈕上時(shí)，我們將按鈕的背景顏色設(shè)置為#1976D2。

最后，我們使用:active偽類來(lái)實(shí)現(xiàn)按鈕的點(diǎn)擊效果。當(dāng)按鈕被點(diǎn)擊時(shí)，我們將按鈕的背景顏色設(shè)置為#1565C0。

通過(guò)以上CSS代碼，我們可以輕松地實(shí)現(xiàn)按鈕的點(diǎn)擊效果，為用戶提供更好的交互體驗(yàn)。