[HTML/CSS] 我心目中的「完美按鈕」

Kevin Tu

5 min readMar 14, 2018

“Colorful lines of code on a computer screen” by Sai Kiran Anagani on Unsplash

由於中文按鈕大多言簡意駭，加上沒有空格問題導致瀏覽器自我斷行，本篇主要是針對歐美語系的按鈕為主 …

在做網站的時候常常會遇到以下的狀況：

「按鈕內的字太多，斷行後看起來很奇怪 …」
「按鈕寬度不知道怎麼設定，在不同寬度下看起來差很多。」

觀察多年後的結果發現，常常問題是出在設計師與工程師的溝通不良。

很多的設計師雖然可以在設計圖(mockup)上面做出美美的按鈕，但是往往設計師都習慣使用設計軟體縮放的功能，而不清楚每一個按鈕在不同的螢幕上，其寬度、字體大小、字數都應該被嚴格的設計。

不當的按鈕設計，會變成在前端工程師做完整個網頁在跟設計師對答案時，設計師會表示：「這跟我設計的不一樣」「這樣不好看」，最後要嘛是工程師妥協，或是 PM 逼著工程師妥協，進而埋下技術債。

「應該很簡單嘛就改一改 CSS 就好啦」「…」 — Photo by Helloquence on Unsplash

因此在開始動手改動或是製作任何的按鈕之前，我建議身為工程師一定要跟設計師溝通清楚以下幾件事：

固定寬度 vs 動態寬度

第一個需要確認的事情就是：設計師現在的這個按鈕，到底指得是固定寬度還是動態寬度？「固定寬度」顧名思義，就是無論按鈕內的文字數量多寡，其最小以及最大寬度均維持一致。在大部分的狀況下，動態寬度只適合單一的 CTA 按鈕，但是當你有一個以上的按鈕排在一起的時候，為了視覺上面的統一，就使用固定寬度的按鈕就會比較合適。以此來看，由於靈活性的考量使用固定寬度作為預設較符合大部分人的狀況。同時也能要求設計師在設計按鈕時思考每個按鈕與按鈕之間的關係。

嚴格檢視放進按鈕的字數

規範了寬度，下一步就是需要討論每一個按鈕能夠放進去的最大字數。如果是動態寬度就無所謂，倘若是工程師表現闊綽，不嚴格要求管控放進按鈕的字數，就等同你默默的埋下了未來網站 CSS 暴走的技術債地雷。

尤其是如果你的網站有著不同語言的 localization，更需要特別注意這件事。https://www.w3.org/International/articles/article-text-size

依照螢幕大小調整字體與寬度以及內容

「調整字體與寬度以及內容」都是響應式設計(Responsive design)的基本點，但是有時候最簡單的就是最容易被忽略的事情。在收到任何的設計圖時，請務必檢視是否在行動版的按鈕上面提供了不同的字體大小或是按鈕寬度。如果你最終被迫需要將整句話放入按鈕中的時候，請務必要求提供行動版的縮減文字。例如說從桌面版的「Yes I understand」，變成手機版的「Yes」，透過簡化文字又不失原意的狀況下，維持你與 PM 的好關係。

文字斷行與垂直置中

大部分的狀況是使用與按鈕同高的 line-height 就能解決文字垂直置中的問題。但是一旦按鈕內的文字出現斷句，整個按鈕格式就會跑掉。這也是在大部分的網站中，如果你要把一整個句子放進按鈕當中，也要盡可能的簡短。若是你的按鈕沒有預料會有這樣的狀況存在，就可能出現按鈕與框架大打出手的狀況出現。