如何在WordPress主题中添加CSS Ghost按钮

2020-09-22
WordPress行业动态

最近，我们的一位读者要求我们提供有关如何在其WordPress主题中添加CSS Ghost按钮的教程。幽灵按钮是透明的号召性用语按钮，这些按钮在当今非常流行。在本文中，我们将向您展示如何使用很少的CSS和HTML在WordPress主题中轻松添加CSS鬼按钮。

什么是鬼键？

鬼按钮是一种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: 2pxsolid#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;}