CSS Kultapainikegeneraattori

Metallinen painike tarvitsee liukuvärin, joka nappaa valoa ylhäältä alas, ei vain tasaisen värin. Tällä työkalulla kirjoitat painikkeesi tekstin, valitset metallityylin — Kulta, Hopea, Pronssi tai Roseekulta — säädät kulmien pyöristystä, ja saat heti CSS-koodin sekä live-esikatselun.

Mikä tämä työkalu on?

Tämä työkalu käyttää valmiiksi määriteltyä kolmivaiheista lineaarista liukuväriä jokaiselle metallityylille, viritettynä näyttämään valolta, joka heijastuu kiillotetusta metallipinnasta.

Vaihda Kulta-, Hopea-, Pronssi- ja Roseekulta-tyylien välillä tyylivalitsimella, kullakin oma liukuvärinsä, tekstivärinsä ja varjonsa kyseiseen metalliin viritettynä.

Live-esikatselu päivittyy heti kirjoittaessasi painikkeen tekstiä, vaihtaessasi tyyliä tai säätäessäsi kulmien pyöristystä, jotta näet tarkalleen miltä se näyttää ennen CSS:n kopiointia.

Miksi käyttää sitä?

Rakennat hinnoittelusivua ja haluat "Päivitä Premiumiin" -painikkeen erottuvan visuaalisesti ilmaisversion painikkeesta sen alla — kultainen liukuväri viestii "premiumia" nopeammin kuin pelkkä värinvaihto.
Suunnittelet kanta-asiakas- tai jäsenohjelmaa Pronssi-, Hopea- ja Kulta-tasoilla — luo kaikki kolme metallityyliä yhdellä istumalla, jotta visuaalinen hierarkia vastaa nimeämistä.
Verkkokaupan "Osta Nyt" tai "Lisää Ostoskoriin" -painike on tällä hetkellä tasainen brändiväri ja testit näyttävät, että se hukkuu sivulle — metallinen liukuväri lisää visuaalista painoa muuttamatta tekstiä.
Teet mockupia palkinto- tai todistussivulle ja tarvitset merkin, joka näyttää kultaiselta, hopeiselta tai pronssiselta ilman kuvankäsittelyohjelman avaamista.
Haluat roseekultaisen sävyn, joka sopii tiettyyn brändipalettiin (kauneus, korut, häät) yleisemmän keltakultaisen ilmeen sijaan, johon useimmat kultapainikegeneraattorit oletuksena päätyvät.
100% paikallinen: CSS luodaan kokonaan selaimessasi, mitään ei lähetetä palvelimelle.

Käyttöohje

Kirjoita painikkeen teksti.
Valitse metallityyli — Kulta, Hopea, Pronssi tai Roseekulta.
Säädä reunan pyöristysliukusäädintä sopimaan suunnitelmasi kulmatyyliin.
Klikkaa "Kopioi" kopioidaksesi luodun CSS-koodin ja liitä se tyylitiedostoosi.

Esimerkki

Syöte

Teksti: "Osta Nyt", Tyyli: Kulta, Pyöristys: 8

Tuloste

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;

Luotu CSS yhdistää kolmivaiheisen metallisen liukuvärin, sopivan tekstivärin ja varjon, sekä vakiomuotoisen painikkeen sisennyksen käyttövalmiiksi tyylilohkoksi.

Metallityylit yhdellä silmäyksellä

Jokainen metallityyli käyttää omaa viritettyä liukuväriään, tekstiväriään ja varjoväriään.

