以下內容為個人平日觀看CodePen上的作品
留存一些覺得不錯的網頁素材經過整理後而成
文章內容將不定期更新
本篇彙整關於「Button」的網頁素材
CSS button hover effect (hover在該按鈕上面會有動態效果)
https://codepen.io/sfoxy/pen/XpOoJe
Button (with Click and Hover effect)
http://codepen.io/rauldronca/pen/mARYEm
#1562 - Button
http://codepen.io/littlesnippets/pen/kkyXEP
toggle material (開關按鈕切換)
http://codepen.io/Guns/pen/jqeKop
Micro Interaction Button (hover時，按鈕內產生推移效果)
https://codepen.io/philhoyt/pen/VjzjjR
Just a button with waves.Js
http://codepen.io/asder/pen/rLmVRp
Button Loading Experiment (按下按鈕後會顯示圓形的載入進度條)
http://codepen.io/hugobaeta/pen/KrmoKX
angular | material circular progress fab button (按下按鈕後會開始跑圓形進度條)
http://codepen.io/mindstorm/pen/ezJZzJ
Button prompt with confirmation (按下按鈕後會彈出Yes、No的button)(共有兩種樣式)
http://codepen.io/coak/pen/kXdqWE
Fixed line-height space (Button)
http://codepen.io/gau/pen/yJmyBx
Button w/ tooltip (滑鼠移動到按鈕上方會有提示訊息 & button內顯示圖案)
http://codepen.io/fabriziocuscini/pen/kkaaOv
bwNQdQ (按下購物車的按鈕會出現相關圖片)
http://codepen.io/mike-grifin/pen/bwNQdQ
Codepen Preview (Hover to Play) (Submit button動畫)
http://codepen.io/joshbader/pen/jrWZYm
Download Animation (SVG) (一個具有下載圖示的按鈕，按下後會跑進度條)
http://codepen.io/suez/pen/rrraYb
如果這篇文章有幫助到你，想支持一下作者可以幫忙點擊側欄的「 Goolgle AdSense 」廣告 😄
如果你喜歡這篇文章可以點擊「分享」按鈕，來分享到你的網路社群
(以上文章內容如有謬誤，敬請不吝指教)
