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

WPressize Me

06/29/2024

什麼是 Ghost 按鈕？

Ghost 按鈕是一種網站設計術語，用於指代那些融合到背景中的透明按鈕，這些按鈕只能通過它們周圍的邊框來辨認。

在 WordPress 中添加 Ghost 按鈕

如前所述，您需要使用一點點 CSS 和 HTML 來在您的 WordPress 主題中添加 Ghost 按鈕。首先，您需要將以下 CSS 代碼添加到您的主題或子主題的樣式表中。

您將需要一個 FTP 客戶端來連接到您的網絡伺服器。一旦連接，導航到 /wp-content/themes/Your-Theme/ 資料夾並定位 style.css 文件。打開這個文件並在文本編輯器中進行編輯，然後將此代碼片段粘貼到文件的底部。

.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 類別：

立即下載

保存或更新您的帖子，然後預覽它。您將看到一個美麗的 Ghost 按鈕，而不是普通的鏈接。

我們希望這篇文章幫助您瞭解如何在您的 WordPress 主題中添加 Ghost 按鈕。您可能還想查看我們的指南，瞭解如何在不使用短代碼的情況下在 WordPress 中添加按鈕。如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您還可以在 Twitter 和 Facebook 上找到我們。