CSS Ghost-Buttons in Ihr WordPress-Theme einfügen

Kürzlich fragte uns einer unserer Leser nach einem Tutorial, wie man CSS Ghost-Buttons in seine WordPress-Themes einfügt. Ghost-Buttons sind transparente Call-to-Action-Buttons, die heutzutage sehr beliebt sind. In diesem Artikel zeigen wir Ihnen, wie Sie mit sehr wenig CSS und HTML ganz einfach CSS Ghost-Buttons in Ihr WordPress-Theme einfügen können.

Was ist ein Ghost-Button?

Ghost-Button ist eine Webdesign-Terminologie für transparente Schaltflächen, die sich in ihren Hintergrund einfügen und nur durch den Rahmen um sie herum wahrnehmbar sind.

Das Erstellen normaler Call-to-Action-Buttons in WordPress ist ziemlich einfach. Sie können sie sogar in Ihre Beiträge und Seiten einfügen, ohne CSS oder HTML schreiben zu müssen. Da Ghost-Buttons ein neuer Trend sind, gibt es keine speziellen Plugins, um nur Buttons im Ghost-Stil zu erstellen.

Hinzufügen von Ghost-Buttons in WordPress

Wie bereits erwähnt, benötigen Sie ein kleines bisschen CSS und HTML, um Geister-Buttons zu Ihrem WordPress-Theme hinzuzufügen.

Zuerst müssen Sie den folgenden CSS-Code zu Ihrer Theme- oder Child-Theme-Stylesheet hinzufügen.

Sie benötigen einen FTP-Client, um sich mit Ihrem Webserver zu verbinden. Sobald Sie verbunden sind, navigieren Sie zum Ordner /wp-content/themes/Ihr-Theme/ und suchen Sie die Datei style.css. Öffnen Sie diese Datei, um sie in einem Texteditor zu bearbeiten, und fügen Sie dann diesen Code-Schnipsel am Ende der Datei ein. (Erfahren Sie mehr über das Einfügen von Code-Schnipseln aus dem Web in 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;
}

Speichern Sie Ihre Änderungen und laden Sie die Datei zurück auf den Server.

Wenn Sie nun den Button anzeigen möchten, müssen Sie nur noch class=”ghost-button” hinzufügen.

Wenn Sie beispielsweise einen Download-Link hinzufügen möchten, erstellen Sie Ihren Download-Link wie gewohnt. Wechseln Sie dann zum Texteditor, um die HTML-Formatierung zu sehen.

Suchen Sie den HTML-Code für Ihren Download-Link und fügen Sie die CSS-Klasse wie folgt hinzu:

<a href="http://example.com/downloads/" class="ghost-button">Jetzt herunterladen</a>

Speichern oder aktualisieren Sie Ihren Beitrag und sehen Sie ihn sich dann in der Vorschau an. Sie sehen einen schönen Ghost-Button anstelle eines einfachen alten Links.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Geister-Buttons in Ihrem WordPress-Theme hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden So fügen Sie Buttons in WordPress hinzu, ohne Shortcodes zu verwenden sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.