Tento příklad používá pouze ovládací prvky generátoru. Obrázky výše ukazují skutečné stažené styly aplikované na běžná tlačítka HTML, nikoliv snímky obrazovky editoru.
Otevřít generátor tlačítek CSS
Začněte s Signature
Otevřete generátor tlačítek CSS. V předvolbách vyberte Signature z kolekce Everyday. Nastavte text tlačítka na „Get started“. V oblasti kódu nastavte název třídy na cta-button.
Předvolba nahradí výchozí styly a styly při najetí myší, zatímco váš popisek a název třídy zůstanou zachovány. Před prováděním podrobných úprav si zvolte výchozí bod.
Název třídy propojuje pravidla CSS s vaším tlačítkem HTML. Generátor vyčistí nepodporované znaky; použijte krátký, výstižný název, abyste předešli stylování nesouvisejících prvků.
Vytvořte zaoblené tlačítko s přechodem
Ponechte stav úprav na Default. V textu vyberte System sans, velikost písma 18 px a tučný řez (Bold). Ponechte bílou barvu textu, normální styl, zarovnání na střed a výšku řádku 1.4.
Ve výplni vyberte lineární přechod (Linear gradient). Použijte dvě barvy a úhel níže. Nastavte vodorovné odsazení na 32 px a svislé odsazení na 16 px. Ve tvaru ponechte zapnutou volbu Propojit všechny rohy a nastavte poloměr rohu na 100 px. Šířka okraje zůstává 0 px.
Ve stínu ponechte zapnutý stín rámečku (Box shadow). Použijte vodorovné odsazení 0 px, svislé odsazení 8 px, rozostření 24 px, rozptyl −4 px, barvu #460BD8 a krytí 32%. Vnitřní stín a stín textu nechte vypnuté.
Odsazení mění prostor kolem textu. Poloměr rohu mění obrys. Velký poloměr vytvoří tento zaoblený tvar, aniž by se popisek rozšířil.
Nastavte vlastní vzhled pro najetí myší
Přepněte stav úprav na Hover. Ve výplni změňte barvu pozadí na #33099E a druhou barvu na #6D20BF. Ponechte úhel přechodu na 135°. Ve stínu změňte svislé odsazení na 10 px a rozostření na 28 px. Ostatní nastavení ponechte beze změny.
Použijte tlačítka Default, Hover a Active na plátně pro kontrolu každého stavu. Můžete také najet myší nebo stisknout tlačítko náhledu. Přepínejte plátno mezi světlým a tmavým režimem pro kontrolu okrajů a stínů.
Stav úprav určuje, které styly měníte. Stav plátna mění pouze to, co vidíte v náhledu. Před úpravou výchozího vzhledu se vraťte do stavu úprav Default.
Vlastnosti pro stav Hover, které stále odpovídají výchozímu nastavení, následují po pozdějších úpravách výchozího stavu. Jakmile vlastnost pro stav Hover přizpůsobíte, zůstane nezávislá. Po změně základního stylu znovu zkontrolujte oba stavy.
Exportujte a otestujte na své stránce
Vyberte kartu CSS a použijte Kopírovat CSS, nebo zvolte Stáhnout pro uložení cta-button.css. Vyberte kartu HTML a zkopírujte odpovídající značky tlačítka. HTML obsahuje stejný název třídy a tlačítko s typem „button“.
Přidejte CSS do svého stylu nebo propojte stažený soubor ze své stránky. Umístěte HTML tam, kam tlačítko patří. Oba exporty fungují společně: samotné tlačítko HTML neobsahuje své stylování.
Otevřete stránku a otestujte její výchozí stav, najetí myší, zaměření klávesnicí a stisknuté stavy. Export obsahuje obrys pro zaměření (focus-visible), malý pohyb při aktivaci a pravidlo pro omezení pohybu. Vaše okolní styly a nainstalovaná písma mohou výsledek stále ovlivnit.
Vygenerované tlačítko je stylovaný ovládací prvek. Propojte jeho chování při kliknutí ve svém projektu; při přidávání do formuláře použijte správný typ tlačítka.
cta-button.css
Název staženého souboru odpovídá názvu třídy.
Časté dotazy
Potřebuji framework CSS?
Ne. Výstupem je standardní CSS plus běžné tlačítko HTML. Vložte CSS do svého stylu a použijte odpovídající třídu na tlačítku.
Uloží Stáhnout také HTML?
Stáhnout uloží soubor .css pojmenovaný podle třídy. Značky tlačítka zkopírujte samostatně z karty HTML.
Mohu dát každému rohu jiný poloměr?
Ano. Ve tvaru vypněte Propojit všechny rohy a poté nastavte levý horní, pravý horní, pravý dolní a levý dolní roh nezávisle. Tento příklad je ponechává propojené pro dosažení zaobleného tvaru.
Bude můj návrh příště stále zde?
Studio se pokouší uložit aktuální koncept do místního úložiště prohlížeče. Nejedná se o účet ani zálohu mezi zařízeními. Nastavení prohlížeče, vymazání dat stránek nebo resetování jej mohou odstranit nebo nahradit, proto si exportujte práci, kterou si chcete ponechat.
Je mé tlačítko nahráno na server?
Náhled stylu a generování CSS/HTML probíhá ve vašem prohlížeči. Editor nenahrává text vašeho tlačítka ani koncept stylu pro vytvoření exportu.
Dejte svému dalšímu tlačítku vlastní styl.
Vyberte výchozí bod, upravte detaily a přeneste kód do svého projektu.