Vizuálně navrhněte tlačítko a získejte HTML a CSS pro jeho použití na vašem webu. Začněte s předvolbou, upravte typografii, barvy, tvar a stíny, a poté si před exportem prohlédněte stavy interakce.
Procházejte předvolby 44 napříč kolekcemi Everyday, Classic, Shaped, Expressive, Gradients a Elite. Každá předvolba je výchozím bodem, který můžete upravit.
Jak předvolby ovlivňují váš návrh
Nejprve vyberte, poté dolaďte
Použijte kolekci stylů pro zúžení galerie. Použití předvolby nahradí výchozí i hover styly, přičemž zachová text tlačítka a název třídy.
Vyzkoušejte jednoduchou plnou výplň, zaoblený roh, ostrý obrys nebo dekorativnější úpravu. Jakmile najdete směr, použijte ostatní karty, aby detaily odpovídaly vaší stránce.
Udělejte popisek správným
Nastavte text tlačítka, rodinu písma, velikost, řez, prostrkání, výšku řádku, zarovnání a barvu textu. Sledujte, jak se popisek při práci aktualizuje.
Dolaďte text a mezery
Typografie, která odpovídá akci
Text obsahuje ovládací prvky písma a druhé pole pro text tlačítka. Velikost písma se pohybuje od 10 do 80 px; uvedené rodiny písem využívají písma dostupná v zařízení návštěvníka.
Použijte krátký popisek, který popisuje akci. Ve výplni přidávají vodorovné a svislé odsazení prostor kolem něj, aniž by se změnila velikost písma. Delší popisky zkontrolujte na stránce, kde bude tlačítko použito.
Zvolte plnou nebo přechodovou výplň
Použijte jednu barvu pozadí nebo smíchejte dvě barvy pomocí lineárního přechodu. Výběry barev a hexadecimální vstupy vám umožní pracovat vizuálně nebo přesně.
Nastavte barvy a směr přechodu
Dvě barvy, jeden jasný směr
Ve výplni změňte styl výplně na lineární přechod, abyste odhalili druhou barvu a úhel přechodu. Úhel se pohybuje od 0 do 360 stupňů.
Hexadecimální pole přijímají plnou šestimístnou barvu nebo třímístnou zkratku. Otestujte bílý nebo barevný popisek na obou koncích přechodu; studio automaticky necertifikuje kontrast textu.
Ovládejte obrys a hloubku
Upravte propojené nebo nezávislé rohy, šířku a styl okraje, stíny rámečku a stíny textu. Dejte tlačítku tvar, který vyhovuje jeho kontextu.
Prozkoumejte rohy, okraje a stíny
Od ostrého obdélníku po měkkou pilulku
V tvaru ponechte zapnuté Propojit všechny rohy pro jeden sdílený poloměr, nebo jej vypněte pro nastavení každého rohu zvlášť. Styly okrajů zahrnují plný, čárkovaný, tečkovaný, dvojitý, vnitřní, vnější, hřebenový, drážkový a žádný.
Ve stínu nastavte vodorovné a svislé posuny, rozostření, barvu a průhlednost. Stín rámečku má také rozptyl a přepínač vnitřního stínu. Stín textu je samostatný, takže můžete přidat hloubku popisku, aniž byste změnili obrys tlačítka.
Navrhněte také interakci
Upravujte výchozí a hover styly samostatně. Prohlédněte si výchozí, hover a aktivní vzhled, poté porovnejte tlačítko na světlém a tmavém plátně.
Pochopení stavů úprav a náhledu
Dva upravitelné styly, tři stavy náhledu
Stav úprav určuje, který styl vaše ovládací prvky mění. Tlačítka stavu plátna volí pouze náhled. Najetí myší nebo stisknutí náhledu také zobrazí jeho interakci.
Hodnoty hoveru, které stále odpovídají výchozímu nastavení, následují základní úpravy, dokud nejsou přizpůsobeny. Exportované CSS obsahuje pravidlo hoveru, když je potřeba, obrys focus-visible, aktivní pohyb a pravidlo pro omezení pohybu.
Vložte CSS do svého projektu
Zkopírujte vygenerované CSS a odpovídající tlačítko HTML, nebo si stáhněte stylopis. Název třídy udržuje oba kusy propojené.
Kopírujte, stahujte a uchovávejte svou práci
Čistý kód, který můžete přímo použít
Zvolte charakteristický název třídy, zkopírujte CSS z jeho karty, poté zkopírujte tlačítko z HTML. Stažení uloží soubor .css pojmenovaný podle třídy; nestahuje kompletní webovou stránku.
Náhled a generování kódu probíhá ve vašem prohlížeči. Studio se snaží zapamatovat si jeden koncept v místním úložišti tohoto prohlížeče; exportujte vše, co si chcete ponechat. Reset vrátí studio do výchozího stylu.
Text a styly dovnitř. HTML a CSS ven.
Není potřeba žádné nahrávání. JavaScript pohání živý editor ve vašem prohlížeči. Zkopírujte HTML a CSS samostatně, nebo si stáhněte stylopis CSS. Vygenerovaný zásobník písem používá písma dostupná v zařízení prohlížeče.
