CSS3實現按鈕點擊效果

在網頁設計中，按鈕是不可或缺的元素。為了在用戶點擊按鈕時給予明確的反饋，需要使用CSS3來實現按鈕點擊效果。下面介紹如何使用CSS3來實現按鈕點擊效果。

首先，我們需要用HTML創建一個按鈕：

<button class="button">點擊我</button>

接下來，我們使用CSS3來添加按鈕點擊效果。使用:hover偽類來實現鼠標懸停時的效果，使用:active偽類來實現按鈕被點擊時的效果。

.button {
color: #fff;
background-color: #007bff;
border-color: #007bff;
padding: .375rem .75rem;
border-radius: .25rem;
transition: background-color .2s ease-in-out, 
border-color .2s ease-in-out, 
box-shadow .2s ease-in-out;
}
.button:hover {
background-color: #0069d9;
border-color: #0062cc;
}
.button:active {
background-color: #0062cc;
border-color: #005cbf;
box-shadow: inset 0 1px 2px rgba(0,0,0,.125),
0 1px 0 rgba(0,0,0,.15);
}

在這個例子中，我們使用了transition屬性來實現過渡效果。這樣就可以在鼠標懸停或按鈕點擊時有一個平滑的過渡效果。

總結：通過使用CSS3，我們可以輕松地實現按鈕點擊效果。這不僅為網頁設計提供了更加豐富的視覺效果，也能夠提高用戶體驗。