Buttons verwenden – Ganz ohne Plugin

Neue IdeenKürzlich fragte mich ein Mitglied meines Erfolgsteams ob es wohl eine Möglichkeit gibt, Buttons in einer WordPress-Seite auch ohne Plugin zu erstellen. Und weil ich mir gedacht habe, dass die Antwort auf diese Frage auch für viele meiner Leser interessant sein könnte zeige ich heute eine kleine Anleitung dafür.

Button per CSS definieren

Um einen Button ohne Plugin zu generieren müssen wir zunächst eine sogenannte „Klasse“ für den Button im Stylesheet definieren:

.wpb_button {
  padding: 7px;
  background: red;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white;
  border: 1px solid darkred;
  border-radius: 10px;
}

Diesen Code tragen Sie bitte in die die Custom CSS-Sektion Ihres Themes ein. Falls es einen solchen Bereich für Ihr Theme nicht gibt können Sie das Plugin „PC Custom CSS“ installieren, das unter „Design“ einen neuen Menüpunkt „Custom CSS“ einfügt, in dem Sie den Code einfügen können.

Nur wenn Sie ein Child-Theme verwenden können Sie diesen Code auch direkt in die style.css einfügen, die Sie unter „Design“ – „Editor“ finden.

Bedeutung der CSS-Regel

.wpb_button -> Das ist der sogenannte „Selektor“ der Regel.

Der vorangestellte Punkt definiert eine sogenannte CSS-Klasse, die mit class=“wob_button“ in das HTML-Element eingefügt wird.

padding -> Dieser Wert definiert den Innenabstand des Elementes.

Je größer dieser Wert ist, desto größer wird der Abstand des Buttontextes zu den Rändern des Buttons.

background -> Das definiert die Farbe des Hintergrundes, also die eigentliche Buttonfarbe.

Der Einfachheit halber verwende ich im Beispiel die Farben mit Klarnamen. Sie können aber selbstverständlich jede beliebige Farbe über den Hex-Code definieren.

font-family -> Die Schriftart des Buttontextes

Der erste Wert definiert die Schriftart, die gewünscht ist (Arial). Ist Arial auf dem Rechner, mit dem die Website aufgerufen wird, nicht installiert wird eine Ausweichschrift (Helvetica) aufgerufen.

Sind beide Schriften nicht verfügbar wird eine beliebige serifenlose Schrift (sans-serif) angezeigt.

font-weight -> legt fest, wie fett eine Schrift angezeigt wird

„bold“ heißt, dass die Schrift fett angezeigt werden soll.

color -> Die Farbe der Schrift

Auch hier gilt: Sie können jede beliebige Schriftfarbe über den 6-stelligen HexCode definieren. Achten Sie auf ausreichend starke Kontraste um eine gute Lesbarkeit zu gewährleisten.

border -> Rahmen um den Button

Wenn Sie Ihrem Button einen Rahmen verpassen möchten, dann können Sie das mit diesem Wert erreichen.

Je größer die angegebene Pixelzahl, desto breiter wird der Rahmen.

„solid“ heißt, dass der Rahmen in einer durchgehenden Linie angezeigt wird. Alternativen wären z.B. „dotted“, „dashed“ oder „double“

Der letzte Wert definiert die Farbe der Umrandung

border-radius -> definiert runde Ecken

Wenn Sie sich für Ihren Button abgerundete Ecken wünschen, dann können Sie diese über border-radius definieren. Je größer der Wert, desto runder die Ecken.

Button im HTML-Code einfügen

Damit der Button angezeigt wird, müssen Sie zunächst wie gewohnt einen Link erstellen.

Dann wechseln Sie in den Text-Editor von WordPress und suchen Sie nach dem Code für diesen Link, der in etwa so aussieht:

<a href="http://example.com/link">Linktext</a>

Diesen Code ändern Sie bitte wie folgt ab:

<a class="wpb_button" href="http://example.com/link">Linktext</a>

Wenn Sie möchten, dass der Link sich in einem neuen Fenster öffnet, können Sie den Code auch wie folgt ergänzen:

<a class="wpb_button" href="http://example.com/link" target="_blank">Linktext</a>

So sieht der Button dann am Ende aus (Link zur Startseite des WordPress-Bistros in einem neuen Fenster):

Zum WordPress Bistro

Varianten

Sie können selbstverständlich auch noch weitere Varianten anlegen. Zum Beispiel können Sie verschiedene Farben im Stylesheet definieren:

.green {background: green;} /* Button mit grüner Hintergrundfarbe */
.blue {background: blue;} /* Button mit blauer Hintergrundfarbe */
.large {padding: 15px;} /* Button mit größerem Innenabstand */
.square {border-radius: 0;} /* Button ohne abgerundete Ecken */

