CodeKitHubCe este acest instrument?
Acest instrument aplică un gradient liniar predefinit cu trei opriri de culoare pentru fiecare stil metalic, ajustat să arate ca lumina reflectată de o suprafață metalică lustruită.
Comuți între Aur, Argint, Bronz și Roz-Aur folosind selectorul de stil, fiecare cu propriul gradient, culoare de text și umbră ajustate pentru acel metal.
O previzualizare live se actualizează instant pe măsură ce scrii textul butonului, schimbi stilurile sau ajustezi raza colțurilor, ca să vezi exact cum va arăta înainte de a copia CSS-ul.
De ce să-l folosești?
- Construiești o pagină de prețuri și vrei ca butonul "Upgrade la Premium" să iasă în evidență vizual față de butonul planului gratuit de mai jos — un gradient auriu semnalează "premium" mai rapid decât o simplă schimbare de culoare.
- Proiectezi un program de loialitate sau membru cu niveluri Bronz, Argint și Aur — generează toate cele trei stiluri metalice într-o singură sesiune, ca ierarhia vizuală să se potrivească cu denumirea.
- Un buton "Cumpără Acum" sau "Adaugă în Coș" dintr-un magazin online e momentan de o culoare plată a brandului, iar testele arată că se pierde pe pagină — un gradient metalic adaugă greutate vizuală fără să schimbi textul.
- Faci un mockup pentru o pagină de premii sau certificate și ai nevoie de o insignă care se citește ca aur, argint sau bronz fără să deschizi un editor de imagini.
- Vrei un accent roz-aur care se potrivește unei anumite palete de brand (frumusețe, bijuterii, site-uri de nuntă) în loc de aspectul mai comun de aur-galben la care se opresc majoritatea generatoarelor de butoane aurii.
- 100% local: CSS-ul e generat integral în browser, nimic nu este trimis către un server.
Cum se folosește
- Scrie textul butonului tău.
- Alege un stil metalic — Aur, Argint, Bronz sau Roz-Aur.
- Ajustează cursorul razei bordurii ca să se potrivească stilului colțurilor din designul tău.
- Apasă "Copiază" pentru a copia codul CSS generat și lipește-l în foaia de stil.
Exemplu
Intrare
Text: "Cumpără Acum", Stil: Aur, Rază: 8Rezultat
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;CSS-ul generat combină un gradient metalic cu trei opriri, o culoare de text și o umbră potrivite, și padding standard de buton, într-un bloc de stil gata de folosit.
Stilurile metalice pe scurt
Fiecare stil metalic folosește propriul gradient, culoare de text și culoare de umbră ajustate.
| Stil | Tonul Gradientului | Culoarea Textului |
|---|---|---|
| Aur | Auriu-galben cald, deschis la închis la deschis | Auriu-maro închis (#5c3d00) |
| Argint | Gri deschis rece, deschis la închis la deschis | Gri închis (#333333) |
| Bronz | Cupru-maro cald, deschis la închis la deschis | Maro închis (#3e2408) |
| Roz-Aur | Roz pal, deschis la închis la deschis | Roz închis (#4a1620) |
Potrivirea stilului metalic cu situația ta
- Aur se citește ca "premium" sau "upgrade" aproape universal — e cea mai sigură opțiune implicită pentru butoane call-to-action din pagini de prețuri, niveluri VIP și upsell-uri de abonament.
- Argint funcționează bine ca un "al doilea nivel" alături de o opțiune aurie (programe de loialitate Bronz/Argint/Aur), sau de sine stătător pentru un ton mai rece, mai corporatist decât oferă aurul.
- Bronz se potrivește insignelor de locul trei, nivelurilor de membru de bază, sau oricărui design care vrea o senzație metalică caldă fără conotația mai puternică de "lux" a aurului.
- Roz-Aur se potrivește brandurilor de frumusețe, bijuterii, nuntă și lifestyle, unde aspectul mai comun de aur-galben ar intra în conflict cu o paletă de culori deja roz sau pal.
Instrumente similare
Pentru mai multe generatoare CSS, încearcă acestea.
→ Generator de Text Neon · Generator de Text CSS în Relief · Generator Border Radius
Întrebări frecvente
De ce gradientul are trei opriri de culoare în loc de două?
Un gradient cu trei opriri (deschis, închis, deschis) imită modul în care lumina se reflectă pe o suprafață metalică curbată sau periată, ceea ce arată mult mai realist decât o simplă tranziție cu două culori de la deschis la închis.
Pot folosi asta pe un link sau un div în loc de un element buton?
Da — CSS-ul generat e format doar din proprietăți standard background, color, border-radius, box-shadow și text-shadow, deci funcționează pe orice element pe care l-ai stiliza în mod normal ca buton.
De ce culoarea textului e închisă în loc de albă?
Suprafețele metalice precum aurul și bronzul se citesc cel mai bine cu o culoare de text închisă, caldă, care se potrivește cu nuanța metalului — textul alb tinde să arate plat și strică iluzia metalică.
Instrumentul salvează sau urmărește ce scriu?
Nu. CSS-ul e generat integral în browser — nimic nu este trimis sau stocat pe un server.
Va funcționa în toate browserele?
Da — linear-gradient, box-shadow și text-shadow au toate suport excelent în toate browserele moderne, inclusiv Chrome, Firefox, Safari și Edge.
Cum adaug o stare de hover sau activă la butonul generat?
CSS-ul generat acoperă doar starea implicită a butonului. O abordare comună e să adaugi o regulă :hover care întunecă ușor opririle gradientului sau crește extinderea box-shadow-ului, plus un transition: all 0.2s ease; pe clasa de bază, ca schimbarea să se anime lin, nu brusc.
Pot schimba direcția gradientului, de exemplu de la stânga la dreapta în loc de sus în jos?
Da — linear-gradient(180deg, ...) generat folosește 180deg pentru un luciu de sus în jos, care se citește ca direcția cea mai naturală a luminii pentru un buton. Editează acel unghi după ce copiezi (90deg pentru stânga-dreapta, 135deg pentru un luciu diagonal) dacă designul tău cere o altă direcție a luminii, deși unghiurile foarte mici pot face gradientul cu trei opriri să arate mai mult ca niște dungi decât ca o curbă metalică.
De ce butonul meu arată plat în loc de metalic după ce copiez CSS-ul?
Cea mai comună cauză e o altă regulă CSS care suprascrie una dintre proprietățile generate, în special background sau background-color dintr-un reset CSS sau o bibliotecă de componente, care înlocuiește silențios gradientul cu o culoare solidă. Verifică instrumentele de dezvoltare din browser pentru o linie tăiată peste proprietatea background pentru a confirma că e suprascrisă, și crește specificitatea selectorului sau adaugă !important ca ultimă soluție.
Pot combina stilul de buton auriu cu Generatorul de Text CSS în Relief de pe acest site?
Da — vizează proprietăți diferite, deci nu există conflict. Generează fundalul, bordura și box-shadow-ul butonului aici, apoi înlocuiește-le cu o valoare text-shadow în relief din Generatorul de Text în Relief pentru eticheta butonului, dacă vrei ca textul în sine să pară și el ridicat sau gravat, în loc să folosești text-shadow-ul plat implicit al acestui instrument.
Cursorul razei colțurilor afectează altceva în afară de forma butonului?
Nu — setează doar valoarea border-radius; gradientul, umbra și culoarea textului nu sunt afectate, indiferent cât de rotunjite sau pătrate sunt colțurile. Colțurile mai ascuțite (rază aproape de 0) tind să se citească mai formal sau corporatist, în timp ce o formă de pilulă complet rotunjită se potrivește adesea mai bine contextelor jucăușe sau de e-commerce.