CodeKitHubČo je tento nástroj?
Tento nástroj aplikuje prednastavený trojbodový lineárny gradient pre každý kovový štýl, naladený tak, aby vyzeral ako svetlo odrážajúce sa od vyleštenej kovovej plochy.
Prepínaš medzi Zlatý, Strieborný, Bronzový a Ružovozlatý pomocou výberu štýlu, každý s vlastným gradientom, farbou textu a tieňom naladeným na daný kov.
Živý náhľad sa okamžite aktualizuje počas písania textu tlačidla, prepínania štýlov alebo úpravy polomeru rohov, takže presne vidíš, ako bude vyzerať pred skopírovaním CSS.
Prečo ho používať?
- Staviaš cenníkovú stránku a chceš, aby tlačidlo "Prejsť na Premium" vizuálne vynikalo oproti tlačidlu bezplatnej úrovne nižšie — zlatý gradient signalizuje "prémiové" rýchlejšie než samotná zmena farby.
- Navrhuješ vernostný alebo členský program s úrovňami Bronz, Striebro a Zlato — vygeneruj všetky tri kovové štýly na jedno posedenie, aby vizuálna hierarchia sedela s pomenovaním.
- E-shopové tlačidlo "Kúpiť teraz" alebo "Pridať do košíka" je momentálne plochou farbou značky a testy ukazujú, že sa na stránke stráca — kovový gradient pridá vizuálnu váhu bez zmeny textu.
- Vytváraš mockup stránky s ocenením alebo certifikátmi a potrebuješ odznak, ktorý pôsobí ako zlato, striebro alebo bronz bez otvárania editora obrázkov.
- Chceš ružovozlatý akcent, ktorý ladí s konkrétnou paletou značky (krása, šperky, svadobné weby), namiesto bežnejšieho žlto-zlatého vzhľadu, na ktorom väčšina generátorov zlatých tlačidiel štandardne stojí.
- 100% lokálne: CSS sa generuje výlučne v prehliadači, nič sa neposiela na server.
Ako sa používa
- Napíš text svojho tlačidla.
- Vyber kovový štýl — Zlatý, Strieborný, Bronzový alebo Ružovozlatý.
- Uprav posuvník polomeru okraja tak, aby sedel so štýlom rohov v tvojom dizajne.
- Klikni na "Kopírovať" pre skopírovanie vygenerovaného CSS kódu a vlož ho do svojho štýlu.
Príklad
Vstup
Text: "Kúpiť teraz", Štýl: Zlatý, Polomer: 8Vý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 trojbodový kovový gradient, zodpovedajúcu farbu textu a tieň a štandardné odsadenie tlačidla do hotového štýlového bloku.
Kovové štýly v skratke
Každý kovový štýl používa vlastný naladený gradient, farbu textu a farbu tieňa.
| Štýl | Tón Gradientu | Farba Textu |
|---|---|---|
| Zlatý | Teplé žlto-zlaté, svetlé po tmavé po svetlé | Tmavý hnedozlatý (#5c3d00) |
| Strieborný | Chladné svetlosivé, svetlé po tmavé po svetlé | Tmavosivý (#333333) |
| Bronzový | Teplé medeno-hnedé, svetlé po tmavé po svetlé | Tmavohnedý (#3e2408) |
| Ružovozlatý | Jemné ružové, svetlé po tmavé po svetlé | Tmavoružový (#4a1620) |
Výber kovového štýlu podľa účelu použitia
- Zlatá pôsobí ako "prémiové" alebo "upgrade" takmer univerzálne — je najbezpečnejšou predvolenou voľbou pre CTA na cenníkových stránkach, VIP úrovne a upsell predplatných.
- Striebro funguje dobre ako "druhá úroveň" popri zlatej voľbe (vernostné programy Bronz/Striebro/Zlato), alebo samostatne pre chladnejší, korporátnejší tón než ponúka zlato.
- Bronz sa hodí na odznaky tretieho miesta, základné úrovne členstva, alebo akýkoľvek dizajn, ktorý chce teplý kovový pocit bez silnejšej "luxusnej" konotácie zlata.
- Ružové zlato sedí značkám z oblasti krásy, šperkov, svadieb a lifestylu, kde by bežnejší žlto-zlatý vzhľad kolidoval s už ružovou alebo pastelovou paletou farieb.
Súvisiace nástroje
Pre ďalšie CSS generátory vyskúšaj tieto.
→ Generátor Neónového Textu · Generátor CSS Vypuklého Textu · Generátor Border Radius
Časté otázky
Prečo má gradient tri farebné body namiesto dvoch?
Trojbodový gradient (svetlý, tmavý, svetlý) napodobňuje spôsob, akým sa svetlo odráža od zakrivenej alebo kefovanej kovovej plochy, čo vyzerá oveľa realistickejšie než jednoduchý dvojfarebný prechod zo svetlej do tmavej.
Môžem toto použiť na odkaz alebo div namiesto prvku tlačidla?
Áno — vygenerované CSS pozostáva len zo štandardných vlastností background, color, border-radius, box-shadow a text-shadow, takže funguje na akomkoľvek prvku, ktorý by si bežne štylizoval ako tlačidlo.
Prečo je farba textu tmavá namiesto bielej?
Kovové povrchy ako zlato a bronz pôsobia najlepšie s tmavou, teplou farbou textu, ktorá zodpovedá odtieňu kovu — biely text zvyčajne vyzerá plocho a narúša kovovú ilúziu.
Ukladá alebo sleduje nástroj to, čo napíšem?
Nie. CSS sa generuje výlučne v prehliadači — nič sa neposiela ani neukladá na server.
Bude to fungovať vo všetkých prehliadačoch?
Áno — linear-gradient, box-shadow a text-shadow majú všetky vynikajúcu podporu vo všetkých moderných prehliadačoch vrátane Chrome, Firefox, Safari a Edge.
Ako pridám stav hover alebo aktívny stav k vygenerovanému tlačidlu?
Vygenerované CSS pokrýva len predvolený stav tlačidla. Bežný postup je pridať pravidlo :hover, ktoré mierne stmaví body gradientu alebo zväčší rozptyl box-shadow, plus transition: all 0.2s ease; na základnej triede, aby sa zmena animovala plynulo namiesto okamžitého skoku.
Môžem zmeniť smer gradientu, napríklad zľava doprava namiesto zhora nadol?
Áno — vygenerovaný linear-gradient(180deg, ...) používa 180deg pre lesk zhora nadol, ktorý pôsobí ako najprirodzenejší smer svetla pre tlačidlo. Uprav tento uhol po skopírovaní (90deg pre zľava doprava, 135deg pre diagonálny lesk), ak tvoj dizajn vyžaduje iný smer svetla, hoci veľmi plytké uhly môžu spôsobiť, že trojbodový gradient bude vyzerať skôr ako pruhy než ako kovová krivka.
Prečo moje tlačidlo vyzerá ploché namiesto kovového po skopírovaní CSS?
Najčastejšou príčinou je iné CSS pravidlo prepisujúce jednu z vygenerovaných vlastností, najmä background alebo background-color z CSS resetu alebo knižnice komponentov, ktoré ticho nahradí gradient plnou farbou. Skontroluj vývojárske nástroje prehliadača, či nie je vlastnosť background preškrtnutá, čo potvrdí, že je prepísaná, a zvýš špecifickosť selektora alebo ako poslednú možnosť pridaj !important.
Môžem skombinovať štýl zlatého tlačidla s Generátorom CSS Vypuklého Textu na tomto webe?
Áno — cielia na odlišné vlastnosti, takže nedochádza ku konfliktu. Vygeneruj pozadie, okraj a box-shadow tlačidla tu a potom pre popisok tlačidla vlož vypuklú hodnotu text-shadow z Generátora Vypuklého Textu, ak chceš, aby aj samotný text vyzeral vystupujúco alebo vyryto, namiesto použitia predvoleného plochého text-shadow tohto nástroja.
Ovplyvňuje posuvník polomeru rohov niečo iné okrem tvaru tlačidla?
Nie — nastavuje len hodnotu border-radius; gradient, tieň a farba textu zostávajú nezmenené bez ohľadu na to, aké zaoblené alebo hranaté sú rohy. Ostrejšie rohy (polomer blízko 0) zvyčajne pôsobia formálnejšie alebo korporátnejšie, kým plne zaoblený tvar pilulky často lepšie sedí do hravejších alebo e-commerce kontextov.