Diese Zusatzklassen können Sie ganz einfach im HTML-Code einfügen:

<a class="wpb_button green" href="#" target="_blank">Grüner Button</a>

Grüner Button

<a class="wpb_button blue" href="#" target="_blank">Blauer Button</a>

Blauer Button

<a class="wpb_button large" href="#" target="_blank">Großer Button</a>

Großer Button

<a class="wpb_button square" href="#" target="_blank">Eckiger Button</a>

Eckiger Button

Hat Ihnen dieses kleine Tutorial gefallen? Dann teilen Sie es gern in Ihrem Netzwerk, einfach durch Klick auf die Buttons direkt unter diesem Beitrag 🙂

Bildquelle:
© masterzphotofo – Fotolia.com

Print Friendly, PDF & Email

Kommentare

Buttons verwenden – Ganz ohne Plugin — 20 Kommentare

  1. Vielen Dank für die tolle Anleitung.
    In meinem Theme sind zwar schon einige Buttons enthalten, aber falls ich die Palette mal erweitern/umstellen will, weiß ich, wo ich nachschauen muss. 🙂

    Viele Grüße
    Maria

  2. Ich habe diese Methode in zwei Testinstallationen ausprobiert. Es funktionierte jedoch nur, wenn ich die Buttons in der style-css definiere; das Plugin zeigte in beiden Testinstalltionen (Theme 2012 und Theme 2015) keine Wirkung. Ich frage mich, ob es am plugin, an der Testinstallation oder an mir liegt; ich würde nämlich solche Buttons gerne verwenden.
    Schöne Grüße,

    Dieter

    • Hallo Dieter,

      mit den Standard-Themes sollte das Plugin eigentlich funktionieren. Versuche es mal alternativ mit dem Plugin „Simple Custom CSS“. Vielleicht gibt es einen Konflikt mit anderen Plugins Deiner Installation?

  3. Herzlichen Dank für die tolle Anleitung,
    klappt alles prima. Ich konnte alles ändern, wie ich wollte… nur die Schriftfarbe nicht. ??? Da alles andere so gut funktioniert hat, stehe ich jetzt ein bisschen auf dem Schlauch. Weder Klartext noch Hex-Code funktionieren, die Schrift bleibt weiß 🙁

  4. Super, das war genau was ich suchte! Und habe es gleich gefunden Vielen Dank für die leichtverständliche Anleitung! Werde ich gleich einbauen. Übrigens finde ich Deine Tipps oft, wenn ich was bzgl. WP suche….

    • Hallo Mathias, das klingt nach einer vergessenen Klammer, einem fehlenden “ oder sonst einem kleinen Fehler im Code.
      Hast Du einen Link zu der Seite wo Du den Code eingefügt hast?

      Herzliche Grüße
      Michaela

  5. Eine Super Anleitung! Danke dafür!
    Was ich allerdings bei mir noch geändert habe ist die Schriftgröße, das ist sicherlich auch für einige andere hier ganz interessant.
    Ist nichts schweres, es wird lediglich eine weitere Zeile in den Button eingefügt:
    font-size: 20px;
    Die Pixelanzahl ist hier die Größe 😉
    LG Simon

  6. Pingback: NSC Woche 4: Weitere Inhalte, Backlinks und erste Einnahmen - Tipps zum Investieren und Sparen

  7. Pingback: word button einfügen | bruinrow

    • Hallo Peter,

      ehrlich gesagt kann ich Dir diese Frage nicht beantworte.

      Da Du den Text für jeden Button aber individuell festlegst bin ich auch nicht sicher, wofür das notwendig sein sollte?

      Herzliche Grüße
      Michaela

  8. Herzlichen Dank! Nach so etwas haben wir schon lange gesucht. Danke für den super Tipp! „Child-Theme“: Unter „Design“ / „Custom CSS“ einmal angelegt / einfügt, Kopierfunktion genutzt und fertig. Klasse! Einfacher geht es nicht. MfG: … aus der Prignitz (Brandenburg) … 😉

  9. Hallo Michaela,
    danke nochmal für Deine Unterstützung beim Umzug von einer Domain zur Anderen. Ich habe mich jetzt mal etwas auf Deinem Blog umgeschaut und diesen hilfreichen Beitrag gefunden. Ich wollte den Button einsetzen, allerdings wird bei mir nur ein unterstrichener Link anstatt eines Buttons angezeigt. Ich habe die Farben im Button verändert, diese Veränderung war nicht zu sehen. Hast Du da einen heissen Tipp für mich?
    Liebe Grüße

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Ich möchte auch den WordPress-Rundbrief abonnieren