CSS 3 Buttons mit WordPress erstellen

Beim Aufbau von Webseiten/Blogs kommt man immer wieder in den “Genuss” Buttons einbauen zu müssen.

Das können einfache Social Media Buttons sein, Call-to-Action Buttons, Download Buttons usw. Die “neue” Programmiersprache CSS3 ermöglicht es seit kurzem grafische Buttons ohne Grafiken zu erstellen.

Wieso CSS3 Buttons, “normalen” Buttons vorzuziehen sind, ist einfach gesagt:

Durch die Technik von CSS 3 grafische Buttons ohne “Bilder” erzeugt werden können, spart man sich Speicherplatz auf dem Server und verkürzt damit wie Ladezeit seiner Seite. Das ist wieder ein kleiner Schritt in Richtung “Perfekte Onpage Optimierung”, da wie Sie sicher wissen die Ladezeit einer Seite von Google als Rankingfaktor berücksichtig wird.

Da mich das Button erstellen mittels Grafikeditor in letzter Zeit auch immer mehr genervt hat, hab ich mich auf die Suche nach einem CSS 3 Button Generator gemacht und bin letztendlich auf ein wirklich tolles kostenloses WordPress Plugin gestoßen, mit dem mit wenigen “Klicks” tolle CSS 3 Buttons gestalten kann.

Dieses WordPress Plugin möchte ich Ihnen in dem folgenden Beitrag einmal vorstellen.

Das WordPress Plugin heißt MaxButtons und gibt es sowohl als kostenlose Variante und als Pro Version.
Schauen wir uns die kostenlose Variante einmal genauer an.

Wie gesagt das Plugin heißt MaxButton und man kann es sich einfach in der WordPress Plugin Directory runterladen.

==> MaxButton runterladen

Hat man das Plugin wie jedes andere Plugin installiert erscheint in der linken Leiste das Symbol.

 

Klickt man darauf und dann auf “Add New” kommt man zu folgender Übersicht:

CSS 3 Button erstellen

Gehen wir hier zunächst auf die Text-und Linkeinstellungen ein.

  1. Hier kann man einen Namen und Beschreibung des Buttons anlegen, welche man nur in der Buttonverwaltung sieht
  2. Hier trägt man die URL ein auf die mitz dem CSS 3 VButton verlinkt werden soll
  3. Hier wird der Text eintragen der im CSS 3 Button steht ( In meinem Beispiel: MaxButton downloaden )
  4. Hier kann man den Buttontext formatieren
  5. Einstellungen des Schattens vom Buttontext
  6. Abstand des Textes zum Rand festlegen
  7. Live-Vorschau des Buttons

Als nächstes kommen wir zu den Farbeinstellungen (einfach runterscrollen):

CSS 3 Button mit WordPress erstellen

Hier sind folgende Einstellungen vorzunehmen:

  1. Hier kann man den Radius der abgerundeten Ecken einstellen. In diesem Beispiel habe ich diese sehr klein gemacht.
  2. Einstellung des Rahmens um den Button inkl. den Schatten.
  3. Hier wird nun die Farbe des Buttons eingestellt. Links die Farbe des Buttons und Rechts die “Hover” Farbe (Hover bedeutet mit der Maus drüberfahren)
  4. Die Button Vorschau “rutscht” beim Scrollen der Seite mit nach unten.

Hat man den Button fertig, klickt man oben links (zu sehen in Bild 1) auf “SAVE” und der CSS 3 Button ist erstellt!

Mittels eines Shortcodes kann der Button dann im Artikel einfügt werden.

Hier können Sie meinen Beispiel – Button Live sehen und ausprobieren. (Sie werden auf die Plugin Seite weitergeleitet)

 

Sie merken mit dem WordPress Plugin MaxButton hat man im Handumdrehen einen wunderschönen CSS 3 Button erstellt. Downloaden können Sie das Plugin wenn Sie auf den Button oder den Link klicken!

Ein Wort möchte ich noch zu Pro Version von MaxButton sagen:

Wenn man nur ab und an einen einfachen (Text) Button erstellen möchte, dann muss man die Pro Version nicht kaufen. Die kostenlose reicht dann völlig.

Wenn man allerdings professionellere Butttons braucht, dann kann diese sich schon rentieren. Akuell kostet das Plugin nur 10$, umgerechnet knapp 7 Euro – ist damit also echt ein Schnäppchen.

Mit der MaxButton Pro Version kann man:

  • 2-Zeilige Buttons erstellen
  • Fertige Button Packs importieren (kosten auch extra)
  • Buttons import-und exportieren
  • Hat mehr Einstellmöglichkeiten

==> Hier gehts zur Max Button Pro Version

Mein Fazit zum WordPress Plugin – MaxButton:

Ich bin begeistert. Mit dem Plugin geht das erstellen von CSS 3 Buttons wirklich kinderleicht und das ich das direkt im WordPress Backend machen kann ist wirklich ein Vorteil gegenüber von CSS 3 Buttons Generatoren wie man sie im Netz findet!

Ob kostenlose oder Pro Version, ich hoffe Sie können mit diesem Plugin Tipp und dem kleinen How-Do etwas anfangen.

Ich wünsche viel Spaß beim Button erstellen.

Beste Grüße

Thomas

9 Gedanken zu „CSS 3 Buttons mit WordPress erstellen

  1. Hallo Herr Heinlein,

    wieder einmal ein fundierter Bericht!

    Auch wenn man MaxButtons nur als kostenlose Variante benutzt und nicht den teueren Upgrade auf die “Pro Version” benutzt, macht die Anwendung Sinn…

    Danke für die Empfehlung und weiter so…

    … meint Dr. HJ Karg

  2. Stundenlang habe ich gesucht, wie ich am besten Buttons mit Text und Icons per CSS erstelle und einbinde. Das es dieses WP-Plugin gibt macht es mir wesentlich einfacher. Vielen Dank für den Tipp!

  3. Das ist ja genial, nicht das man die Buttons auch in CSS selbst erstellen kann: Aber mit so einem Plugin würde die Erstellung und Verwaltung solcher Buttons viel Zeit sparen.

    Ist man bei der Pro Version auf die Button-Packs angewiesen oder können erfahrene Webdesigner auch eigene Buttons kreieren. Heißt, wie tief kann man einen eigenen Button samt Icons realisieren?

  4. Hallo Sascha,
    du hast recht mit diesem Plugin kann man wirklich viel Zeit sparen.
    Mit der Pro Version ist man nicht auf die Buttonpacks angewiesen. Man kann auch selbst Icons hochladen und kreieren, heißt wenn man etwas “begabt” ist dann kann man sehr hochwertige CSS 3 Buttons erstellen.

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>