CSS 按鈕設計

Tim
Nov 14, 2021

--

本單元參考 Pure.css 對按鈕的設計,來解說 css 按鈕設計上要注意的細節

按鈕基礎設定,如下圖。

  1. display:inline-block 讓按鈕能並排同時設定大小
  2. white-space: nowrap 文字不換行。
  3. text-align : center 文字置中
  4. cursor: pointer 顯示滑鼠手指頭
  5. urser-select : none 使用者不能選取按鈕文字

按鈕基礎樣式

設定文字大小、 padding、文字顏色、背景顏色、border-radius圓角設定

padding 使用em來設定,可以根據文字大小自動調整內距。

按鈕 hover active樣式

設定按鈕被 hover 時的漸層背景,還有被focus時取消框線等設定

按鈕無效設定

當今天想讓使用者無法點選按鈕時,像是表單沒填完等情況 可以用以下設定

加上 cursor:not-allowed 和 pointer-events:none 讓使用者無法點選

--

--

Tim
Tim

No responses yet