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 recht 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 Ghost-Buttons in Ihr WordPress-Theme einzufü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 anzuzeigen.

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 Ghost-Buttons in Ihr WordPress-Theme einfügen. Vielleicht möchten Sie auch unseren Leitfaden lesen, wie Sie Buttons in WordPress ohne Shortcodes hinzufügen.

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.