Ez a példa csak a generátor vezérlőit használja. A fenti képek a ténylegesen letöltött stíluslapokat mutatják, amelyeket szokásos HTML gombokra alkalmaztak, nem a szerkesztő képernyőképei.
Nyissa meg a CSS Gombgenerátort
Kezdje a Signature-rel
Nyissa meg a CSS Gombgenerátort. Az Előbeállítások (Presets) között válassza a Signature-t az Everyday gyűjteményből. Állítsa a gomb szövegét „Get started”-re. A kódterületen állítsa az osztály nevét (Class name) cta-button-ra.
Az előbeállítás felülírja az alapértelmezett és a kurzor alatti stílusokat, miközben a címke és az osztálynév megmarad. Válassza ki a kiindulópontot, mielőtt részletes módosításokat végezne.
Az osztálynév összekapcsolja a CSS szabályokat a HTML gombjával. A generátor megtisztítja a nem támogatott karaktereket; használjon rövid, jellegzetes nevet, hogy elkerülje a nem kapcsolódó elemek formázását.
A színátmenetes, lekerekített gomb létrehozása
Tartsa az Editing state-et Default (Alapértelmezett) állásban. A Text (Szöveg) menüben válassza a System sans betűtípust, a betűméret legyen 18 px, a vastagság pedig Bold (Félkövér). Tartsa meg a fehér szövegszínt, a normál stílust, a középre igazítást és a 1.4 sormagasságot.
A Fill (Kitöltés) menüben válassza a Linear gradient (Lineáris színátmenet) lehetőséget. Használja az alábbi két színt és szöget. Állítsa a vízszintes térközt (Horizontal padding) 32 px-re, a függőlegeset (Vertical padding) pedig 16 px-re. A Shape (Alakzat) menüben tartsa bekapcsolva a Link all corners (Összes sarok összekapcsolása) opciót, és állítsa a sarok sugarát (Corner radius) 100 px-re. A keret szélessége (Border width) maradjon 0 px.
A Shadow (Árnyék) menüben tartsa bekapcsolva a Box shadow (Dobozárnyék) opciót. Használjon 0 px vízszintes eltolást, 8 px függőleges eltolást, 24 px elmosást, −4 px terjedést, #460BD8 színt és 32% átlátszatlanságot. Hagyja kikapcsolva az Inset shadow (Belső árnyék) és a Text shadow (Szövegárnyék) opciókat.
A térköz (padding) módosítja a szöveg körüli helyet. A sarok sugara módosítja a körvonalat. A nagy sugár hozza létre ezt a lekerekített formát anélkül, hogy a címkét szélesebbé tenné.
Adjon külön kezelést a kurzor alatti állapotnak
Váltson az Editing state-et Hover (Kurzor alatti) állapotra. A Fill (Kitöltés) menüben módosítsa a háttérszínt #33099E-re, a második színt pedig #6D20BF-re. Tartsa a színátmenet szögét 135°-on. Az árnyéknál (Shadow) módosítsa a függőleges eltolást 10 px-re, az elmosást pedig 28 px-re. A többi beállítást hagyja változatlanul.
Használja a vásznon lévő Default, Hover és Active gombokat az egyes állapotok ellenőrzéséhez. A kurzort a gomb fölé húzva vagy megnyomva is tesztelheti az előnézetet. Váltson a világos és sötét vászon között, hogy ellenőrizze a széleket és az árnyékot.
Az Editing state választja ki, mely stílusokat módosítja. A vászon állapota csak azt változtatja meg, amit előnézetben lát. Térjen vissza a Default szerkesztéshez, mielőtt módosítaná az alapértelmezett megjelenést.
A kurzor alatti tulajdonságok, amelyek továbbra is megegyeznek az alapértelmezettel, követik a későbbi alapértelmezett módosításokat. Ha egyszer testreszab egy kurzor alatti tulajdonságot, az független marad. Az alapstílus módosítása után ellenőrizze mindkét állapotot.
Exportálás és tesztelés az oldalon
Válassza a CSS lapot, és használja a Copy CSS parancsot, vagy válassza a Download lehetőséget a cta-button.css mentéséhez. Válassza a HTML lapot, és másolja ki a megfelelő gombjelölést. A HTML tartalmazza ugyanazt az osztálynevet és egy type="button" típusú gombot.
Adja hozzá a CSS-t a stíluslapjához, vagy linkelje a letöltött fájlt az oldaláról. Helyezze el a HTML-et ott, ahová a gomb tartozik. A két export együtt működik: egy HTML gomb önmagában nem tartalmazza a stílusát.
Nyissa meg az oldalt, és tesztelje az alapértelmezett, kurzor alatti, billentyűzetfókusz és lenyomott állapotokat. Az export tartalmaz egy fókusz-látható körvonalat, egy kis aktív mozgást és egy mozgáscsökkentő szabályt. A környező stílusok és a telepített betűtípusok továbbra is befolyásolhatják az eredményt.
A generált gomb egy formázott vezérlő. Csatlakoztassa a kattintási viselkedést a projektjében; használja a megfelelő gomb típust, amikor űrlaphoz adja hozzá.
cta-button.css
A letöltött fájl neve követi az osztály nevét.
Gyakori kérdések
Szükségem van CSS keretrendszerre?
Nem. A kimenet szabványos CSS, plusz egy egyszerű HTML gomb. Illessze be a CSS kódot a saját stíluslapjába, és használja a megfelelő osztályt a gombon.
A letöltés a HTML fájlt is menti?
A letöltés egy .css fájlt ment el, amely az osztály nevét viseli. A gomb jelölését külön másolja ki a HTML lapról.
Megadhatok minden saroknak különböző sugarat?
Igen. A Shape (Alakzat) menüben kapcsolja ki a Link all corners (Összes sarok összekapcsolása) opciót, majd állítsa be külön a bal felső, jobb felső, jobb alsó és bal alsó sarkot. Ez a példa a lekerekített forma érdekében összekapcsolva tartja őket.
Megmarad a tervem a következő alkalomra?
A stúdió megpróbálja elmenteni az aktuális vázlatot a böngésző helyi tárhelyére. Ez nem fiók vagy eszközök közötti biztonsági mentés. A böngésző beállításai, az oldaladatok törlése vagy a Visszaállítás eltávolíthatja vagy felülírhatja azt, ezért exportáld a megőrizni kívánt munkát.
Felkerül a gombom egy szerverre?
A stílus előnézete és a CSS/HTML generálása a böngésződben fut. A szerkesztő nem tölti fel a gomb szövegét vagy a stílusvázlatot az export létrehozásához.
Adj a következő gombodnak saját stílust.
Válassz egy kiindulópontot, állítsd be a részleteket, és vidd be a kódot a projektedbe.