Generátor zlatých tlačítek CSS

Co je tento nástroj?

Nástroj použije přednastavený třístupňový lineární gradient pro každý styl kovu, vyladěný tak, aby vypadal jako světlo odrážející se od leštěného kovového povrchu.

Přepínejte mezi Zlatem, Stříbrem, Bronzem a Růžovým zlatem pomocí výběru stylu, každý s vlastním gradientem, barvou textu a stínem vyladěným pro daný kov.

Živý náhled se aktualizuje okamžitě, jak píšete text tlačítka, přepínáte styly nebo upravujete zaoblení rohů, takže přesně vidíte, jak bude vypadat, než zkopírujete CSS.

Proč ho používat?

• Tvoříte ceníkovou stránku a chcete, aby tlačítko „Upgradovat na Premium“ vizuálně vyčnívalo od tlačítka pod ním pro zdarma tarif — zlatý gradient signalizuje „prémiové“ rychleji než pouhá změna barvy.
• Navrhujete věrnostní nebo členský program s úrovněmi Bronz, Stříbro a Zlato — vygenerujte všechny tři styly kovu najednou, aby vizuální hierarchie odpovídala pojmenování.
• Tlačítko e-shopu „Koupit“ nebo „Přidat do košíku“ má momentálně plochou barvu značky a testy ukazují, že se ztrácí na stránce — kovový gradient přidá vizuální váhu bez změny textu.
• Vytváříte mockup stránky s oceněními nebo certifikáty a potřebujete odznak, který vypadá zlatě, stříbrně nebo bronzově, aniž byste otevírali editor obrázků.
• Chcete akcent v růžovém zlatě, který odpovídá konkrétní paletě značky (kosmetika, šperky, svatební weby), místo běžnějšího žlutozlatého vzhledu, na který výchozí nastavuje většina generátorů zlatých tlačítek.
• 100% lokálně: CSS se generuje výhradně ve vašem prohlížeči, nic se neposílá na server.

Jak se používá

1. Napište text svého tlačítka.
2. Vyberte styl kovu — Zlato, Stříbro, Bronz nebo Růžové zlato.
3. Upravte posuvník zaoblení rohů podle stylu rohů vašeho designu.
4. Klikněte na „Kopírovat“ pro zkopírování vygenerovaného CSS kódu a vložte ho do svého stylopisu.

Příklad

Vstup

Text: „Koupit teď“, Styl: Zlato, Zaoblení: 8

Výstup

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;

Vygenerované CSS kombinuje třístupňový kovový gradient, odpovídající barvu a stín textu a standardní odsazení tlačítka do hotového bloku stylu.

Styly kovů na první pohled

Každý styl kovu používá vlastní vyladěný gradient, barvu textu a barvu stínu.

Jak přiřadit styl kovu k vašemu použití

• Zlato se čte jako „prémiové“ nebo „upgrade“ téměř univerzálně — je to nejbezpečnější výchozí volba pro CTA na ceníkových stránkách, VIP úrovně a nabídky upgradu předplatného.
• Stříbro funguje dobře jako „druhá úroveň“ vedle zlaté volby (věrnostní programy Bronz/Stříbro/Zlato), nebo samostatně pro chladnější, korporátnější tón než zlato.
• Bronz se hodí na odznaky třetího místa, vstupní úrovně členství nebo jakýkoli design, který chce teplý kovový pocit bez silnější „luxusní“ konotace zlata.
• Růžové zlato sedí do kosmetiky, šperků, svatebních a lifestylových značek, kde by běžnější žlutozlatý vzhled kolidoval s už růžovou nebo pastelovou paletou barev.

Související nástroje

Další generátory CSS.

→ Generátor neonového textu · Generátor reliéfního textu CSS · Generátor zaoblených rohů

Časté dotazy