CSS 中的圓形按鈕是靠把 border-radius 設為按鈕較短邊的一半（通常寫成 border-radius: 50%）來實現的，只要按鈕的寬度與高度相等，這樣就會讓四個角收合成一個圓形。全等的正方形區域搭配完全圓角，一定會產生完美的圓形；同樣是 50% 半徑但比例較寬的矩形，則會變成藥丸形。顏色、字型、內距與陰影，接著決定圓形按鈕給人的感覺是沉穩還是搶眼，但真正決定輪廓的幾何選擇是 border-radius。手動調整這些數值，通常代表要先寫一個簡單的 HTML 測試頁面，再重新整理、反覆修改樣式表，直到比例看起來對了為止。CSS Button Generator把這整個循環變成一個單一的視覺工作台，把每一項常見的按鈕樣式決定都放在即時預覽旁邊，讓你不用在多個檔案之間切換，就能調出一個圓形按鈕。
border-radius 如何塑造出圓形按鈕
border-radius 是唯一能把矩形變成圓形的屬性。當你把它設為像 12px 這樣的長度值時，每個角都會沿著一個半徑等於該長度的弧線變圓。當你把它設為像 50% 這樣的百分比時，瀏覽器會依照方塊對應的邊長計算半徑，於是正方形按鈕就會變成圓形。如果矩形的寬度大於高度，50% 就只會依高度的一半來取圓角，產生的會是藥丸形而不是圓盤。
CSS 規範把 border-radius 視為共用一個簡寫的四個獨立角，但真正的圓形需要四個角都收斂到同一條弧線上。只設定一或兩個角，會產生葉片形或淚滴形，而不是按鈕形狀。讓每個角都套用相同的弧線，才是造就那種不論直徑大小、肉眼都會判讀成「圓形按鈕」的圓潤輪廓的關鍵。
設計時值得記住的三個實用半徑範圍：
- 0：完全沒有圓角的硬邊矩形
- 像 4px 到 12px 這樣的小長度值：常用於表單控制項的柔和圓角形狀
- 正方形方塊搭配 50%：完美的圓形
- 較寬矩形搭配 50%：藥丸形
圓形按鈕背後的 CSS 屬性
光靠顏色與形狀，很少能撐起介面中的一個按鈕。這個產生器會輸出一組協調的標準 CSS 屬性，共同控制背景、文字、邊框、幾何形狀、字體、立體感與游標。
| 屬性 | 控制項目 | 常見範圍 |
|---|---|---|
| background-color | 按鈕的填色 | 六位數十六進位色碼 |
| color | 文字顏色 | 六位數十六進位色碼 |
| border | 在淺色背景上定義邊緣 | 寬度加上十六進位色碼 |
| border-radius | 圓角程度（決定圓形的關鍵） | 0 到 50% 或以上 |
| padding | 高度與水平留白空間 | px 單位 |
| font-size | 標籤大小與強調程度 | px 單位 |
| font-weight | 數字或具名的字重 | 100 到 900 |
| box-shadow | 細微的立體感 | 位移加上模糊 |
| cursor | 指標回饋 | pointer |
這九項屬性全部來自CSS Backgrounds and Borders specification，並在MDN's backgrounds and borders guide中有詳盡的說明文件。這個產生器把屬性順序標準化，讓輸出結果讀起來有可預期的規律，間距類屬性排在字體排版之前，而圓角則排在邊框與內距之間。
間距是圓形按鈕中最容易被忽略的部分。垂直內距控制的是直徑，水平內距控制的則是標籤在圓形內部能佔用多少空間。像「OK」這樣的短標籤，適合搭配較寬裕的水平內距，讓文字不會緊貼邊緣；單一圖示字元則需要較少的水平內距。因為這個產生器會為每個數值輸入設定上下限，即使你把滑桿拉到極限，預覽畫面仍然可用，這樣可以避免半徑在正方形方塊上超過 50% 而產生橢圓形。
用產生器打造一個圓形按鈕
CSS Button Generator 把上述的樣式決定，全部整合成一個帶有真實 HTML 按鈕預覽的單一表單。
- 使用六位數十六進位數值選擇背景色、文字色與邊框色，讓產生器能在序列化 CSS 之前先驗證每一個色值。
- 設定邊框寬度、圓角半徑、垂直內距、水平內距、字體大小、字重，以及三個陰影數值（水平位移、垂直位移、模糊；模糊值須保持非負）。
- 在桌面與行動裝置寬度下檢查即時預覽，確認圓形維持圓形，且標籤仍然能容納在直徑之內。
- 複製 .button 類別，將它重新命名以符合你的專案，並在你自己的樣式表中加入 hover、focus-visible、active 與 disabled 規則。
預覽按鈕的 type 是 button，所以不會意外提交周圍的表單，而且所有計算都在目前的瀏覽器分頁中完成。設計數值完全不會被上傳，因此你可以在確定最終類別名稱之前自由實驗。
圓角以外的圓形按鈕調校
一旦圓角調好之後，接下來要決定的就是間距、字體、顏色、邊框與陰影。每一項都會改變按鈕給人的感知角色。
| 決定 | 對圓形按鈕的視覺效果 |
|---|---|
| 較大的垂直內距 | 直徑變大，觀感更沉穩 |
| 較大的水平內距 | 短標籤周圍有更多留白空間 |
| 較重的字重 | 在相同大小下強調感更強 |
| 較粗的邊框 | 在淺色或照片背景上邊緣更清晰 |
| 模糊值較高的陰影 | 柔和的浮起感，語氣更友善 |
| 負值的陰影位移 | 陰影移到圓形的上方或左側 |
background-color 與文字之間的色彩對比，並不會由產生器自動計算，因此預覽畫面中看起來可以接受的搭配，在不同的顯示器上，或在強制色彩模式下，仍可能不合格。請針對預設狀態，以及之後加入的每一種互動狀態，另外使用對比檢查工具。
邊框在圓形按鈕上格外重要，因為彎曲的邊緣比矩形更容易透出淺色背景的溢色。1px 到 2px、色調接近背景色的邊框，能讓輪廓變得平滑，又不會讓人特別注意到邊緣。這個產生器輸出的陰影使用的是收斂的半透明黑色，讓它維持在低調的立體提示，而不是厚重的陰影，這樣即使在很小的直徑下，圓形仍然清楚可辨。
在每種寬度下都維持圓形的圓潤
只有在寬度與高度維持相等時，圓形才會保持圓形。響應式版面配置會同時改變兩者，所以單一宣告很少能在每個中斷點都存活下來。有兩種實用做法能有所幫助：
- 把圓形按鈕包在一個固定長寬比的容器中，讓容器負責縮放，這樣按鈕本身就永遠不會被拉伸。
- 在按鈕上使用正方形長寬比並搭配內距來控制直徑，再把按鈕放進 flex 或 grid 軌道中。
如果你需要一個能在流動容器中存活的圓形按鈕，responsive CSS button guide會更深入說明等寬軌道與置中的圖示標籤。這個產生器最適合用來先鎖定一個按鈕的外觀，再把那個類別複製出來，作為設計中主要、次要與低調按鈕變體的基礎。
縮放、瀏覽器字體大小與翻譯後的標籤，都會改變圓形內部的寬度。請用你上線的每種語言中最長的實際標籤來測試結果，包括圖示，因為圖示字符仍然會佔用相同的水平空間。能容納一個字元的圓形，未必能容納兩個疊在一起的圖示，而翻譯後的按鈕文字，長度也可能不知不覺超過原本的英文版本。
圓形按鈕的互動狀態
產生器只會輸出一個基礎類別。hover、focus-visible、active、loading 與 disabled 狀態取決於你的產品語意，因此工具刻意不包含這些狀態。請在複製之後自行加入，並力求每種狀態的行為都清楚明確。
- Hover 可以稍微改變 background-color，或把陰影提升一個層級。
- Active 可以縮小陰影、把按鈕下壓 1px，或加深背景色。
- Focus-visible 必須保留可見的外框；移除預設外框卻不加以取代，會讓鍵盤導覽變得看不見。
- Disabled 應該傳達出不可用的狀態，而不只是依賴不透明度，因為降低不透明度在強制色彩背景下可能無法通過對比要求。
產生器輸出的九項屬性全部都是標準 CSS，因此擴充後的樣式表仍然不需要框架、圖片素材或 JavaScript 執行環境。複製出來的選擇器刻意保持通用，因此重新命名它，或把它限定在某個父類別之下，是避免在不同元件之間互相衝突最安全的做法。
圓形按鈕的無障礙與對比
不論圓角看起來多麼優雅，圓形按鈕仍然必須符合最小的觸控尺寸，通常是 44 乘以 44 CSS 像素。單靠垂直內距，很少能讓圓形的可觸控區域達到那個目標，因此請在周圍的版面配置中，把內距與最小寬度、高度結合起來。內距定義的是看得見的按鈕，而可觸控區域決定的才是點按是否真的有效。
文字對比是讀者需要自行把關的部分。在校正過的顯示器上看起來清楚的組合，對於視力較弱的使用者，或在強制色彩模式下，仍然可能不合格。請用專門的對比工具，驗證預設、hover、active、disabled 與 focus 狀態，並確保在你上線的每一種背景下，都保留一個清楚可見的焦點指示。產生器中的預覽畫面只是視覺判斷的起點，不能取代無障礙驗證。
產生器不會儲存或上傳任何設計數值，因此你可以在探索過程中自由實驗，只把最終的樣式表提交進你的專案。讓主要、次要、危險與低調按鈕保持一致，比讓單一一個圓形按鈕在視覺上極盡精緻更重要，因此如果專案已經有既有的設計權杖，請優先從那裡開始。
如需更深入的說明，請參閱How to Check ANSI Color Codes After You Generate Them。