重點整理
UI Buttons（ui-buttons.web.app）是免費的 CSS 動態按鈕素材網站，2026 年 10 月實際展開到底共有 100 款按鈕，包含霓虹、滑動、搖晃、3D 旋轉、擬物（Neumorphism）等效果。用法只有三步：打開網站、點選喜歡的按鈕、在詳細頁切換 html／css 複製程式碼。網站沒有另外標示授權條款，用在商業專案前建議自己再確認。
想讓網站的「立即諮詢」「加入購物車」按鈕多一點動態效果，但自己寫 CSS 動畫又很花時間？UI Buttons 把上百種常見的按鈕動畫整理成一頁，滑鼠移上去就能預覽效果，喜歡的直接複製 HTML 和 CSS。這篇會說明 UI Buttons 有哪些樣式、怎麼複製程式碼，以及貼到 WordPress 時要注意的地方。
UI Buttons 是什麼？
UI Buttons 是由開發者 @eludadev 製作的免費按鈕素材網站，專門收集純 CSS 寫成的動態按鈕。首頁一開始只顯示一部分，按最下方的「Load more」可以繼續展開，全部展開後共 100 款。效果從變色、滑動、邊框描線、文字跳動、故障（Glitch）到 3D 旋轉都有，每一款都有名稱，例如 Neon、Slide Reveal、3D Rotate Right、Neumorphism。
UI Buttons 使用教學
步驟一：打開 UI Buttons 網站
進入 ui-buttons.web.app，不需要註冊或登入就能瀏覽全部樣式。
步驟二：瀏覽並挑選喜歡的動態按鈕
把滑鼠移到按鈕上就會播放動畫，可以直接比較效果。想看更多樣式，捲到最下方按「Load more」。
步驟三：點進按鈕頁面，複製 HTML 或 CSS
點選按鈕後會進入該款的詳細頁（例如 Neon 的網址是 ui-buttons.web.app/neon），上方有一段效果說明，下方可以切換「html」與「css」兩個分頁，分別複製結構和樣式。每款按鈕都有自己的 class 名稱（例如 .btn-76），貼到網站時兩段要一起使用。
複製的按鈕怎麼放到 WordPress？
- CSS：貼到「外觀 → 自訂 → 額外 CSS」，或子主題的樣式表。區塊佈景主題可以放在「外觀 → 編輯器 → 樣式」的額外 CSS。
- HTML：在區塊編輯器加入「自訂 HTML」區塊貼上，再把按鈕文字改成自己的文案；要連到其他頁面時，把
<button>改成<a href="網址">，並確認 CSS 的選擇器仍然套得到。 - 注意樣式衝突：部分按鈕的 CSS 會一併重設
box-sizing、字型等屬性，貼上前先看過，避免影響到網站其他元素。
常見問題
UI Buttons 有多少種按鈕樣式？
2026 年 10 月實際展開首頁到底共有 100 款。網站仍可能新增或調整樣式，以實際畫面為準。
UI Buttons 的按鈕可以商用嗎？
網站本身沒有另外標示授權條款，無法確定是否可商用。用在客戶網站或商業專案前，建議先聯絡作者確認，或改用有明確開源授權的按鈕素材。
不會寫程式也能用 UI Buttons 嗎？
可以，只要會複製貼上：CSS 貼到額外 CSS、HTML 貼到自訂 HTML 區塊就能顯示。要改顏色或文字，再到 CSS 裡找對應的色碼修改即可。
結語
UI Buttons 把 100 款 CSS 動態按鈕集中在一頁，滑鼠移過去就能預覽，點進去就能複製 HTML 與 CSS，很適合想替網站按鈕加一點變化、又不想從頭寫動畫的人。設計師可以拿來找靈感，工程師可以直接參考寫法；用在商業網站前，記得先確認授權。