Vizuálne upravte tlačidlo a získajte HTML a CSS na jeho použitie na vašej webovej stránke. Začnite s predvoľbou, upravte typografiu, farby, tvar a tiene, a potom si pred exportom zobrazte náhľad stavov interakcie.
Vyberte si východiskový bodPrispôsobte si ho podľa seba
Prehliadajte predvoľby 44 v kolekciách Everyday, Classic, Shaped, Expressive, Gradients a Elite. Každá predvoľba je východiskovým bodom, ktorý môžete upraviť.
Ako predvoľby ovplyvňujú váš dizajn
Najprv vyberte, potom dolaďte
Použite kolekciu štýlov na zúženie galérie. Použitie predvoľby nahradí predvolené štýly aj štýly pri prejdení myšou, pričom zachová text tlačidla a názov triedy.
Vyskúšajte jednoduchú plnú výplň, tvarovaný roh, ostrý obrys alebo dekoratívnejšie spracovanie. Keď nájdete smer, použite ostatné karty, aby detaily ladili s vašou stránkou.
Nechajte štítok pôsobiť správne
Nastavte text tlačidla, rodinu písma, veľkosť, hrúbku, rozostupy, výšku riadku, zarovnanie a farbu textu. Sledujte, ako sa štítok aktualizuje počas práce.
Dolaďte text a rozostupy
Typografia, ktorá sa hodí k akcii
Text obsahuje ovládacie prvky písma a druhé pole pre text tlačidla. Veľkosť písma sa pohybuje od 10 do 80 px; uvedené rodiny používajú písma dostupné v zariadení návštevníka.
Použite krátky štítok, ktorý opisuje akciu. Vo výplni (Fill) pridajte vodorovné a zvislé odsadenie okolo neho bez zmeny veľkosti písma. Dlhšie štítky skontrolujte na stránke, kde sa bude tlačidlo používať.
Vyberte si plnú alebo prechodovú výplň
Použite jednu farbu pozadia alebo zmiešajte dve farby pomocou lineárneho prechodu. Výbery farieb a hexadecimálne vstupy vám umožňujú pracovať vizuálne alebo presne.
Nastavte farby a smer prechodu
Dve farby, jeden jasný smer
Vo výplni (Fill) zmeňte štýl výplne na lineárny prechod (Linear gradient), čím odhalíte druhú farbu a uhol prechodu. Uhol sa pohybuje od 0 do 360 stupňov.
Hexadecimálne polia akceptujú plnú šesťcifernú farbu alebo trojcifernú skratku. Otestujte biely alebo farebný štítok na oboch koncoch prechodu; štúdio automaticky necertifikuje kontrast textu.
Ovládajte obrys a hĺbku
Upravte prepojené alebo nezávislé rohy, šírku a štýl okraja, tiene boxu a tiene textu. Dodajte tlačidlu tvar, ktorý vyhovuje jeho kontextu.
Preskúmajte rohy, okraje a tiene
Od ostrého obdĺžnika po jemnú pilulku
V tvare (Shape) ponechajte zapnutú možnosť Prepojiť všetky rohy pre jeden spoločný polomer, alebo ju vypnite, aby ste nastavili každý roh zvlášť. Štýly okrajov zahŕňajú plný, čiarkovaný, bodkovaný, dvojitý, vnútorný, vonkajší, hrebeňový, drážkový a žiadny.
V tieni (Shadow) nastavte vodorovné a zvislé odsadenie, rozostrenie, farbu a nepriehľadnosť. Tieň boxu má tiež šírenie a prepínač vnútorného tieňa. Tieň textu je samostatný, takže môžete pridať hĺbku štítku bez zmeny obrysu tlačidla.
Navrhnite aj interakciu
Upravujte predvolené štýly a štýly pri prejdení myšou (Hover) samostatne. Zobrazte si náhľad predvoleného, hover a aktívneho vzhľadu, potom porovnajte tlačidlo na svetlom a tmavom plátne.
Pochopenie stavov úprav a náhľadu
Dva upraviteľné štýly, tri stavy náhľadu
Stav úprav určuje, ktorý štýl vaše ovládacie prvky menia. Tlačidlá stavu plátna určujú iba náhľad. Prejdenie myšou alebo stlačenie náhľadu tiež zobrazí jeho interakciu.
Hodnoty pri prejdení myšou (Hover), ktoré sa stále zhodujú s predvolenými, nasledujú základné úpravy, kým nie sú prispôsobené. Exportovaný CSS obsahuje pravidlo hover, keď je to potrebné, obrys pri zameraní (focus-visible), aktívny pohyb a pravidlo obmedzeného pohybu.
Preneste CSS do svojho projektu
Skopírujte vygenerovaný CSS a zodpovedajúce tlačidlo HTML, alebo si stiahnite štýl. Názov triedy udržuje tieto dve časti prepojené.
Kopírujte, sťahujte a uchovávajte svoju prácu
Jednoduchý kód, ktorý môžete použiť priamo
Vyberte si výrazný názov triedy, skopírujte CSS z jeho karty, potom skopírujte tlačidlo z HTML. Stiahnutie uloží súbor .css pomenovaný podľa triedy; nestiahne kompletnú webovú stránku.
Náhľad a generovanie kódu prebiehajú vo vašom prehliadači. Štúdio sa pokúša zapamätať si jeden koncept v lokálnom úložisku tohto prehliadača; exportujte všetko, čo si chcete ponechať. Reset vráti štúdio do jeho počiatočného štýlu.
Text a štýly dnu. HTML a CSS von.
Nie je potrebné žiadne nahrávanie. JavaScript poháňa živý editor vo vašom prehliadači. Skopírujte HTML a CSS samostatne, alebo si stiahnite štýl CSS. Vygenerovaný zásobník písiem používa písma dostupné v zariadení diváka.
