一個「漂亮」的 CSS 按鈕，是讓背景、文字、邊框、內距、圓角、字型與陰影作為一個整體協調的物件彼此搭配，而不是預設值的堆疊;而要產生這樣的按鈕，最可靠的方法是在視覺化工作台中並排調整這些數值，而不是盲目地編輯樣式表。CSS 按鈕產生器正是把這些決策 — 顏色、間距、邊框、圓角、字級與字重，以及一個簡單的陰影 — 整合成一個精簡的表單，將同一個樣式物件套用在一個真實的 HTML 按鈕上，然後輸出一條可以直接重新命名、放入任何專案的 .button 規則，無需外部程式庫或 JavaScript 執行環境。讓一個精緻的按鈕與一個佔位符按鈕有所區別的，很少是某一個戲劇性的屬性，而是垂直與水平內距之間的平衡、標籤的字重、邊框在背景上是否真的有用，以及陰影有多麼克制。在一個與你即將上線的元素完全相同的預覽中工作，可以消除大部分猜測，因為間距與圓角在窄小的手機寬度上看起來與在寬廣的桌面版面上截然不同，而在獨立檢視時看起來還不錯的對比，仍可能在完成的頁面中對周遭表面顯得有所欠缺。
漂亮 CSS 按鈕背後的視覺決策
漂亮的 CSS 按鈕很少來自於單一強烈的風格選擇。背景色與文字色決定第一印象，內距設定點擊目標的節奏，而陰影若能真正讓元素浮起，便有存在的價值，否則就該默默隱退。最常見的錯誤一眼就能看出:按鈕小到標籤擠在邊緣、圓角過大到失去控制元件應有的矩形個性、邊框在不必要之處畫出一條生硬的線，或是陰影深到讓按鈕看起來像是浮在版面之上，而非安坐在版面之中。
層級的重要性大於裝飾。主要動作應該在不大聲呼喊的前提下，成為頁面上最重要的物件。次要與低調按鈕應透過較淺的背景、較細的邊框，或完全不設陰影來退一步。調整按鈕的目的，是讓每個變體各司其職，而不是讓主要按鈕擁有比次要按鈕更多的樣式。在主要、次要、破壞性與低調按鈕之間重複使用一個克制的基準樣式，比起一個孤立的華麗按鈕，更能產生專業的介面。
最大的視覺槓桿幾乎永遠是內距。垂直內距控制按鈕的高度與標籤周圍的呼吸空間;水平內距則決定按鈕在頁面上的寬度。字級與字重必須共同作用才能設定出感知上的權重，因為在相同大小下，較粗的字重會比較細的字重讀來更為重要。邊框能讓按鈕在淺色或照片般的表面上保有輪廓，避免背景單獨融入頁面而模糊不清。圓角決定按鈕的個性，從低數值時的矩形，到中間範圍的親和感，再到按鈕高度一半時的膠囊狀。陰影是收尾動作，最精緻的按鈕會使用柔軟、低位移的陰影，讓元素浮起，而不會變成一個三維物件。
塑造精緻按鈕的控制項
工作台將所有影響按鈕視覺呈現的決策集中在一個表單中。每個控制項都有文件化的實用範圍，在你調整外觀時讓預覽保持可用。你設定的值會餵入同一個樣式物件，同時驅動即時預覽與複製出來的規則，所以預覽與 CSS 實際產生的結果完全一致。
| 控制項 | 影響的內容 |
|---|---|
| 背景顏色 | 按鈕的主導表面，也是視覺第一時間接收到的元素。 |
| 文字顏色 | 標籤的易讀性，以及與背景之間的對比組合。 |
| 邊框顏色與寬度 | 在淺色或複雜背景上的邊緣界定;也能創造僅有外框的樣式。 |
| 邊框圓角 | 角落的個性，從矩形到完全圓潤。 |
| 垂直與水平內距 | 高度、寬度，以及標籤周圍的呼吸空間。 |
| 字級與字重 | 按鈕標籤的易讀性與感知權重。 |
| Box shadow (x, y，模糊) | 讓按鈕從表面浮起的深度線索。 |
顏色以六位數十六進位值輸入，避免命名顏色的歧義，並讓複製出來的輸出在各家瀏覽器之間保持穩定。原生顏色輸入提供可預期的瀏覽器驗證，表單在套用前會再次檢查序列化後的值。數值控制項限制在實用範圍內，讓預覽不會飄移至無法使用的數值，即使 CSS 允許，有限的零仍然是有效值。預覽是一個帶有 type="button" 的真實 HTML 按鈕，因此在你調整時不會提交外層表單。
逐步調整出漂亮的按鈕
- 開啟 CSS 按鈕產生器，挑選與按鈕所在表面相符的背景、文字與邊框顏色。盡可能使用專案中其他位置已在使用的相同十六進位值，讓按鈕歸屬於設計，而不是某一頁。
- 設定邊框寬度與圓角。寬度為零會完全移除邊框，稍小的正值會加上低調的外框，而圓角則決定按鈕讀起來是技術感、中性，還是親和。圓角約為按鈕高度的一半時，會形成膠囊形狀。
- 以小幅度逐步調整垂直與水平內距。垂直內距決定點擊目標的高度，水平內距則決定標籤在頁面上的寬度。目標是在縮減為精簡版面之前，讓觸控範圍至少維持在 44 像素高左右。
- 挑選字級與字重。較大且較粗的文字讀來更重要;較小且較細的文字則退居其次。盡量讓大小與專案中已用於標題或內文的字型級距保持一致。
- 依序設定水平位移、垂直位移與模糊來決定陰影。負的水平位移會把陰影推向左側，負的垂直位移會把陰影推向上方，模糊則柔化邊緣。為了呈現精緻的浮起效果而非沉重的 3D 感，請將位移保持在小值，模糊保持中等。
- 在桌面寬度與窄版行動裝置寬度下檢視實際預覽。同樣的數值會依按鈕所在的欄位寬度，而顯得擁擠或過大，實際預覽能在規則被複製之前就揭示這個問題。
- 複製產生的 .button 規則，將 class 重新命名以符合專案慣例，然後貼到你的樣式表中。由於基底 class 不包含 hover、focus-visible、active 與 disabled 狀態，請在同一份樣式表中補上這些規則。
讓按鈕看起來深思熟慮的色彩選擇
色彩是使用者最先注意到的屬性，也是最容易出錯的屬性。工作台接受六位數十六進位值作為背景、文字與邊框，這是多數設計系統已在使用的格式，也是 CSS 在任何地方都能毫無歧義接受的格式。對主要動作而言，以飽和的背景搭配接近白色的文字標籤，是最安全的組合，因為它產生強烈的對比;但飽和度仍應來自既有的調色盤，而不是從顏色選擇器中拉出的一個獨立值。
當背景偏淺、按鈕背後的表面有紋理或照片質感，或你想要一個低調的純外框樣式時，邊框顏色就能發揮作用。當背景已經對頁面具有足夠的對比時，寬度為零的邊框能讓按鈕保持簡潔。在較深的背景上使用較柔的邊框，也能在不改變文字顏色的前提下，產生成熟的次要按鈕。
這個工具不會幫你計算對比。在預設、hover、active、disabled 與 focus 狀態下確認對比，仍然是你的責任;在預覽中看似可接受的組合，在不同顯示器上或使用者套用強制色彩時，仍可能無法通過無障礙要求。MDN 的背景與邊框指南說明了底層 CSS 屬性之間的互動方式，在決定使用邊框、背景或陰影來界定輪廓時，是相當實用的參考資料。
間距、字級，以及收尾的陰影
間距通常是按鈕最重要的部分，即使它往往是最後才被調整的。垂直內距決定點擊目標的高度，以及標籤周圍的呼吸空間;水平內距則決定按鈕在頁面上的寬度。一個在桌面上以中等垂直內距看起來舒適的按鈕，如果所在的欄位在手機上變窄，可能會顯得過大，這正是要在複製前於行動裝置寬度下檢視實際預覽的原因之一。最小觸控尺寸很重要:較小的點擊目標會讓使用者感到挫折，而增加垂直內距通常比透過 line-height 來增加高度更為乾淨。
字級與字重必須成對作用。同樣大小下，較輕的字重讀來親和而平易近人;較小的尺寸搭配較重的字重則讀來自信而緊湊。請將數值維持在既有的型字級距之內，這樣按鈕才不會引入一個讓其餘設計必須吸收的新尺寸或字重。
陰影是深度線索，應是規則中最克制的部分。工作台只提供標準的水平位移、垂直位移與模糊，以及半透明黑色，目的是讓控制項保持易懂，而不是變成一個完整的陰影編輯器。若要呈現柔和的浮起感，讓兩個位移都保持小幅正值、模糊維持中等，就能讓按鈕貼近表面。較大的位移或較大的模糊則會產生更戲劇化的陰影，適合稀疏版面中的主要動作。
| 陰影輸入 | 對按鈕的效果 |
|---|---|
| 水平位移 (負) | 將陰影移至元素的左側。 |
| 水平位移 (正) | 將陰影移至元素的右側。 |
| 垂直位移 (負) | 將陰影移至元素的上方。 |
| 垂直位移 (正) | 將陰影向下拉離元素，這是按鈕的慣用方向。 |
| 模糊 (不可為負) | 柔化陰影邊緣;較高的值會讓陰影擴散並淡化。 |
當陰影需要比工作台所提供更細部的控制時，一個專門的用於用戶端 CSS 的 box-shadow 產生器能提供更精細的參數，又不需將數值送到伺服器。
複製後新增互動狀態
輸出刻意是一個基礎類別。它包含了背景顏色、文字顏色、邊框、圓角、內距、字級、字重、陰影，以及游標，但就停在這裡，因為互動狀態取決於產品的語意。破壞性操作和低調的次要操作不應該共用同一種 hover 處理方式，而載入狀態也不應該與導覽連結共用同一種 active 處理方式。在產生器之後、於你自己的樣式表中撰寫這些規則，才能讓決策留在它該在的地方。
一個常見的起手式在概念上會像這樣：一條 hover 規則稍微調深或調淺背景、一條 active 規則縮減陰影或將元素位移 1 個像素、一條 focus-visible 規則加上清楚的輪廓而非移除輪廓，以及一條 disabled 規則透過顏色與圖樣（而非僅靠透明度）來傳達不可用。這些都是小規則，而基礎類別則提供一個穩定的物件讓它們附加。
焦點指示器值得特別留意。預設的焦點框是為鍵盤使用者而存在的，若將它移除而未以同樣可見的指示器取代，是常見的無障礙退步。一道 2 像素、帶有小偏移、符合專案強調色的外框，是一個安全的替代方案，能在按鈕可能出現的各種背景上都清楚閱讀。
在實際環境中驗證按鈕
一個在工作區中看起來已經完成的按鈕，仍需要在它實際所在的版面配置中測試。請分別在窄手機寬度、典型桌面寬度，以及寬螢幕上開啟完成的元件，並檢查標籤不會擠到邊緣，且圓角在各種尺寸下看起來仍如設計。請測試短標籤與長標籤，以確保文字變動時內距保持平衡；如果你的產品支援多語言，也請試著翻譯後的標籤，因為某些翻譯會明顯比英文長。
縮放與強制色彩很容易被遺忘。當使用者縮放頁面時，仍應能閱讀標籤並以手指觸及；當使用者啟用強制色彩時，仍應能獲得與靜止狀態視覺上有別的焦點狀態。鍵盤導覽應以可預期的順序將焦點移至按鈕，可見的焦點指示器也應在按鈕可能出現的各種表面上都清楚可辨。在小螢幕上，觸控目標會受惠於稍微放大，這通常透過調整內距而非字級來達成。
工作區最適合用來建立基準。從既有的設計權杖出發、留意最小觸控尺寸，並在實際情境中驗證最終元件，比起把每個按鈕當成獨立的設計問題，能產生更一致的結果。在主要、次要、破壞性，以及低調按鈕之間的一致性，遠比讓單一孤立按鈕在視覺上過於華麗更為重要。
延伸閱讀：如何從三個顏色建立 CSS 漸層背景。