Tutorials

Wie du jeden Button in WordPress transparent machst – Der ultimative Guide

Melden

Hier ist ein umfassendes Tutorial, wie du in WordPress jeden Button transparent gestalten kannst – egal, welches Theme oder welchen Page Builder du nutzt.

Transparente Buttons (auch oft „Ghost Buttons“ genannt) sind ein zeitloses Design-Element. Sie wirken modern, elegant und lenken nicht zu sehr vom Hintergrundbild ab. In dieser Anleitung lernst du drei einfache Wege, um diesen Look zu erzielen.

Methode 1: Mit dem WordPress Block Editor (Gutenberg)

Seit den neuesten WordPress-Updates ist dies der einfachste Weg, ganz ohne Code.

  1. Button auswählen: Öffne deine Seite im Editor und klicke auf den Button-Block, den du bearbeiten möchtest.
  2. Stile-Tab öffnen: Klicke in der rechten Seitenleiste auf das Werkzeug-Symbol (Stile/Settings).
  3. Hintergrundfarbe anpassen:
    • Gehe zum Bereich Farben -> Hintergrund.
    • Klicke auf das Farbauswahl-Feld.
    • Ziehe den Deckkraft-Regler (Opacity) ganz nach links auf 0 % oder wähle „Keine Farbe“.
  4. Rahmen hinzufügen: Ein transparenter Button braucht einen Rahmen, damit er sichtbar bleibt.
    • Gehe zu Rahmen (Border).
    • Wähle eine Breite (z. B. 2px) und eine Farbe (z. B. Weiß oder Schwarz).
  5. Textfarbe: Stelle sicher, dass die Textfarbe gut lesbar ist (z. B. Weiß auf dunklem Hintergrund).

Methode 2: Mit Elementor (Page Builder)

Elementor ist einer der am häufigsten genutzten Page Builder. Hier ist der Vorgang fast identisch:

  1. Button-Widget bearbeiten: Klicke auf den Button.
  2. Tab „Stil“: Wechsel in der linken Spalte zum Reiter Stil.
  3. Hintergrundtyp:
    • Klicke bei „Hintergrundtyp“ auf das klassische Icon (Pinsel).
    • Klicke auf die Farbauswahl.
    • Schiebe den unteren Regler für die Transparenz (Alpha-Kanal) komplett nach links.
  4. Rahmen:
    • Wähle unter „Rahmentyp“ den Punkt Durchgehend.
    • Gib eine Breite ein (z. B. 2).
    • Wähle die gewünschte Rahmenfarbe.

Methode 3: Der „Universal-Weg“ mit Custom CSS

Falls dein Theme keine Einstellungen für Transparenz bietet, kannst du dies mit einer Zeile CSS für jeden Button erzwingen.

  1. CSS-Klasse vergeben:
    • Klicke im Editor auf deinen Button.
    • Suche rechts unter „Erweitert“ das Feld Zusätzliche CSS-Klassen.
    • Gib dort einen Namen ein, z. B.: mein-transparenter-button.
  2. CSS einfügen:
    • Gehe im WordPress-Dashboard zu Design > Customizer > Zusätzliches CSS.
    • Kopiere den folgenden Code hinein:
.mein-transparenter-button {
    background-color: transparent !important;
    border: 2px solid #ffffff; /* Weiße Umrandung */
    color: #ffffff; /* Weiße Schrift */
    transition: all 0.3s ease; /* Sanfter Übergang beim Drüberfahren */
}

/* Effekt beim Drüberfahren (Hover) */
.mein-transparenter-button:hover {
    background-color: #ffffff !important;
    color: #000000; /* Schrift wird schwarz beim Hover */
}
  1. Speichern & Veröffentlichen.

Profi-Tipp: Was du bei transparenten Buttons beachten musst

  • Lesbarkeit: Nutze transparente Buttons nur auf Hintergründen, die nicht zu unruhig sind. Wenn das Hintergrundbild sehr detailliert ist, kann man den Text im Button oft schlecht lesen.
  • Der Hover-Effekt: Ein transparenter Button sollte beim Drüberfahren mit der Maus (Hover) reagieren. Meistens füllt man ihn dann mit einer Farbe aus oder ändert die Rahmenfarbe, damit der Nutzer merkt: „Hier kann ich klicken“.
  • Kontrast: Achte darauf, dass die Rahmenfarbe genug Kontrast zum Hintergrund bietet. Ein weißer transparenter Button auf hellgrauem Grund ist fast unsichtbar.

Fazit

Transparente Buttons sind ideal für Sekundär-Buttons (z. B. „Mehr erfahren“ neben einem auffälligen „Jetzt kaufen“-Button). Mit den oben genannten Methoden kannst du das Design deiner WordPress-Seite in wenigen Minuten aufwerten.

0