經過一段時間的醞釀，我決定繼續開啟頭條文章的發布。

1. 將自己平常工作學習中的素材積累，分享在頭條號。既能加深記憶，又能為大家帶來分享。

2. 標題為零基礎HTML的意思很簡單，我希望讓HTML這個前端語言變成每一位網友都熟知的語言。因為它其實并不復雜，甚至可以說它就是計算機語言中的“美圖秀秀”

3. 如有想加深學習進度的小伙伴，請私信我。

廢話不說了，開始 零基礎HTML素材積累01 CSS HOVER的7個按鈕

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

今天我們整理了10組網頁按鈕的點擊與懸停效果，每組都有不同的特色以及創意性，下面達人將特效錄制成 GIF 動圖，方便大家在線觀看

查看演示: 私信九弓子：css hover （獲取源碼演示鏈接）

01、點擊漣漪效果

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

02、泡沫按鈕效果

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

泡沫按鈕效果

03、遮罩效果按鈕

遮罩效果按鈕

04、Weeeeee

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

weeee連續翻轉

05、斑點按鈕

06、會傾斜的按鈕

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

會傾斜的按鈕設計

07、電波按鈕

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

電波