handl_ /lab/tlacitka
← Všechny nástroje

Hřiště tlačítek

Třicet typů tlačítek, od decentních po čistou zábavu: vyjíždějící ikony, zářící rámečky, želé, glitch, tekutina, 8bit a deset dalších, které se hýbou i v klidu. Nastavte barvu, zaoblení a rychlost, proklikejte si všechny stavy a zkopírujte hotové CSS.

#FF7A2E
Pozadí
Charakter pohybu
Zobrazit
Ukázat stav
Najeďte myší, přejděte klávesou Tab nebo klikněte. Po kliknutí tlačítko projde stavem Načítání a Hotovo.
01 · Výplň zleva Barva se po najetí rozlije zleva doprava. Dobře funguje jako hlavní akce, která v klidu nekřičí.
02 · Kruh ze středu Barva se rozroste ze středu jako kapka. Měkčí a hravější než výplň zleva.
03 · Vyjíždějící šipka Text uhne a zprava přijede šipka. Klasika pro „další krok“ ve formulářích a průvodcích.
04 · Ikona místo textu Text odjede nahoru a zespodu přijede ikona. Vhodné, když je akce jasná, třeba stažení souboru.
05 · Kreslený rámeček Po najetí se kolem tlačítka dokreslí čára. Decentní varianta pro vedlejší akce a portfolia.
06 · Záře Obrysové tlačítko se po najetí rozsvítí. Sedí k tmavým webům, herním a eventovým stránkám.
07 · Obíhající rámeček Po rámečku obíhá barevný přechod. Výrazné, takže jen jednou na stránce, třeba u hlavní nabídky.
08 · Fyzický stisk Tlačítko má „hloubku“ a při kliknutí se zamáčkne. Hmatatelné, oblíbené v aplikacích a hrách.
09 · Zvednutí Tlačítko se nadzvedne a vrhne stín. Nenápadné a čisté, hodí se do karet a výpisů.
10 · Textové s podtržením Bez pozadí, jen podtržení vyroste od středu a šipka poskočí. Na méně důležité odkazy a „zobrazit vše“.
11 · Odlesk Po tlačítku přeběhne lesk jako po nablýskaném plechu. Prémiový dojem bez křiklavých barev.
12 · Plynoucí přechod Přechod tří barev se po najetí přelije na druhou stranu. Barvy se dopočítají z vybrané barvy.
13 · Posuvné dveře Dvě poloviny barvy přijedou z obou stran a potkají se uprostřed. Vhodné pro vstup do sekce nebo aplikace.
14 · Sonar Z tlačítka se v klidu šíří vlny jako ze sonaru. Na „živě“, nové funkce nebo jednu hlavní výzvu. Nikdy víc na jedné stránce.
15 · Želé Po najetí se tlačítko zavlní jako želé. Čistá radost, hodí se do her, kvízů a dětských webů.
16 · Neobrutalismus Silný obrys a tvrdý stín bez rozostření. Po kliknutí tlačítko „zacvakne“ do stínu. Trendy, drzé a dobře čitelné.
17 · Glitch Text se po najetí rozklepe a rozdělí do dvou barev jako porouchaný monitor. Na hudbu, hry a techno akce.
18 · Tekutina Tlačítko se po najetí zaplní vlnící se tekutinou. Hravé, na kampaně, nápoje nebo charitu.
19 · Výstražné pruhy Šikmé pruhy se po najetí rozjedou jako na stavbě. Na „připravujeme“, soutěže nebo odpočet.
20 · 8bit Kostičkované rohy, pohyb po skocích a zamáčknutí jako v automatu. Zaoblení si nebere, retro má rohy z pixelů.
21 · Polární záře Barvy pomalu přetékají sem a tam a pod tlačítkem prosvítá rozmazaná záře. Živé, ale klidné.
22 · Pochodující mravenci Čárkovaný rámeček pořád obíhá dokola jako výběr v grafickém editoru. Sedí k nahrávání souborů a výběru.
23 · Vznášení Tlačítko se lehce vznáší a stín pod ním dýchá. Po najetí se zastaví, jako by ho kurzor chytil.
24 · Dýchání Záře kolem tlačítka pomalu sílí a slábne jako dech. Klidná pozvánka, nevyrušuje při čtení.
25 · Šťouchnutí Každé čtyři vteřiny se krátce zavrtí, jako by vám připomínalo, že na něco čeká. Na nedokončené kroky.
26 · Lávová lampa Uvnitř se pomalu přelévají rozmazané kapky barev. Atmosférické, na hudbu, festivaly a večírky.
27 · Občasný záblesk Každých pár vteřin po tlačítku sám přeběhne barevný lesk. Upoutá pozornost, ale neruší pořád.
28 · Lákající šipka Šipka pořád jemně pokukuje doprava a po najetí zrychlí. Navádí k dalšímu kroku nebo posunu dolů.
29 · Blikající kurzor Za textem bliká kurzor jako v terminálu. Sedí k vývojářským a tech webům, třeba k tomuhle.
30 · Přelévající se text Pozadí zůstává klidné, ale písmem pořád proudí přechod barev. Po najetí se proud zrychlí.

Stavy, které by mělo mít každé tlačítko

:default Výchozí Musí být jasné, že jde kliknout. Dostatečný kontrast a velikost aspoň 44 × 44 px.
:hover Najetí myší Jemná změna, která potvrdí, že prvek reaguje. Na mobilu neexistuje.
:focus-visible Focus Výrazný rámeček pro ovládání klávesnicí. Nikdy ho neodstraňujte bez náhrady.
:active Stisk Okamžitá odezva na kliknutí, třeba mírné zmenšení.
aria-busy Načítání Ukazatel průběhu a zablokování proti dvojitému odeslání.
success / error Výsledek Krátké potvrzení, nebo srozumitelná chyba s radou, co dál.
:disabled Neaktivní Jen když to dává smysl, a s vysvětlením, proč to teď nejde.

Kolik animace je tak akorát

Pro hover a stisk 150–300 ms, pro větší pohyby (výplň, vyjíždějící ikona) do 400 ms. Delší animace působí líně a uživatel čeká na tlačítko místo toho, aby čekalo tlačítko na něj.

Ikona nemá nahradit text

Vyjíždějící šipka nebo ikona je bonus. Hlavní informace musí zůstat v textu, ne každý pozná, co znamená samotná ikona, a čtečky obrazovky ji neřeknou.

Myslete na klávesnici a omezení pohybu

Stav focus je pro lidi, kteří ovládají web klávesnicí, nikdy ho neschovávejte. A když má někdo v systému zapnuté omezení pohybu, efekty by se měly vypnout. Exportované CSS to obojí řeší.