So fügen Sie CSS-Ghost-Schaltflächen in Ihrem WordPress-Theme hinzu

Kürzlich bat uns einer unserer Leser um ein Tutorial, wie CSS Ghost-Schaltflächen in WordPress-Themes eingefügt werden. Ghost-Tasten sind der transparente Aufruf von Aktionstasten, die heutzutage sehr beliebt sind. In diesem Artikel zeigen wir Ihnen, wie Sie CSS-Geister-Schaltflächen mit nur wenigen CSS- und HTML-Elementen in Ihr WordPress-Design einfügen.

Was ist Ghost Button??

Die Ghost-Schaltfläche ist eine Webdesign-Terminologie, die für transparente Schaltflächen verwendet wird, die sich in ihren Hintergrund einfügen und nur an der Umrandung erkennbar sind.

Das Erstellen normaler Aktionsschaltflächen in WordPress ist recht einfach. Sie können sogar Ihre Beiträge und Seiten hinzufügen, ohne CSS oder HTML zu schreiben. Da Geisterschaltflächen ein neuer Trend sind, gibt es keine speziellen Plugins, um nur Schaltflächen im Geisterstil 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-Design Geisterschaltflächen hinzuzufügen.

Zuerst müssen Sie den folgenden CSS-Code zum Stylesheet Ihres Designs oder untergeordneten Themes hinzufügen.

Sie benötigen einen FTP-Client, um eine Verbindung zu Ihrem Webserver herzustellen. Wechseln Sie nach dem Herstellen 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 dieses Code-Snippet am Ende der Datei ein. (Weitere Informationen zum Einfügen von Codeausschnitten aus dem Web in WordPress.).

 .Geister-Taste Anzeige: Inline-Block; Breite: 200px; Polsterung: 8px; Farbe: #fff; Rahmen: 2px fest #fff; Text ausrichten: Mitte; Umriss: keine; Textdekoration: keine; Übergang: Hintergrundfarbe 0,2 Sekunden, Farbe 0,2 Sekunden.  .ghost-button: hover, .ghost-button: active Hintergrundfarbe: #fff; Farbe: # 000; Übergang: Hintergrundfarbe 0,3s einfädeln, Farbe 0,3s einmischen;  

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

Wann immer Sie die Schaltfläche anzeigen möchten, müssen Sie lediglich 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 folgendermaßen hinzu:

Jetzt downloaden

Speichern oder aktualisieren Sie Ihren Beitrag und zeigen Sie eine Vorschau an. Sie sehen einen schönen Geister-Button anstelle eines einfachen alten Links.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie in Ihrem WordPress-Theme einen Ghost-Button hinzufügen. Vielleicht möchten Sie auch unser Handbuch zum Hinzufügen von Schaltflächen in WordPress ohne Verwendung von Kurzwahlen sehen

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