我們常在網(wǎng)頁中看到各種各樣的按鈕，但是有時候原生的按鈕樣式并不能滿足我們的設(shè)計需求，那么怎么做呢？這時候就要用到 CSS 自定義按鈕效果了。本文將介紹一些實用的 CSS 自定義按鈕效果。 首先，我們來看一個基礎(chǔ)的 CSS 自定義按鈕：

.button {
padding: 10px 20px;
background-color: #0066cc;
color: #fff;
border: none;
border-radius: 3px;
box-shadow: none;
}

這個按鈕只是基礎(chǔ)樣式，并沒有任何的鼠標(biāo)交互效果，我們需要為它添加鼠標(biāo)懸浮、激活效果等交互效果，常用的效果有以下幾種： 1. 鼠標(biāo)懸浮效果 當(dāng)鼠標(biāo)懸浮在按鈕上時，我們可以把按鈕的背景顏色或者字體顏色等屬性進行改變，我們可以這樣實現(xiàn)：

.button:hover {
background-color: #0052a3;
cursor: pointer;
}

2. 鼠標(biāo)激活效果 當(dāng)用戶點擊按鈕時，我們需要顯示出按鈕被點擊的效果，一般的做法是讓按鈕稍微往下移動一下，這樣可以讓用戶感覺到按鈕被按下了，我們可以這樣寫：

.button:active {
transform: translateY(1px);
}

3. 漸變效果 我們可以把按鈕的背景色設(shè)為漸變色，這樣可以讓按鈕看起來更為現(xiàn)代化。我們可以這樣寫：

.button {
background-color: linear-gradient(to bottom, #0066cc, #003699);
}

4. 3D效果 3D效果能夠讓按鈕看起來更為立體化，我們可以這樣寫：

.button {
transform: translateZ(0);
transition: all 0.2s ease-in-out;
}
.button:hover, .button:focus, .button:active {
transform: translateZ(-6px);
box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

總之，CSS 自定義按鈕效果可以讓我們的網(wǎng)站看起來更為美觀切實用，值得我們?nèi)W(xué)習(xí)和實踐。