Plovoucí Tlačítka: Design a Umístění

9 min čtení Střední úroveň Březen 2026

Praktický návod na tvorbu floating action buttonů. Naučte se správné umístění, animace a přístupnost pro lepší uživatelský dojem.

Notebook s CSS kódem pro sticky pozicování na dřevěném stole s šálkem kávy

Co jsou Plovoucí Tlačítka?

Plovoucí akční tlačítka (FAB — Floating Action Buttons) jsou ta malá, zaoblená tlačítka, která se objevují v rohu obrazovky. Často jsou barevná a navrhnutá tak, aby přitahovala pozornost. Používají se pro primární akce — kontakt, nákup, zaslání formuláře.

Nejčastěji je vidíte v aplikacích na mobilech. Ale stejně dobře fungují i na webu. Klíč je v správném umístění a implementaci. Neměli by rozptylovat, měli by pomáhat.

Správné Umístění a Pozicování

Umístění je všechno. Tlačítko musí být viditelné, ale ne v cestě. Nejčastěji se umísťuje do pravého dolního rohu — to je ergonomické pro uživatele, kteří tvoří tlačítko palcem na mobilním telefonu.

Vzdálenost od okraje se obvykle počítá v jednotkách design systému. Typicky 16 až 24 pixelů. Výška tlačítka? Obvykle 56 pixelů na mobilech, 64 pixelů na desktopu. To dává dostatek místa na ikonu a komfortní cíl pro kliknutí.

Pravý dolní roh — ergonomicky nejlepší
Minimálně 16px odsazení od okraje
Velikost cíle minimálně 4444px
Position: fixed nebo position: sticky

Mobilní obrazovka zobrazující správné umístění plovoucího tlačítka v pravém dolním rohu s odsazením

CSS kód pro animace hoveru a přechodů plovoucího tlačítka na obrazovce editoru

Animace a Interakce

Bez animace by tlačítko vypadalo mrtvě. Přidání transition na hover a active stavy dělá obrovský rozdíl. Nejjednoduší je změna barvy a zvětšení při najetí myší.

Používejte krátké přechody — 200 až 300 milisekund. Rychleji se cítí nekontrolovaně. Pomaleji se cítí zaostalě. Animace by měly být hladké a lineární, ne s příliš mnoha easing funkcemi.

Na mobilech přidejte efekt tlačítka — lehký zoom při stisknutí. To dává hmatatelný pocit i bez fyzické zpětné vazby. Zapamatujte si — uživatelé potřebují pocit, že něco dělají.

Přístupnost a Z-Index

Správný Z-Index

Tlačítko musí být vždy viditelné. Přiřaďte mu z-index vyšší než ostatní prvky. Obvykle stačí 999 nebo 9999. Ujistěte se, že modální okna mají ještě vyšší z-index — třeba 10000.

ARIA Labely

Přidejte aria-label=”Kontaktujte nás” nebo aria-label=”Odeslat zprávu”. Lidé s čtečkami obrazovky musí vědět, co tlačítko dělá. Ikona sama nestačí.

Klávesnice a Focus

Tlačítko musí být dosažitelné přes klávesnici. Přidejte focus stav — viditelný obrys nebo jiná vizuální změna. Uživatelé, kteří nepoužívají myš, vás budou vděční.

Kontrast Barev

Zajistěte dostatečný kontrast mezi barvou tlačítka a jeho pozadím. Minimálně poměr 4.5:1 pro normální text. Přiblížete se tak normám WCAG AA.

Důležité Upozornění

Tento článek je vzdělávací materiál o designu a implementaci plovoucích akčních tlačítek. Poskytuje obecné pokyny a nejlepší praktiky. Skutečná implementace se bude lišit v závislosti na vaší konkrétní aplikaci, technologickém stacku a cílové skupině uživatelů. Vždy otestujte svou implementaci s reálnými uživateli na různých zařízeních a prohlížečích.

Shrnutí: Klíčové Body

Plovoucí akční tlačítka jsou mocný nástroj, když je použijete správně. Pamatujte: správné umístění je důležitější než krásný design. Tlačítko v pravém dolním rohu s 16px odsazením se chová dobře. Plynulá animace s transition 200-300ms dodá pocit kvality.

Nepřehlédněte přístupnost. ARIA labely a focus stavy nejsou “bonusy” — jsou to požadavky. Váš web se bude používat na různých zařízeních a různými lidmi. Tím si věnujete péči.

Nakonec — otestujte. Dejte tlačítko svým uživatelům a sledujte, co dělají. Někdy nejjednoduší řešení je to správné.

Tomáš Kučera

Senior Frontend Architect

Senior frontend architect s 13 lety zkušeností v optimalizaci přilepených prvků, fixních záhlaví a správě z-index vrstvení v komplexních webových projektech.