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

• Correct cursor for "content cannot be interacted with"
• Buttons shouldn't have a hand cursor part 2