CSS3在前端開發中起到了非常重要的作用，它可以讓網站的外觀變得更加美觀，讓用戶有更好的體驗。其中最常用的特性就是漸變效果。本文就來詳細介紹如何使用CSS3實現點擊按鈕漸變的效果。

// a標簽樣式
a {
display: inline-block;
padding: .7em 1.5em;
background-color: #dd004b;
color: #fff;
border-radius: .3em;
}
// a:hover 和 a:active 樣式
a:hover,
a:active {
background-color: #de2187;
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
}

上面的代碼中，我們為a標簽設置了默認樣式，然后通過:hover和:active選擇器來設置鼠標懸停和點擊時的樣式。

其中，background-color可以設置背景色，而background-image則可以設置背景圖片，在本例中，我們使用了CSS3新增的linear-gradient函數，通過它可以生成一個漸變背景。函數中的參數分別表示漸變的方向和每一個顏色的位置和顏色值。

這里還有一些需要注意的地方。首先，為了配合漸變效果，我們還設置了透明度等。其次，在設置漸變函數的位置和顏色時，需要按照一定的格式來使用，否則漸變效果將無法正常顯示。

最后，我們需要注意的是，雖然漸變效果很好看，但在一些老舊的瀏覽器中可能無法正常顯示。所以在使用時需要提前做好兼容性處理，以確保網站在各種設備和瀏覽器上都能夠正常顯示。