2022 年 7 月 1 日更新

How to use html and css to make buttons in wordpress 封面圖片

在 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 的屬性跟設定值。

在Wordpress後台點擊外觀選單裡面的「附加的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」裡面，這樣按鈕的外觀樣式就能更多元化一點！

延伸閱讀

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

▼ 點此分享 ▼