Existuje názor, že tlačítka by měla mít cursor: pointer. Stejně tak existuje pohled, že je to zbytečné.
Kde je pravda?
Standardní chování prohlížečů
Prohlížeče mají předdefinované chování kursoru pro různé elementy:
- Odkazy (
<a>) – automaticky zobrazují pointer cursor (ruku)
- Tlačítka (
<button>) – zobrazují default cursor (šipku)
- Input elementy – zobrazují text cursor
Proč někteří vývojáři preferují cursor: pointer
Argumenty pro změnu cursoru na tlačítkách:
- Konsistence – všechny interaktivní elementy mají stejný kursor
- Intuitivnost – uživatelé očekávají ručičku u klikatelných prvků
- Přístupnost – jasnější indikace interaktivity
Proč jiní preferují cursor: default
Argumenty proti změně kursoru:
- UX principy – neporušovat očekávání uživatelů, kdy ve výchozím stavu mají tlačítka kursor šipky
- Přehlednost – rozlišení mezi odkazy a tlačítky
CSS zápis
CSS pro ruku
button {
cursor: pointer;
}CSS pro výchozí kursor
button {
cursor: default;
}Tlačítko, nebo odkaz?
V moderních aplikacích se často stírá rozdíl mezi tlačítky a odkazy. Mnoho komponent vypadá jako tlačítka, ale chová se jako odkazy (případně i naopak):
- navigační tlačítka – přecházejí na jinou stránku,
- akční odkazy – spouští JavaScript funkce,
- hybridní komponenty – kombinují obě chování
V takových případech je cursor: pointer často vhodnější, protože uživatel očekává klikatelnost. Klíčové je být konsistentní v rámci celé aplikace.
Obvykle nemá smysl se moc řídit tím, jestli je dané tlačítko <a href> nebo <button>. Takže je potřeba chování sjednotit. Ať už na jednu, nebo druhou variantu.
Doporučení
Důležité je, aby uživatel pochopil, že na něco může kliknout. K tomu může sloužit:
- visuální design – jasné rozlišení tlačítek od textu,
- hover efekty – změna barvy, stínu, nebo pozadí,
- ikony – vizuální indikace akce
Měnit kursor tak už ani nemusí být potřeba.
Závěr
Neexistuje univerzální odpověď. Klíčové je být konsistentní v rámci celé aplikace a zvážit očekávání vašich uživatelů. Pokud se rozhodnete pro cursor: pointer, aplikujte ho na všechna tlačítka. Pokud ne, držte se výchozího chování prohlížečů.
Odkazy jinam
Související články