Tyyli	Liukuvärin sävy	Tekstin väri
Kulta	Lämmin keltakulta, vaaleasta tummaan vaaleaan	Syvä ruskeankultainen (#5c3d00)
Hopea	Viileä vaaleanharmaa, vaaleasta tummaan vaaleaan	Tummanharmaa (#333333)
Pronssi	Lämmin kuparinruskea, vaaleasta tummaan vaaleaan	Syvä ruskea (#3e2408)
Roseekulta	Pehmeä vaaleanpunertava, vaaleasta tummaan vaaleaan	Syvä ruusunpunainen (#4a1620)

Metallityylin sovittaminen käyttötarkoitukseesi

Kulta viestii lähes universaalisti "premiumista" tai "päivityksestä" — se on turvallisin oletus hinnoittelusivun CTA:ille, VIP-tasoille ja tilausten lisämyynnille.
Hopea toimii hyvin "toisena tasona" kultaisen vaihtoehdon rinnalla (Pronssi/Hopea/Kulta-kanta-asiakasohjelmat), tai yksinään viileämpänä, yritysmäisempänä sävynä kuin kulta tarjoaa.
Pronssi sopii kolmannen sijan merkkeihin, aloitustason jäsenyyksiin, tai mihin tahansa suunnitelmaan, joka haluaa lämpimän metallisen tunnun ilman kullan vahvempaa "ylellisyys"-konnotaatiota.
Roseekulta sopii kauneus-, koru-, häät- ja lifestyle-brändeille, joissa yleisempi keltakultainen ilme törmäisi jo valmiiksi vaaleanpunaiseen tai roseeväritykseen.

Aiheeseen liittyvät työkalut

Lisää CSS-generaattoreita löydät täältä.

→ Neon-tekstigeneraattori · CSS Kohokuviotekstigeneraattori · Border Radius -generaattori

Usein kysytyt kysymykset

Miksi liukuvärissä on kolme värikohtaa kahden sijaan?

Kolmivaiheinen liukuväri (vaalea, tumma, vaalea) jäljittelee sitä, miten valo heijastuu kaarevasta tai harjatusta metallipinnasta, mikä näyttää paljon realistisemmalta kuin yksinkertainen kahden värin siirtymä vaaleasta tummaan.

Voinko käyttää tätä linkissä tai div-elementissä painike-elementin sijaan?

Kyllä — luotu CSS koostuu pelkästään tavallisista background-, color-, border-radius-, box-shadow- ja text-shadow-ominaisuuksista, joten se toimii millä tahansa elementillä, jota normaalisti tyylittelisit painikkeena.

Miksi tekstin väri on tumma valkoisen sijaan?

Metallipinnat kuten kulta ja pronssi näyttävät parhaalta tummalla, lämpimällä tekstivärillä, joka sopii metallin sävyyn — valkoinen teksti näyttää usein tasaiselta ja rikkoo metallisen illuusion.

Tallentaako tai seuraako tämä työkalu kirjoittamaani?

Ei. CSS luodaan kokonaan selaimessasi — mitään ei lähetetä tai tallenneta palvelimelle.

Toimiiko tämä kaikissa selaimissa?

Kyllä — linear-gradient, box-shadow ja text-shadow tuetaan erinomaisesti kaikissa moderneissa selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge.

Miten lisään hover- tai active-tilan luotuun painikkeeseen?

Luotu CSS kattaa vain painikkeen oletustilan. Yleinen tapa on lisätä :hover-sääntö, joka tummentaa liukuvärin kohtia hieman tai kasvattaa box-shadow'n levittymää, plus transition: all 0.2s ease; perusluokkaan, jotta muutos animoituu sulavasti eikä äkkinäisesti.

Voinko muuttaa liukuvärin suuntaa, esimerkiksi vasemmalta oikealle ylhäältä alas -sijaan?

Kyllä — luotu linear-gradient(180deg, ...) käyttää 180 astetta ylhäältä alas -kiiltoon, mikä tuntuu luonnollisimmalta valosuunnalta painikkeelle. Muokkaa kulmaa kopioinnin jälkeen (90 astetta vasemmalta oikealle, 135 astetta viistoon kiiltoon), jos suunnitelmasi vaatii eri valosuunnan, vaikka hyvin loivat kulmat voivat saada kolmivaiheisen liukuvärin näyttämään enemmän raidoilta kuin metalliselta kaarelta.

Miksi painikkeeni näyttää tasaiselta metallisen sijaan CSS:n kopioinnin jälkeen?

Yleisin syy on toinen CSS-sääntö, joka ylikirjoittaa jonkin luoduista ominaisuuksista, erityisesti background tai background-color CSS-resetistä tai komponenttikirjastosta, joka korvaa liukuvärin hiljaisesti yksivärisellä taustalla. Tarkista selaimesi kehitystyökaluista, näkyykö background-ominaisuudessa yliviivaus vahvistaaksesi ylikirjoituksen, ja nosta valitsimen tarkkuutta tai lisää viimeisenä keinona !important.

Voinko yhdistää kultapainiketyylin tämän sivuston CSS Kohokuviotekstigeneraattorin kanssa?

Kyllä — ne kohdistuvat eri ominaisuuksiin, joten ristiriitaa ei ole. Luo painikkeen tausta, reuna ja box-shadow tässä, ja vaihda sitten Kohokuviotekstigeneraattorin kohokuvio-text-shadow-arvo painikkeen tekstiin, jos haluat itse tekstin myös näyttävän kohotetulta tai kaiverretulta tämän työkalun oletustasaisen text-shadow'n sijaan.

Vaikuttaako kulmien pyöristysliukusäädin muuhun kuin painikkeen muotoon?

Ei — se asettaa vain border-radius-arvon; liukuväri, varjo ja tekstin väri pysyvät muuttumattomina riippumatta kuinka pyöreät tai kulmikkaat reunat ovat. Terävämmät kulmat (pyöristys lähellä nollaa) näyttävät yleensä muodollisemmilta tai yritysmäisemmiltä, kun taas täysin pyöristetty pillerimuoto sopii usein paremmin leikkisiin tai verkkokauppa-yhteyksiin.