你有沒有看過那些「邊緣像彩虹在轉、外面還帶一圈柔光」的按鈕，心想：這一定要很複雜吧？
其實不用。只要一個 HTML 檔、一小段 CSS，就能做出這種效果。這篇會把完整範例貼給你，還教你四個關鍵：@property --angle、彩虹邊的 conic-gradient、做出光暈的 blur，以及讓它轉起來的 keyframes spin。
適合剛開始碰前端的你：先貼上、跑起來，再只改一處看看變化。有興趣之後，也可以把這顆按鈕放進自己的小專案或課程示範頁。
你會做出什麼？
- 圓角膠囊形按鈕
- 邊緣一圈會旋轉的彩虹色
- 外圍一層柔和的彩虹光暈
- 純 CSS，不必 JavaScript
瀏覽器方面：@property 與用自訂屬性驅動 conic-gradient 的動畫，在較新的 Chrome、Edge、Safari 通常表現良好。若某台舊裝置看起來沒動，先換新一點的瀏覽器試一次即可——先確認效果，再談相容細節。
準備什麼？
- 任何文字編輯器（VS Code、甚至記事本都可以）
- 一個現代瀏覽器
不需要先裝 Node、也不需要建置工具。這就是單檔 HTML 的好處。
完整範例（直接存成 .html 開啟）
把下面整段存成例如 rainbow-glow-button.html，用瀏覽器打開就能看：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>彩虹光暈按鈕</title>
<style>
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
body {
margin: 0;
height: 100vh;
display: grid;
place-items: center;
background: #ffffff;
}
.ai-btn {
--rainbow: conic-gradient(
from var(--angle),
#4f8cff, #b06ab3, #ff5f6d,
#ff9f43, #3ccf6e, #4f8cff
);
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 18px 28px 18px 40px;
font: 32px sans-serif;
color: #555555;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
var(--rainbow) border-box;
border-radius: 999px;
border: 3px solid transparent;
animation: spin 3s linear infinite;
cursor: pointer;
}
.ai-btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--rainbow);
filter: blur(16px);
z-index: -1;
}
@keyframes spin {
from { --angle: 0deg; }
to { --angle: 360deg; }
}
</style>
</head>
<body>
<button class="ai-btn" type="button">
Thinking...
</button>
</body>
</html>頁面結構其實很短
HTML 本體只有一顆 <button class="ai-btn">，裡面是文字「Thinking」。真正的魔法幾乎都在 <style> 裡。先認得「按鈕本體」與「樣式區」兩塊，之後改文案或改色會輕鬆很多。
讀碼地圖：四個關鍵
1. @property –angle：告訴瀏覽器「這個角度可以動畫」
一般 CSS 變數（custom property）可以存數字，但瀏覽器不一定知道「從 0deg 變到 360deg」該怎麼平滑過渡。@property 就是正式登記這個變數：
syntax: "<angle>"：這是角度inherits: false：不往下繼承initial-value: 0deg：一開始是 0 度
有了這一步，後面的 keyframes 才能穩穩地轉動 --angle。可以把它想成：先跟瀏覽器說清楚「這格是角度計」，它才願意幫你一格一格轉。
2. conic-gradient：用圓錐漸層畫出彩虹邊
.ai-btn 裡的 --rainbow 是一圈 conic-gradient，起點用 from var(--angle)。角度一變，整圈彩虹的「起點」就跟著轉——看起來就像邊緣在旋轉。色碼由藍、紫、紅、橙、綠再接回藍，形成封閉的一圈。
邊框怎麼只顯示彩虹、中間仍是白底？技巧是雙重背景：
- 內層：
linear-gradient(#ffffff, #ffffff) padding-box（內容區填白） - 外層：
var(--rainbow) border-box（邊框盒用彩虹） - 再配
border: 3px solid transparent
透明邊框讓彩虹從「邊框區域」透出來，中間保持乾淨。border-radius: 999px 則讓整顆按鈕變成膠囊形。
3. ::before ＋ blur：外圍那圈柔光
偽元素 ::before 鋪滿按鈕（inset: 0）、同樣用 --rainbow 當背景，再加上 filter: blur(16px)，並放到 z-index: -1。等於在按鈕後面放一塊「糊掉的彩虹」，看起來就像光暈。
想光暈更強，可以把 16px 加大；想更內斂，就改小一點。光暈會跟著 --angle 一起轉，因為它用的是同一個 --rainbow。
4. @keyframes spin：讓角度從 0 轉到 360
@keyframes spin {
from { --angle: 0deg; }
to { --angle: 360deg; }
}按鈕本身設了 animation: spin 3s linear infinite——每 3 秒轉一圈、速度均勻、無限循環。想轉快一點，改成 2s；想慢一點，改成 5s 試試。linear 代表轉速平均，不會忽快忽慢。
只改一處（建議動手）
跑通之後，每次只改一樣，比較容易對上「哪一行負責什麼」：
- 改按鈕文字 Thinking 成你的文案（例如「開始學習」）
- 改 animation 的秒數，感受轉速
- 改
blur(16px)，感受光暈粗細 - 改
--rainbow裡幾顆色碼，換成你喜歡的品牌色 - 改文字顏色
#555555，或字級32px，讓它更貼合你的頁面
改完存檔、重新整理頁面即可。如果畫面沒變，確認你開的是剛存的那個檔，而不是另一個副本。
常見問題
Q：我只看到白按鈕，彩虹沒轉？
先確認瀏覽器版本是否偏舊；再檢查有沒有完整貼上 @property 與 @keyframes 兩段。少了登記角度，動畫往往動不起來。
Q：一定要白色背景嗎？
示範頁的 body 設成白色，是為了讓光暈更明顯。你可以把背景改成淺灰或深色再觀察——深色底上，光暈通常更搶眼。
Q：可以做成連結而不是按鈕嗎？
可以。把 <button> 改成 <a class="ai-btn" href="...">，並補上合適的無障礙文字即可。樣式 class 名稱可沿用。
小提醒
- 這是視覺效果示範。正式網站還要考慮對比度、鍵盤焦點樣式，以及動畫是否過強。若使用者偏好減少動態，可用
prefers-reduced-motion關掉或放慢動畫（之後加也無妨）。 - 圖示用的是內嵌 SVG 箭頭，可刪可換；不影響彩虹邊與光暈原理。
結語
彩虹邊＋柔光，聽起來很華麗，拆開之後就是：登記可動畫的角度 → 圓錐漸層當邊 → 模糊一層當光 → 關鍵幀讓角度轉起來。
今天只要做到「貼上就能轉」就很好。有興趣再玩，可以把這顆按鈕嵌進自己的示範頁，或改成你課程／作品的 CTA。慢慢來，動手試一次，你就會更有感覺 ^_^