CodeKitHubMi ez az eszköz?
Ez az eszköz minden fémstílushoz egy előre beállított, három megállóponttal rendelkező lineáris színátmenetet alkalmaz, amelyet úgy hangoltak, hogy csiszolt fémfelületről visszaverődő fényre hasonlítson.
Válthatsz Arany, Ezüst, Bronz és Rozéarany között a stílusválasztóval, mindegyik saját színátmenettel, szövegszínnel és árnyékkal rendelkezik, az adott fémhez hangolva.
Az élő előnézet azonnal frissül, ahogy beírod a gomb szövegét, stílust váltasz vagy módosítod a lekerekítést, így pontosan látod, hogyan fog kinézni, mielőtt kimásolnád a CSS-t.
Miért érdemes használni?
- Árazási oldalt építesz, és azt szeretnéd, hogy a „Frissítés Prémiumra” gomb vizuálisan elváljon az alatta lévő ingyenes csomag gombjától — az arany színátmenet gyorsabban jelzi a „prémium” jelleget, mint önmagában a színcsere.
- Hűségprogramot vagy tagsági rendszert tervezel Bronz, Ezüst és Arany szintekkel — generáld le mindhárom fémstílust egy ülésben, hogy a vizuális hierarchia illeszkedjen az elnevezéshez.
- Egy webáruház „Megvásárlás” vagy „Kosárba” gombja jelenleg sima márkaszínű, és a tesztelés szerint elvész az oldalon — egy fémes színátmenet vizuális súlyt ad a szöveg megváltoztatása nélkül.
- Egy díj- vagy oklevéloldalt maketteltek, és aranyként, ezüstként vagy bronzként ható jelvényre van szükséged, képszerkesztő megnyitása nélkül.
- Egy adott márkapalettához (szépségápolás, ékszer, esküvői oldalak) illő rozéarany kiegészítőt szeretnél, nem a legtöbb arany gomb generátor alapértelmezett sárgásarany hatását.
- 100%-ban helyi: a CSS teljesen a böngésződben generálódik, semmi sem kerül szerverre.
Használati útmutató
- Írd be a gomb szövegét.
- Válassz fémstílust — Arany, Ezüst, Bronz vagy Rozéarany.
- Állítsd be a lekerekítés csúszkát a designod sarokstílusához.
- Kattints a „Másolás” gombra a generált CSS kód kimásolásához, és illeszd be a stíluslapodba.
Példa
Bemenet
Szöveg: „Megvásárlás”, Stílus: Arany, Lekerekítés: 8Kimenet
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;A generált CSS egy három megállópontos fémes színátmenetet, hozzáillő szövegszínt és árnyékot, valamint szabványos gombkitöltést kombinál egy azonnal használható stílusblokkban.
Fémstílusok egy pillantásra
Minden fémstílus saját, hangolt színátmenetet, szövegszínt és árnyékszínt használ.
| Stílus | Színátmenet tónusa | Szövegszín |
|---|---|---|
| Arany | Meleg sárgásarany, világosból sötétbe majd világosba | Mély barnásarany (#5c3d00) |
| Ezüst | Hűvös világosszürke, világosból sötétbe majd világosba | Sötétszürke (#333333) |
| Bronz | Meleg rézbarna, világosból sötétbe majd világosba | Mély barna (#3e2408) |
| Rozéarany | Lágy rózsaszín, világosból sötétbe majd világosba | Mély rózsaszín (#4a1620) |
Hogyan illeszd a fémstílust a felhasználási esetedhez
- Az Arany szinte egyetemesen „prémiumot” vagy „frissítést” jelent — ez a legbiztosabb alapértelmezés árazási oldalak CTA-jaihoz, VIP szintekhez és előfizetés-upsell gombokhoz.
- Az Ezüst jól működik „második szintként” egy arany opció mellett (Bronz/Ezüst/Arany hűségprogramok), vagy önmagában, hűvösebb, vállalatiasabb hangvételért, mint amit az arany ad.
- A Bronz illik a harmadik helyezés jelvényeihez, kezdő szintű tagsághoz, vagy bármely designhoz, amely meleg fémes hatást szeretne az arany erősebb „luxus” konnotációja nélkül.
- A Rozéarany a szépségápolási, ékszer-, esküvői és életmódmárkákhoz illik, ahol a gyakoribb sárgásarany megjelenés ütne egy már rózsaszínes vagy pasztell színpalettával.
Kapcsolódó eszközök
További CSS generátorok.
→ Neonszöveg generátor · CSS dombornyomott szöveg generátor · Border-radius generátor
Gyakori kérdések
Miért van a színátmenetnek három színmegállója kettő helyett?
A három megállópontos színátmenet (világos, sötét, világos) utánozza, ahogyan a fény egy görbe vagy csiszolt fémfelületről visszaverődik, ami sokkal valósághűbb, mint egy egyszerű, kétszínű, világosból sötétbe átmenő elmosódás.
Használhatom ezt egy linken vagy divben gombelem helyett?
Igen — a generált CSS csak szabványos background, color, border-radius, box-shadow és text-shadow tulajdonságokat tartalmaz, így bármilyen elemen működik, amit egyébként gombként stílusoznál.
Miért sötét a szövegszín fehér helyett?
A fémes felületek, mint az arany és a bronz, a legjobban egy sötét, meleg, a fém árnyalatához illő szövegszínnel érvényesülnek — a fehér szöveg gyakran laposnak tűnik, és megtöri a fémes illúziót.
Menti vagy nyomon követi az eszköz, amit beírok?
Nem. A CSS teljes egészében a böngésződben generálódik — semmi sem kerül szerverre vagy tárolásra.
Ez minden böngészőben működni fog?
Igen — a linear-gradient, box-shadow és text-shadow is kiváló támogatottsággal rendelkezik minden modern böngészőben, beleértve a Chrome-ot, Firefoxot, Safarit és Edge-et.
Hogyan adjak hover vagy active állapotot a generált gombhoz?
A generált CSS csak a gomb alapállapotát fedi le. Gyakori megoldás egy :hover szabály hozzáadása, amely kicsit sötétíti a színátmenet megállópontjait vagy növeli a box-shadow terjedését, plusz egy transition: all 0.2s ease; az alaposztályon, hogy a változás simán animálódjon a hirtelen váltás helyett.
Megváltoztathatom a színátmenet irányát, például balról jobbra fentről lefelé helyett?
Igen — a generált linear-gradient(180deg, ...) 180 fokot használ a fentről lefelé irányuló csillogáshoz, ami a legtermészetesebb fényiránynak hat egy gombnál. Szerkeszd ezt a szöget kimásolás után (90 fok balról jobbra, 135 fok átlós csillogáshoz), ha a designod más fényirányt igényel, bár nagyon lapos szögek miatt a három megállópontos színátmenet inkább csíkosnak, mint fémes ívnek tűnhet.
Miért néz ki laposnak a gombom fémes helyett, miután kimásoltam a CSS-t?
A leggyakoribb ok, hogy egy másik CSS szabály felülírja a generált tulajdonságok egyikét, különösen a background vagy background-color tulajdonságot egy CSS reset vagy komponenskönyvtár miatt, amely csendben egyszínűre cseréli a színátmenetet. Nézd meg a böngésző fejlesztői eszközeiben, hogy a background tulajdonság áthúzva jelenik-e meg — ez megerősíti a felülírást —, és növeld a szelektor specifikusságát, vagy végső esetben adj hozzá !important-et.
Kombinálhatom az arany gomb stílust az oldal CSS dombornyomott szöveg generátorával?
Igen — eltérő tulajdonságokra célzódnak, így nincs ütközés. Generáld le itt a gomb hátterét, keretét és box-shadow-ját, majd cseréld le a gombfeliratra a Dombornyomott szöveg generátor egy dombornyomott text-shadow értékét, ha azt szeretnéd, hogy maga a szöveg is dombornak vagy vésettnek tűnjön ennek az eszköznek az alapértelmezett lapos text-shadow-ja helyett.
Befolyásol a lekerekítés csúszka mást is a gomb alakján kívül?
Nem — csak a border-radius értéket állítja; a színátmenet, az árnyék és a szövegszín nem változik, függetlenül attól, mennyire kerekek vagy szögletesek a sarkok. Az élesebb sarkok (lekerekítés 0 közelében) formálisabbnak vagy vállalatibbnak hatnak, míg a teljesen lekerekített pirula alak gyakran jobban illik játékos vagy webáruház kontextusba.