Generátor tlačidiel – Vlastné CSS tlačidlá s náhľadom
Generátor tlačidiel vám pomáha navrhnúť CSS tlačidlo a vidieť výsledok v živom náhľade. Nastavte text tlačidla, farby, veľkosť písma, odsadenie, zaoblenie, orámovanie a pozadie pri prejdení kurzorom, potom skopírujte vygenerované CSS .btn { … } a :hover { … }. Ovládacími prvkami vytvarujte predvolený vzhľad tlačidla aj jeho stav po prejdení kurzorom pred pridaním kódu do projektu.
Generátor tlačidiel je CSS návrhár tlačidiel vo vašom prehliadači na tvorbu vlastných štýlov tlačidiel so živým náhľadom. Vytvorí blok .btn { … } a :hover { … } pripravený na vloženie, takže si tlačidlo môžete prezrieť a jeho CSS preniesť do projektu. Ak hľadáte generátor CSS tlačidiel alebo spôsob, ako vytvárať CSS tlačidlá online, nástroj spojí hlavné ovládacie prvky štýlovania na jedno miesto.
Pri návrhu tlačidla nastavte jeho text, farby, veľkosť písma, odsadenie, zaoblenie a orámovanie. Nastaviť môžete aj pozadie pri prejdení kurzorom a náhľad zobrazí tlačidlo vedľa jeho zodpovedajúceho stavu po prejdení kurzorom. Keď štýl vyzerá dobre, skopírujte vygenerovaný blok CSS. Dostupné ovládacie prvky sa sústreďujú na vzhľad tlačidla a jeho pozadie pri prejdení kurzorom.
CSS opisuje, ako sú prvky na webovej stránke štylizované, zatiaľ čo generátor predkladá štýlovanie tlačidla ako pravidlá CSS, ktoré môžete vložiť do projektu. Tvorba pravidiel tu pomôže, keď chcete rýchly východiskový bod, potrebujete príklad tlačidla pre testy alebo dokumentáciu alebo chcete porovnať možnosti štýlu pred ich použitím v kóde. Výstup obsahuje pravidlo .btn a pravidlo :hover pre stav tlačidla po prejdení kurzorom.
Generátor tlačidiel funguje úplne vo vašom prehliadači: váš vstup sa spracúva na vašom zariadení a neodosiela sa, neukladá ani neposiela na server. Funguje offline po načítaní stránky a nástroj je zadarmo. Môže pomôcť vývojárom a DevOps inžinierom, ktorí potrebujú pripraviť alebo skontrolovať štýl CSS tlačidla, či už s CSS začínajú, alebo hľadajú rýchly spôsob, ako vytvoriť príklad tlačidla.
Krok 1: Nastavte text tlačidla a možnosti štýlu vrátane farieb, veľkosti písma, odsadenia, zaoblenia a orámovania.
Krok 2: Zvoľte pozadie pri prejdení kurzorom, ktoré určí, ako tlačidlo vyzerá po prejdení myšou.
Krok 3: Skontrolujte živý náhľad a upravujte možnosti, kým tlačidlo nevyzerá správne.
Krok 4: Skopírujte vygenerovaný blok CSS .btn { … } a :hover { … } do svojho projektu.
Prípad použitia: Pripravte CSS štýly tlačidiel pre testy, testovacie dáta alebo počiatočné dáta, keď projekt potrebuje konkrétny príklad tlačidla.
Prípad použitia: Vytvorte štýl tlačidla pripravený na vloženie bez ručného písania pravidiel .btn a :hover.
Prípad použitia: Porovnávajte farby tlačidla a pozadia pri prejdení kurzorom v živom náhľade počas doladenia návrhu.
Prípad použitia: Upravte odsadenie, zaoblenie a orámovanie a vytvorte štýly tlačidiel, ktoré ladia s rôznym rozložením rozhrania.
Prípad použitia: Zvoľte text tlačidla a veľkosť písma a pritom kontrolujte, ako sa tieto nastavenia javia v náhľade.
Prípad použitia: Vygenerujte CSS príklad pre dokumentáciu projektu, ktorý ukáže predvolený štýl tlačidla aj jeho stav po prejdení kurzorom.