指南/建立內容/設計/設計按鈕

設計按鈕

調整顏色、字型、邊框、陰影等,自訂網站的按鈕。本指引會逐步引導你了解可用的樣式設定選項以及如何套用這些選項。

自訂按鈕樣式

依照下列步驟來自訂按鈕樣式:

  1. 使用「清單檢視」以選取「按鈕」區塊
「清單檢視」開啟,且「按鈕區塊」已加上醒目提示。
  1. 在右側邊欄中的「區塊設定」,按一下「樣式」圖示。
「按鈕」區塊的區塊設定側邊欄,其中樣式圖示已加上醒目提示。
  1. 自訂「按鈕」區塊的下列樣式:
    • 顏色:選擇「按鈕」區塊的背景顏色。深入了解顏色
    • 文字設計:變更按鈕字型類型和大小。深入了解文字設計
    • 尺寸:設定邊框間距、邊界和區塊間距。深入了解尺寸
    • 邊框:自訂邊框顏色和半徑。深入了解邊框

設定個別按鈕的樣式

依照下列步驟,將樣式套用至「按鈕」區塊中的個別按鈕:

  1. 使用「清單檢視」來選取「按鈕」區塊中的個別按鈕。
頁面編輯器的「清單檢視」已開啟,且有一個箭頭從清單檢視圖示指向按鈕區塊清單。
  1. 在右側邊欄中的「區塊設定」,按一下「樣式」圖示。
個別按鈕上的樣式圖示。
  1. 自訂下列樣式:
    • 樣式:選取按鈕樣式的填入顏色外框
    • 顏色:選擇按鈕的文字背景顏色。深入了解顏色
    • 文字設計:變更按鈕字型類型、樣式和大小。深入了解文字設計
    • 尺寸:設定個別按鈕周圍的邊框間距。深入了解尺寸
    • 邊框和陰影:自訂邊框顏色和半徑,或將下陰影新增至按鈕。深入了解邊框

格式化按鈕文字

除了區塊樣式中可用的文字設計選項外,你還可以依照下列步驟將格式化套用至按鈕文字:

  1. 使用「清單檢視」來選取「按鈕」區塊中的個別按鈕。
  2. 醒目提示要格式化的部分或所有按鈕文字。 
按鈕文字已加上醒目提示,箭號指向工具列中的文字格式化選項。
  1. 從格式化選項中選取,包括:
    • 將文字 (靠左、置中、靠右) 對齊
    • 新增連結
    • 粗體
    • 斜體
    • 更多」圖示包括:
      • 醒目提示:只變更文字的文字和背景顏色。使用樣式,變更按鈕的顏色。
      • 內嵌程式碼
      • 內嵌圖片
      • 鍵盤輸入樣式
      • 語言屬性
      • 刪除線
      • 下標
      • 上標
Copied to clipboard!