CSS Gold Button Generator

Was ist dieses Tool?

Dieses Tool wendet für jeden Metallstil einen vordefinierten dreistufigen linearen Verlauf an, der so abgestimmt ist, dass er wie Licht wirkt, das sich auf einer polierten Metalloberfläche spiegelt.

Wechsle über den Stil-Auswähler zwischen Gold, Silber, Bronze und Roségold — jeder mit eigenem Verlauf, eigener Textfarbe und eigenem Schatten, passend zu diesem Metall.

Eine Live-Vorschau aktualisiert sich sofort, während du deinen Button-Text eingibst, den Stil wechselst oder den Eckenradius anpasst, sodass du genau siehst, wie es aussehen wird, bevor du das CSS kopierst.

Warum sollte man es nutzen?

• Du launchst eine Preisseite mit einem "Premium"- oder "VIP"-Plan und willst, dass der Abo-Button dem Preis gerecht wird, nicht wie ein generischer grauer Framework-Button aussieht.
• Ein E-Commerce-Kunde wünscht, dass der "Jetzt kaufen"-Button in seinem Schmuck- oder Uhrenshop Luxus vermittelt, und ein flacher blauer Button schafft das nicht — Gold oder Bronze passt zur Produktästhetik.
• Du gestaltest ein digitales "Erfolg freigeschaltet"-Badge oder Zertifikat für eine Gamification-App und brauchst ein metallisch wirkendes Siegel statt eines einfarbigen Badges.
• Du willst die drei Mitgliedschaftsstufen deiner Website (Bronze, Silber, Gold) mit Buttons gestalten, die die Hierarchie visuell widerspiegeln, statt für alle drei dieselbe Farbe zu verwenden.
• Du hast den Stil Gold ausprobiert, aber deine Marke setzt auf kühlere, elegantere Töne — wechsle zu Silber oder Roségold und vergleiche in der Vorschau, was besser zu deiner Palette passt.
• Du musst den Eckenradius anpassen, damit der Button zum Rest deines Designsystems passt (stark abgerundete oder fast eckige Ecken), ohne den metallischen Glanzeffekt zu verlieren.

Anleitung

1. Gib deinen Button-Text ein.
2. Wähle einen Metallstil — Gold, Silber, Bronze oder Roségold.
3. Passe den Regler für den Eckenradius an, damit er zum Kantenstil deines Designs passt.
4. Klicke auf „Kopieren“, um den generierten CSS-Code zu kopieren, und füge ihn in dein Stylesheet ein.

Beispiel

Eingabe

Text: "Buy Now", Style: Gold, Radius: 8

Ausgabe

background: linear-gradient(180deg, #f9e28c 0%, #d4a017 50%, #f9e28c 100%);
color: #5c3d00;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(212,160,23,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
padding: 12px 32px;
font-weight: 600;
cursor: pointer;

Der generierte CSS-Code kombiniert einen dreistufigen metallischen Verlauf, eine passende Textfarbe und Schatten sowie ein standardmäßiges Button-Padding zu einem einsatzbereiten Stilblock.

Metallstile auf einen Blick

Jeder Metallstil verwendet einen eigens abgestimmten Verlauf, eine eigene Textfarbe und eine eigene Schattenfarbe.

Verwandte Tools

Für weitere CSS-Generatoren probiere diese aus.

→ Neon Text Generator · CSS Emboss Text Generator · Border-Radius-Generator

Das richtige Metall je nach Kontext wählen

Jede Metallic-Optik vermittelt ein anderes Gefühl, und die falsche Wahl kann den Button vom Rest des Designs abgesetzt wirken lassen.

• Gold signalisiert Premium oder Exklusivität — ideal für den teuersten Plan einer Preistabelle oder einen hochwertigen Checkout-Button.
• Silber eignet sich gut für wichtige sekundäre Aktionen wie "Details ansehen" bei einem mittleren Plan, ohne visuell mit einem nahen Gold-Button zu konkurrieren.
• Bronze wird natürlich mit dem dritten Platz oder der Einstiegsstufe assoziiert — nutze es für den Basisplan innerhalb einer Drei-Stufen-Hierarchie.
• Roségold passt am besten zu Marken aus Mode, Beauty oder Lifestyle, wo der warme, sanfte Ton passender wirkt als klassisches Gold.

Häufig gestellte Fragen