在現(xiàn)代 Web 設(shè)計(jì)中，交互效果越來越重要。其中一個(gè)很常見的功能就是點(diǎn)擊效果。通過 CSS，我們可以輕松為網(wǎng)站添加漂亮的點(diǎn)擊效果。下面是一段示例代碼，展示如何實(shí)現(xiàn)一個(gè)基本的點(diǎn)擊效果：

/* 在 HTML 中添加一個(gè)觸發(fā)點(diǎn)擊效果的元素 */
<div class="button">點(diǎn)擊我！</div>
/* 進(jìn)行 CSS 樣式的修改 */
.button {
padding: 10px;
background-color: #0077cc;
color: #fff;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 添加 :hover 和 :active 狀態(tài)的樣式 */
.button:hover {
background-color: #0099ff;
}
.button:active {
background-color: #005fa3;
}

可以看到，我們給 HTML 中的 <div> 元素添加了一個(gè) class="button" 的屬性，然后在 CSS 中對(duì)它進(jìn)行了一系列樣式的修改。我們?cè)O(shè)置了 padding、背景顏色、文字顏色、邊角半徑和鼠標(biāo)指針類型等樣式，這些都是常見的按鈕樣式。

接下來，我們用 CSS 的 :hover 和 :active 偽類來添加該元素的鼠標(biāo)移入和鼠標(biāo)點(diǎn)擊時(shí)的狀態(tài)樣式。在示例代碼中，我們?cè)O(shè)置了 :hover 狀態(tài)時(shí)背景顏色變淺，而 :active 狀態(tài)時(shí)背景顏色變深。這樣，在用戶點(diǎn)擊該按鈕時(shí)，就會(huì)有一個(gè)明顯的視覺反饋。

通過這樣簡(jiǎn)單的 CSS 修改，我們就能給網(wǎng)站添加一個(gè)漂亮的點(diǎn)擊效果。如果你想在自己的網(wǎng)站上使用這種效果，可以拷貝上述代碼并進(jìn)行適當(dāng)修改，即可實(shí)現(xiàn)與示例相同的效果。