最初發佈於webdeasy.de 。
➡️更新，提供更多可用按鈕（點擊）！ 🚀
按鈕不僅有利於可用性，而且還是網站極為重要的設計元素。因此，這裡收集了一些最好的 CSS 按鈕！
無論是主頁上粗大的按鈕還是頁腳中小而謹慎的按鈕，對於網站上的使用者流程來說，按鈕都是非常重要的設計元素。對於公司網站來說，通常會使用更謹慎的設計，而創意產業則使用更引人注目和「奇怪」的CSS按鈕。讓所有行業得到平等的服務，你會在這裡發現許多不同的風格和組合。
我和許多其他 Web 開發人員/設計師也對懸停或焦點動畫設定了很高的價值，這就是為什麼以下所有按鈕都會帶來漂亮的動畫。但現在我們直接開始！
所示筆已獲得麻省理工學院許可。您可以在Codepen 部落格上找到有關您自己使用的更多資訊。
#1 懸停發光效果
{% codepen https://codepen.io/twhite96/pen/rggjXp %}
新增一名作者
編碼方式：HTML、CSS；
#2 圓形按鈕
{% codepen https://codepen.io/twhite96/pen/zBZwOP %}
新增一名作者
編碼方式：HTML、CSS (SCSS)；
#3 3D 觸摸
{% codepen https://codepen.io/twhite96/pen/ojhCp %}
新增一名作者
編碼方式：HTML、CSS；
#4 圖示按鈕
{% codepen https://codepen.io/twhite96/pen/KLbwJw %}
作者：安德里亞·馬塞利
編碼方式：HTML、CSS；
#5 斑點按鈕
{% codepen https://codepen.io/twhite96/pen/BeemVX %}
作者：希拉蕊
編碼方式：HTML、CSS (SCSS)；
#6 細紐扣
{% codepen https://codepen.io/twhite96/pen/oRRjPP %}
作者：納塔莉亞‧雷舍特尼科娃
編碼方式：HTML、CSS；
#7 引導按鈕
{% codepen https://codepen.io/twhite96/pen/wbZXYR %}
作者: dew31794
編碼格式：HTML、CSS (SCSS)、JS；
#8 圓形脈衝按鈕
{% codepen https://codepen.io/twhite96/pen/NVJzQW %}
作者：拉吉·卡邁勒
編碼方式：HTML、CSS (SCSS)；
#9 CSS 泡棉按鈕
{% codepen https://codepen.io/twhite96/pen/XwGENz %}
作者：於爾根‧萊斯特
編碼格式：HTML (Haml)、CSS (SCSS)；
#10 按鈕編號 045
{% codepen https://codepen.io/twhite96/pen/xNBExN %}
作者：維托爾·西凱拉
編碼方式：HTML、CSS；
#11 沖水鈕
{% codepen https://codepen.io/twhite96/pen/joXzOw %}
新增一名作者
編碼方式：HTML、CSS；
#12 按鈕概念
{% codepen https://codepen.io/twhite96/pen/Bevpxd %}
作者：夏姆
編碼格式：HTML、CSS (SCSS)、JS (CoffeeScript)；
#13 切片按鈕
{% codepen https://codepen.io/twhite96/pen/NpwdGv %}
作者：莎拉
編碼方式：HTML、CSS；
#14 更精美的圖示按鈕
{% codepen https://codepen.io/twhite96/pen/WoJGRK %}
作者：伊尚‧薩克塞納
編碼格式：HTML (Pug)、CSS (SCSS)；
#15 按鈕變化
{% codepen https://codepen.io/twhite96/pen/WEXwMO %}
新增一名作者
編碼方式：HTML、CSS；
#16 簡單按鈕
{% codepen https://codepen.io/twhite96/pen/YgJGMX %}
作者：蒂貝裡烏·拉杜西亞
編碼方式：HTML、CSS (SCSS)；
#17 按鈕翻轉
{% codepen https://codepen.io/twhite96/pen/NBwNZa %}
作者：亞歷克斯摩爾
編碼方式：HTML、CSS (SCSS)；
#18 向右滑動按鈕
{% codepen https://codepen.io/twhite96/pen/brryVq %}
新增一名作者
編碼方式：HTML、CSS；
#19 精美按鈕
{% codepen https://codepen.io/twhite96/pen/ZMxQJp %}
作者：亞歷山大·多·維爾
編碼方式：HTML、CSS、JS；
#20 翻蓋按鈕
{% codepen https://codepen.io/twhite96/pen/Areng %}
作者：維琳娜·V·維萊娃
編碼格式：HTML、CSS (SCSS)、JS；
#21 按鈕懸停效果集合
{% codepen https://codepen.io/davidicus/pen/emgQKJ %}
作者：大衛康納
編碼方式：HTML、CSS (SCSS)；
#22 CSS 按鈕效果：動畫邊框和發光
{% codepen https://codepen.io/AnthonyBmm/pen/poooJmO %}
作者：安東尼
編碼方式：HTML、CSS；
#23 CSS 按鈕懸停
{% codepen https://codepen.io/folaad/pen/YvmRpz %}
作者：伊姆蘭‧帕德斯；
編碼方式：HTML、CSS；
#24 仍在視野中
{% codepen https://codepen.io/Alexb98/pen/XWrqpxB %}
作者：亞歷克斯‧博丁；
編碼方式：HTML、CSS；
#25 環形指示器的純 CSS 按鈕
{% codepen https://codepen.io/mccombsc/pen/ZEzxWPy %}
作者：科爾‧麥庫姆斯；
編碼方式：HTML、CSS；
#26 按鈕懸停效果
{% codepen https://codepen.io/kjbrum/pen/wBBLXx %}
作者：凱爾‧維尼；
編碼格式：HTML、CSS (SCSS)、JS；
#27 黏糊糊的菜單
{% codepen https://codepen.io/lbebber/pen/LELBEo %}
作者：盧卡‧貝伯；
編碼方式：HTML、CSS (SCSS)；
#28 SVG CSS3 選單/漢堡按鈕
{% codepen https://codepen.io/kylehenwood/pen/Alayb %}
作者：凱爾‧亨伍德；
編碼格式：HTML、CSS (SCSS)、JS；
#29 按鈕氣泡效果
{% codepen https://codepen.io/Grsmto/pen/RPQPPB %}
作者：阿德里安‧格拉斯姆托；
編碼格式：HTML、CSS (SCSS)、JS；
#30 動畫提交按鈕
{% codepen https://codepen.io/valentingalmand/pen/MYMZZK %}
作者：瓦倫丁‧加爾曼德；
編碼格式：HTML、CSS (SCSS)、JS；
#31 誰不喜歡有趣的按鈕？
{% codepen https://codepen.io/derekmorash/pen/XddZJY %}
作者：德里克·莫拉什；
編碼方式：HTML、CSS (SCSS)；
#32 另一面
{% codepen https://codepen.io/hakimel/pen/ZYRgwB %}
作者：哈基姆·埃爾·哈塔布；
編碼格式：HTML、CSS (SCSS)、JS；
#33 柔軟的切換鈕
{% codepen https://codepen.io/soulwire/pen/bKens %}
作者：賈斯汀溫德爾；
編碼方式：HTML、CSS (Sass)；
#34 CSS 按鈕動畫
{% codepen https://codepen.io/sashatran/pen/KaLqKR %}
作者：薩沙；
編碼格式：HTML (Pug)、CSS (SCSS)、JS；
#35 提交鈕 (Anime.js)
{% codepen https://codepen.io/andrewmillen/pen/MoKLob %}
作者：安德魯‧米倫；
編碼格式：HTML、CSS (SCSS)、JS（jQuery 和 Anime.js）；
…
➡️查看我博客上的其餘按鈕❤️
原文出處：https://dev.to/webdeasy/top-20-css-buttons-animations-f41
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式