在 WordPress 寫文章或頁面的時候，可能都會用到「按鈕」這個功能，雖然 WordPress 裡面有內建按鈕的區塊可以插入，不過有些人會比較仰賴其他佈景主題或外掛工具，來製作更專業一點的按鈕。
但如果你會一點 HTML 跟 CSS 語法的話，其實你也可以在 WordPress 裡面製作按鈕，只要用上幾個常用的 CSS 屬性設定，同樣也可以做出不錯看的按鈕出來！
文章目錄
WordPress 內建的按鈕
如果我們打開 WordPress 的區塊編輯器，會發現它有內建一個「插入按鈕」的功能，點擊它就可以把「按紐」新增到文章或是頁面上，相當方便，通常我都會設定按鈕前往其他的頁面或是網站。
這顆內建按鈕提供的「樣式」有填色與外框這兩種，「色彩」可以調整文字顏色跟背景顏色，「框線」則可以調整外框的圓弧效果，功能其實不少。
不過按鈕也可以透過其他的方式來設定，除了仰賴某些外掛程式之外，其實也可以用「撰寫 HTML 跟 CSS」的方式來製作按鈕，只要學會設定幾種常用的 CSS 屬性，也可以搭配出各式各樣的按鈕樣式！
如何製作一顆按鈕？
在 WordPress 的區塊編輯器裡面，都有提供 自訂 HTML 區塊的插入功能，點擊它就可以在文章或頁面裡面插入 HTML 區塊，並且在裡面撰寫程式碼。
Step 1：輸入 a 標籤
首先，在 自訂HTML 區塊裡面輸入 a 標籤，它是用來插入超連結的 HTML 標籤，而標籤中間可以輸入按鈕內的文字。程式碼如下：
<a>這是一顆按鈕</a>
Step 2：加入屬性
再來，我們要在 a 標籤裡面加入 href 跟 class 這兩個屬性，href 是用來設定這個超連結要前往的網址或位置，所以可以直接在這邊填入你想要前往的網址，而 Class 所定義的名稱，則會用在接下來的 CSS 語法裡面。
<a href="https://digitalyoming.com/" class="bluebutton">這是一顆按鈕</a>
完成了這段程式碼後，它會有基本的點擊跳轉功能，外觀長得就像這樣：這是一顆按鈕，但還看不出是一顆按鈕，所以接下來要用 CSS 語法來變更它的外觀。
Step 3：打開 WordPress 附加的 CSS
在 WordPress 裡面有一個地方專門用來設定 CSS，可以從後台點選 外觀＞附加的CSS，它會開啟自訂介面的 CSS 設定區，裡面能讓我們輸入 CSS 的屬性跟設定值。
Step 4：輸入選擇器
前面我們有在 a 標籤裡面設定一個 Class 的屬性，我取名為 bluebutton，所以在 CSS 的開頭我們要輸入這個名稱當作選擇器 (前面別忘了要加個點 .)，程式碼如下：
.bluebutton{
}
Step 5：輸入 CSS 屬性與設定值
再來就是要設定 CSS 的屬性與設定值了，如果想要做出一個基本的按鈕，大概都會用到下面的屬性設定：
.bluebutton {
text-decoration: none; /* 去除下底線 */
display: inline-block; /* 變成行內區塊 */
font-size: 25px; /* 文字大小 */
color: white; /* 文字顏色 */
background: blue; /* 按鈕背景顏色 */
padding: 5px 10px 5px 10px; /* 文字到邊框的間距 */
border: 2px solid black; /* 邊框設定 */
border-radius: 5px; /* 邊框圓角設定 */
}
這時候，原本的文字超連結會變成像這樣的按鈕：這是一顆按鈕，其實就跟 WordPress 內建的按鈕差不多，顏色、背景、邊框、圓弧效果都可以再做調整，直到自己滿意為止。
Step 6：設定 Hover 效果
如果你希望按鈕能有點互動效果的話，可以在 CSS 的程式碼裡面再添加 hover 的設定，程式碼如下：
.bluebutton:hover {
color: blue;
border: 2px solid blue;
background-color: white;
}
設定完這段 CSS 程式碼之後，按鈕就會變成這樣：這是一顆按鈕，只要把滑鼠移動到這顆按鈕上面，你就會發現按鈕的樣式發生了改變，變成一顆有互動效果的按鈕。
結語
其實 CSS 能設定的屬性非常多，以上提到的只是冰山一角而已，不過常用的就那些，要用 a 標籤製作一顆按鈕的話，上面的 CSS 設定已經算是非常夠用的了，當然你也可以再多學一些 CSS 的屬性設定，把程式碼寫進「附加的 CSS」裡面，這樣按鈕的外觀樣式就能更多元化一點！
延伸閱讀
- Notion 如何製作彩色線條？你可以用 Inline equation 來決定線條的樣子！
- Canva【超連結】怎麼用？如何用在簡報跟 PDF 檔案中？
- Google 試算表｜如何插入公式？公式 12 個【小技巧】都學起來！
最後
§ 很感謝你的閱讀 §
如果你喜歡這篇文章的話
歡迎使用下面分享按鈕分享