?今天聊聊CSS3特效對于按鈕特效細(xì)節(jié)制作過程，文末附優(yōu)化方案，讓你學(xué)得會，懂原理?。制作儲備css3基本屬性如下：

• 線性漸變：linear-gradient；

• 圖片大小設(shè)置屬性：background-size；

• 絕對定位：position: absolute;

• 偽類元素：before；

• 設(shè)置水平方向的位置：background-position-x；

• 過濾器：filter；

• 透明度：opacity；

• 過渡動畫：transition。

這里默認(rèn)是在你都掌握以上CSS屬性的前提下進行以下開發(fā)工作。

第一步創(chuàng)建HTML文件并設(shè)置body樣式和基本按鈕標(biāo)簽

在任何瀏覽器中打開剛剛新建的HTML文件。

第二步?設(shè)置按鈕基本樣式

這里按鈕用a標(biāo)簽代替的，所以設(shè)置a標(biāo)簽的基本樣式，具體屬性看下方源碼，注意這里認(rèn)為你是有基礎(chǔ)的，所以不贅述基本屬性作用。其中l(wèi)inear-gradient表示線性漸變，用于作為按鈕背景圖片使用，起始角度是90deg，共四種漸變顏色，默認(rèn)會從左向右進行顏色漸變排列，利用絕對定位把盒子居中顯示于頁面。

如下圖所示，按鈕基本樣式完成，但顏色之前沒有模糊過渡效果。原因是背景圖片默認(rèn)大小充滿父盒子，也就是撐滿a標(biāo)簽?zāi)J(rèn)寬高。

?對癥下藥，把按鈕的背景放大到400%，漸變顏色就會被放大400%，顏色之間的過渡就被放大，只能看到一種顏色或者兩種顏色了，在按鈕基礎(chǔ)樣式后面添加屬性。

效果如下圖所示。?

?第三步?增加按鈕背景動畫，讓背景圖片動起來

接著上面的css代碼繼續(xù)往下補充如下代碼，設(shè)置按鈕水平方向位置background-position-x的值在補間動畫內(nèi)，從0%到100%，0%的時候是background-position-x：0%，100%的時候是background-position-x：100%。

此時，看瀏覽器效果如下。

第四步 創(chuàng)建外圍光影效果

?這里利用偽類元素before來完成。繼續(xù)追加css代碼如下，給按鈕偽類元素before設(shè)置基本屬性，設(shè)置絕對定位居中，層級為-1，透明度是1，注意，這里的背景顏色和按鈕保持一致，順序一致，角度一致。

效果如下

可以看到偽類元素蓋住了按鈕背景，文字模糊了，此時設(shè)置偽類元素透明度為0，并添加鼠標(biāo)經(jīng)過屬性，增加偽類元素模糊程度blur（20px），動畫使用和按鈕一樣的動畫函數(shù)即可，透明度設(shè)置為0.7或者其他值都可以。

最終效果出來了，恭喜你完成css特效按鈕制作全過程。

附源碼

有疑問的地方，評論區(qū)留言。