Some pointers on default cursors (2024)

Published 2016-08-06 in category: front-end

Every so often in a project, the issue comes up of whether cursors on buttons should be ‘the hand’ or default. The spec says they should be default, but many people (myself included, until recently), are unaware. Many designers I’ve worked with want pointer-cursors regardless of what the spec says.

This is the thing: links (<a/>) go to somewhere else, buttons ( <button> s) let users perform actions. The ‘hand’ indicates to a user that their cursor is on a link, which will take them somewhere. And can do so in another tab, copy/paste the link, drag it to another window, et cetera. Other interactive elements on the page (buttons, for example) just get a default cursor. TL;DR: the hand does not mean clickable.

What the standards say

The above is not my personal opinion, it is what the CSS spec says and what all browsers do by default. You can see this when you hover buttons in your OS, or look at the browser buttons to switch tabs. Or on the ‘Search’ button of Google dot com.

Apple’s OS X Human Interface Guidelines also say the ‘hand’ means the content is a URL link.

Microsoft’s guidelines are clear, too:

To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don’t need a hand pointer. The hand pointer must mean “this target is a link” and nothing else. (Emphasis theirs)

If we manually add a hand cursor to a button, we suggest to a user that they will be taken elsewhere, while they won’t. We would be breaking an affordance that was put into the web. It’s like taping a sticker that says ”Push me” over a well designed door handle (see also: Don Norman).

Clearly, standards say the hand is just for links. And there’s a great argument to be made to not mess with browser defaults.

Using ‘the hand’ anyway

Many people apply a pointer cursor to their buttons anyway. I have done so, too. I’ve heard many say they add the pointer to improve usability. In addition, Bootstrap and various other CSS frameworks also apply pointer cursors to their button (note that Normalize used to, but recently removed them).

Whether we just did not know about the standard way, or purposefully ignored it to improve things for our users, ‘the hand’ on buttons is somewhat becoming a de facto standard. It is done all over the place, so some users may now expect hand cursors on buttons.

Basically, I think there are now two standards.

There is a further complication: in practice, there is a grey area between buttons and links.

  • A “Back to top” link is literally a link to the top of the page, but, especially when it animates the user back to the top, it feels like it performs an action, too.
  • In a tabs component I recently built, each tab is marked up as a link to an area in the page. Visually, clicking it, ‘opens’ a tab. That’s an action, right? But what if you use a modifier key and open it in a new tab? That would also still work.
  • How about a button that says “Log in”. Sounds like an action, but what if the button is a link and just takes the user to a page where they can login?
  • What about a button in a <form method="POST" />? You can submit in a new tab, which makes it a bit like a link, but it also submits data, which makes it more like a button that performs an action. Or a form with GET, which should have no side effects at all?

I find that in team discussions, we talk about something being a ‘button’, yet in my HTML, I use the <a /> . Or even the other way around, occasionally.

Conclusion

The question is, does apply the ‘wrong’ cursor really matter? When I asked around on Twitter, some said applying hand cursors wrongly is a non-issue, as it confuses no one and it’s non-hand cursors that cause usability issues.

However much I think existing standards are the best to follow, I guess we have pretty much reached a situation where there are two standards, and either one is okay to use. Especially since things on the modern web are often not clearly a link or a button. Striving for consistency, at least within the same website, is probably the best thing we can do for your users.

Update 12/08/2016: Normalize no longer applies cursor pointer, as Šime Vidas pointed out to me (thanks!)

Thanks Krijn Hoetmer for the form examples

Some pointers on default cursors (2024)

FAQs

How do I get my mouse pointer back to normal? ›

To change how the mouse pointer works

In the search box, type mouse, and then click Mouse. Click the Pointer Options tab, and then do any of the following: To change the speed at which the mouse pointer moves, under Motion, move the Select a pointer speed slider toward Slow or Fast.

Why does my mouse pointer keep resetting? ›

Update the Mouse Driver. An outdated or corrupted mouse driver can be the culprit of the “Logitech mouse settings keep resetting” issue. To eliminate this cause, you need to make sure the mouse driver is up-to-date.

What is the default cursor type? ›

The platform-dependent default cursor. Typically an arrow.

How do I change the default mouse pointer? ›

Click on Start > Settings or press the Windows Key + I. Click on Personalization on the left. Click on Mouse cursor on the right. While you can change any mouse cursor individually under Customize, the best thing to try is the dropdown box under Schemes.

How do I fix my corrupted mouse pointer? ›

Reset the mouse on your PC via the Device Manager menu. Expand the list under Mice and other pointing devices and select the mouse you want to reset. Click Uninstall device, then Delete the driver software for this device in the confirmation window. Restart your PC, and Windows will automatically reinstall your mouse.

Why is my cursor misbehaving? ›

A: Erratic behavior from your mouse can be an indication of many things, and all of them should be investigated as soon as possible. It could be hardware, software or malware, which is why it needs to be addressed. Certain types of mouse, such as a wireless or laptop touch pad, can also have specific problems.

What's wrong with my mouse pointer? ›

The optical portion of the mouse is blocked

Hair or fuzz on the bottom of the mouse may prevent it from working correctly. Turn the mouse over and make sure there is no debris blocking the "eye" of the mouse. Using canned air or blowing into the hole with your mouth usually removes any debris that could cause problems.

What is default mouse settings? ›

Here are some common default mouse settings: Primary Button: Left. Mouse Wheel Scrolls: Multiple lines at a time. How many lines to scroll: 3. Inactive window scroll: On.

What is the difference between cursor and pointer? ›

The terms "mouse pointer" and "mouse cursor" are often used interchangeably. The mouse cursor refers specifically to the visual representation of the pointer on the screen, while the mouse pointer refers to the combination of the physical mouse and its corresponding cursor.

How do I change the default cursor in CSS? ›

Toggle custom cursor on html - That will toggle the css class custom . customcursor on the html element (the rule is predefined in the document as . customcursor{cursor: all-scroll ! important;} )

Why does my cursor keep showing loading? ›

The loading cursor symbol is showing that the system is busy and some process is going on the background. Usually it appears during startup when the startup programs are being loaded or while executing a particular program. Thanks for the question, You may see the cursor loading for some unknown reason.

How do I fix my cursor pointer? ›

  1. Open your PC and go to the search bar.
  2. There search for “Mouse Settings”
  3. Click on “Additional Mouse Options”
  4. Tap on “Buttons” under Mouse Properties.
  5. Open “Device Settings”
  6. Click on the “Enable” button.
Jan 12, 2023

References

Top Articles
Latest Posts
Article information

Author: Arielle Torp

Last Updated:

Views: 5747

Rating: 4 / 5 (61 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Arielle Torp

Birthday: 1997-09-20

Address: 87313 Erdman Vista, North Dustinborough, WA 37563

Phone: +97216742823598

Job: Central Technology Officer

Hobby: Taekwondo, Macrame, Foreign language learning, Kite flying, Cooking, Skiing, Computer programming

Introduction: My name is Arielle Torp, I am a comfortable, kind, zealous, lovely, jolly, colorful, adventurous person who loves writing and wants to share my knowledge and understanding with you.