這10個按鈕，把 CSS HOVER 的創意發揮到極致了

Sponsor

CSS hover 樣式很簡單，但是想創造出有意思、實用、有創意性的特效是很考驗設計師的創意能力，所以設計達人每隔一段時間都會分享一些與鼠標點擊、懸停的相關特效，以便大家獲得更好的創造靈感。

今天我們整理了10組網頁按鈕的點擊與懸停效果，每組都有不同的特色以及創意性，下面達人將特效錄制成 GIF 動圖，方便大家在線觀看，若想看真實源代碼的，可以點擊「查看演示」的鏈接進行查看。

空間感很強的按鈕特效

當你的鼠標在按鈕上左右晃動時，按鈕會自動帶有一些3D旋轉的空間感，看起來很有科技感啊，該按鈕使用 CSS 和 JS 實現。

查看演示: https://codepen.io/electerious/pen/rroqdL

點擊漣漪效果

這是 Material Design 的按鈕點擊風格，點擊時帶有一個波紋漣漪效果，而且還有一個特色就是，按鈕使用了漸變顏色，讓按鈕更加形象突出。

查看演示: https://codepen.io/tomma5o/pen/zwyKya

泡沫按鈕效果

當鼠標經過按鈕時，按鈕會出現像「分離」的效果，很好看，需要 SVG 與 JS 結合才能實現。

查看演示：https://codepen.io/Grsmto/pen/RPQPPB

遮罩效果按鈕

查看演示：https://codepen.io/pizza3/pen/qmerBv

線按鈕樣式動畫

動畫線條是使用 background-image: repeating-linear-gradient()實現的，再通過動畫@keyframes和 background-position屬性來讓線條動起來。

查看演示：https://codepen.io/Zeindelf/pen/vZbyEg

Weeeeee

這個動畫錄制時出現些問題，建議大家直接看在線演示。

查看演示：https://codepen.io/equinusocio/pen/yYJeXz

Shiney 按鈕

這種按鈕相當不少用戶看過，實現方法是半透明的高光樣式，然后通過@keyframes和transform 旋轉45度來實現。

查看演示：https://codepen.io/bigglesrocks/pen/RPzNjw

斑點按鈕

查看演示：https://codepen.io/suez/pen/aOgMxy

會傾斜的按鈕

當鼠標向左點擊的時候，按鈕會向左邊微斜，點擊右邊會就向邊傾斜……

查看演示：https://codepen.io/pouretrebelle/pen/zwRyqK

電波按鈕

鼠標懸停到按鈕上時，按鈕像很不穩定一樣，隨時消失……

查看演示：https://codepen.io/ktaftaf/pen/pbLOWg

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。