如何在WordPress主題中添加CSS Ghost按鈕


最近,我們的一位讀者要求我們提供有關如何在其WordPress主題中添加CSS Ghost按鈕的教程。 幽靈按鈕是透明的號召性用語按鈕,這些按鈕在當今非常流行。 在本文中,我們將向您展示如何使用很少的CSS和HTML輕鬆地在WordPress主題中添加CSS鬼按鈕。

使用CSS創建Ghost按鈕

什麼是鬼鍵?

鬼按鈕是一種Web設計術語,用於透明按鈕混合到其背景中,並且僅在其周圍的邊框中可見。

普通按鈕旁邊的重影按鈕的示例

在WordPress中創建普通的號召性用語按鈕非常容易。 您甚至可以將它們添加到您的帖子和頁面中,而無需編寫CSS或HTML。 由於幻影按鈕是一種新趨勢,因此沒有特定的插件可以僅創建幻影樣式的按鈕。

在WordPress中添加鬼按鈕

如前所述,您將需要使用少量CSS和HTML在WordPress主題上添加幻影按鈕。

首先,您需要將以下CSS代碼添加到主題或子主題的樣式表中。

您將需要一個FTP客戶端來連接到您的Web服務器。 連接後,轉到/ wp-content / themes / Your-Theme /文件夾並找到style.css文件。 打開此文件以在文本編輯器中進行編輯,然後將此代碼段粘貼到文件底部。 (了解有關在WordPress中從網絡粘貼代碼片段的更多信息)。

.ghost-button {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              color 0.2s ease-out;
}
.ghost-button:hover,
.ghost-button:active {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease-in,
              color 0.3s ease-in;
}

保存您的更改,然後將文件上傳回服務器。

現在,只要您想顯示按鈕,您所需要做的就是添加class =“ ghost-button”。

例如,如果要添加下載鏈接,則可以像通常那樣創建下載鏈接。 接下來,切換到“文本”編輯器以查看HTML格式。

找到您的下載鏈接的HTML代碼,然後添加CSS類,如下所示:

Download Now

保存或更新您的信息,然後預覽。 您將看到一個漂亮的鬼按鈕,而不是普通的舊鏈接。

我們希望本文能幫助您學習如何在WordPress主題中添加幻影按鈕。 您可能還希望查看我們的指南,該指南如何在WordPress中添加按鈕而不使用短代碼

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。