Tento príklad používa iba ovládacie prvky generátora. Obrázky vyššie zobrazujú skutočné stiahnuté súbory so štýlmi aplikované na bežné tlačidlá HTML, nie snímky obrazovky editora.
Otvoriť generátor tlačidiel CSS
Začnite s Signature
Otvorte generátor tlačidiel CSS. V časti Predvoľby vyberte Signature z kolekcie Everyday. Nastavte text tlačidla na „Get started“. V oblasti kódu nastavte názov triedy na cta-button.
Predvoľba nahradí predvolené štýly a štýly pri prejdení myšou, zatiaľ čo váš štítok a názov triedy zostanú zachované. Pred vykonaním podrobných úprav si vyberte východiskový bod.
Názov triedy spája pravidlá CSS s vaším tlačidlom HTML. Generátor vyčistí nepodporované znaky; použite krátky, charakteristický názov, aby ste predišli štylovaniu nesúvisiacich prvkov.
Vytvorte pilulku s prechodom
Ponechajte stav úprav na Default. V časti Text vyberte System sans, veľkosť písma 18 px a hrúbku Bold. Ponechajte bielu farbu textu, normálny štýl, centrované zarovnanie a výšku riadku 1.4.
Vo výplni (Fill) vyberte Lineárny prechod. Použite dve farby a uhol uvedený nižšie. Nastavte horizontálne odsadenie na 32 px a vertikálne odsadenie na 16 px. V časti Tvar (Shape) ponechajte zapnutú možnosť Prepojiť všetky rohy a nastavte polomer rohov na 100 px. Šírka okraja zostáva 0 px.
V časti Tieň (Shadow) ponechajte zapnutý tieň poľa (Box shadow). Použite horizontálne odsadenie 0 px, vertikálne odsadenie 8 px, rozostrenie 24 px, roztiahnutie −4 px, farbu #460BD8 a nepriehľadnosť 32%. Vnútorný tieň a tieň textu nechajte vypnuté.
Odsadenie mení priestor okolo textu. Polomer rohov mení obrys. Veľký polomer vytvorí tento tvar pilulky bez toho, aby sa štítok rozšíril.
Dajte stavu pri prejdení myšou vlastné spracovanie
Prepnite stav úprav na Hover. Vo výplni zmeňte farbu pozadia na #33099E a druhú farbu na #6D20BF. Ponechajte uhol prechodu na 135°. V časti Tieň zmeňte vertikálne odsadenie na 10 px a rozostrenie na 28 px. Ostatné nastavenia ponechajte nezmenené.
Použite tlačidlá Default, Hover a Active na plátne na kontrolu každého stavu. Môžete tiež prejsť myšou alebo stlačiť tlačidlo ukážky. Zmeňte plátno medzi svetlým a tmavým režimom, aby ste skontrolovali jeho okraj a tieň.
Stav úprav určuje, ktoré štýly meníte. Stav plátna mení iba to, čo si prezeráte. Pred úpravou základného vzhľadu sa vráťte do stavu úprav Default.
Vlastnosti pri prejdení myšou, ktoré sa stále zhodujú s predvolenými, nasledujú po neskorších predvolených úpravách. Akonáhle prispôsobíte vlastnosť pri prejdení myšou, zostane nezávislá. Po zmene základného štýlu znova skontrolujte oba stavy.
Exportujte a otestujte na svojej stránke
Vyberte kartu CSS a použite Kopírovať CSS, alebo zvoľte Stiahnuť pre uloženie cta-button.css. Vyberte kartu HTML a skopírujte zodpovedajúce značky tlačidla. HTML obsahuje rovnaký názov triedy a tlačidlo s typom „button“.
Pridajte CSS do svojho súboru so štýlmi alebo prepojte stiahnutý súbor zo svojej stránky. Umiestnite HTML tam, kam tlačidlo patrí. Dva exporty fungujú spoločne: samotné tlačidlo HTML neobsahuje svoje štýlovanie.
Otvorte stránku a otestujte jej predvolený stav, stav pri prejdení myšou, zameranie klávesnicou a stlačený stav. Export obsahuje obrys pri zameraní (focus-visible), malý pohyb pri aktivácii a pravidlo pre obmedzený pohyb. Vaše okolité štýly a nainštalované písma môžu stále ovplyvniť výsledok.
Vygenerované tlačidlo je štylizovaný ovládací prvok. Pripojte jeho správanie pri kliknutí vo svojom projekte; pri pridávaní do formulára použite správny typ tlačidla.
cta-button.css
Názov stiahnutého súboru zodpovedá názvu triedy.
Časté otázky
Potrebujem rámec CSS?
Nie. Výstupom je štandardné CSS plus obyčajné tlačidlo HTML. Vložte CSS do svojho vlastného súboru so štýlmi a použite zodpovedajúcu triedu na tlačidle.
Ukladá stiahnutie aj HTML?
Stiahnutie uloží súbor .css pomenovaný podľa triedy. Značky tlačidla skopírujte samostatne z karty HTML.
Môžem dať každému rohu iný polomer?
Áno. V časti Tvar (Shape) vypnite možnosť Prepojiť všetky rohy, potom nastavte ľavý horný, pravý horný, pravý dolný a ľavý dolný roh nezávisle. Tento príklad ich ponecháva prepojené pre tvar pilulky.
Bude môj návrh k dispozícii aj nabudúce?
Štúdio sa pokúša uložiť aktuálny koncept do lokálneho úložiska tohto prehliadača. Nejde o účet ani zálohu medzi zariadeniami. Nastavenia prehliadača, vymazanie údajov stránky alebo Reset ho môžu odstrániť alebo nahradiť, preto si exportujte prácu, ktorú si chcete ponechať.
Je moje tlačidlo nahrané na server?
Náhľad štýlu a generovanie CSS/HTML prebieha vo vašom prehliadači. Editor nenahráva text vášho tlačidla ani koncept štýlu na vytvorenie exportu.
Dajte svojmu ďalšiemu tlačidlu vlastný štýl.
Vyberte si východiskový bod, upravte detaily a preneste kód do svojho projektu.