2022 年 7 月 1 日 更新

在 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 個小技巧都學起來!

如果你喜歡這篇文章的話
歡迎用下面的按鈕分享出去!