Kürzlich hat uns einer unserer Leser um ein Tutorial gebeten, wie man CSS Ghost-Buttons in seinen WordPress-Themes hinzufügt. Ghost-Buttons sind die transparenten 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-Geisterschaltflächen in Ihr WordPress-Theme einfügen können.
Was ist Ghost-Button?
Ghost-Button ist eine Webdesign-Terminologie, die für transparente Buttons verwendet wird, die sich in ihren Hintergrund einfügen und nur durch den Rand um sie herum erkennbar sind.
Das Erstellen von normalen Call-to-Action-Buttons in WordPress ist recht einfach. Sie können sie sogar zu Ihren Beiträgen und Seiten hinzufügen, ohne CSS oder HTML zu schreiben. 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, müssen Sie ein wenig CSS und HTML verwenden, um Ihrem WordPress-Theme Geisterschaltflächen hinzuzufügen.
Zuerst müssen Sie den folgenden CSS-Code zum Stylesheet Ihres Themes oder Child-Themes hinzufügen.
Sie benötigen einen FTP-Client, um sich mit Ihrem Webserver zu verbinden. Gehen Sie nach der Verbindung zum Ordner /wp-content/themes/Your-Theme/ und suchen Sie die Datei style.css. Öffnen Sie diese Datei, um sie in einem Texteditor zu bearbeiten, und fügen Sie dann dieses Code-Snippet am Ende der Datei ein. (Erfahren Sie mehr über das Einfügen von Code-Snippets 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 wieder auf den Server hoch.
Wenn Sie nun die Schaltfläche 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 als Nächstes 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">Download Now</a>
Speichern oder aktualisieren Sie Ihren Beitrag und zeigen Sie ihn dann in der Vorschau an. Sie sehen eine schöne Geisterschaltfläche anstelle eines einfachen alten Links.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie einen Ghost-Button in Ihrem WordPress-Theme hinzufügen. Vielleicht möchten Sie auch unsere Anleitung zum Hinzufügen von Schaltflächen in WordPress ohne Shortcodes lesen