Apply cursor: pointer to button elements

[matchai]

It has always bugged me that buttons don't default to the pointer cursor.
An implementation that excludes the "disabled" attribute would make sense.

button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
}

[JasonEtco]

Wouldn't this be more functionally appropriate?

button:disabled {
    cursor: not-allowed;
}

[filipelinhares]

Normalize had this feature:

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

[disabled] {
  cursor: default;
}

But it was removed because of this comment:

Web browsers are fairly consistent:

• Buttons are cursor: default;
• Links are cursor: pointer.

The concept for links is that they take you to a different URL. The hand cursor (pointer) indicates that. Buttons don't take you to a different URL (with the notable exception of form submit buttons, though this is less true with scripted or HTML5-validated forms), and thus don't have this style.

Specification

pointer: The cursor is a pointer that indicates a link.

http://www.w3.org/TR/CSS21/ui.html#cursor-props
http://dev.w3.org/csswg/css-ui/#cursor

full comment: necolas/normalize.css#371 (comment)

I agree with said comment and have chosen not to add cursor: pointer for all buttons, but I want to know what everyone else thinks.

[JasonEtco]

I do definitely think that buttons should have cursor: pointer; you'll never have a button that shouldn't be clicked (aside from :disabled, and the cursor is a good indication of its action.

[diptajbasu]

Very interesting discussion. Personally, when I see a hand cursor appear as I hover over an element, I don't think clicking will take me to a different URL. I just think this element is clickable and expect something to happen when I click. When I see a button I think the same thing. I'm curious if others feel the same way.

[matchai]

@diptajbasu That is the same train of thought I have. There may have been a time where the only interactive element on a page was a hyperlink, but times have changed.

Hovering over to links to ids also trigger a pointer curser but do not direct to an external site. Buttons have taken the place of hyperlinks in terms of same-page interaction.

[JasonEtco]

Devil's advocate here: it may be a good idea for functionality's sake, but it's not really a "reset." Is ress supposed to be an extension of normalize, or a more feature-rich reset-ish css library?

[filipelinhares]

@JasonEtco: ress is a feature rich CSS reset.

I think we can add this new feature, cursor: pointer.

button,
[type="button"],
[type="reset"],
[type="submit"]
[role="button"] {
  cursor: pointer;
}

[disabled] {
  cursor: default;
}

Everyone agrees with this snippet of code? (I also added [role="button"])

[JasonEtco]

@filipelinhares in that case, go for it. I think everyone can agree.

What about cursor: not-allowed for :disabled?

[filipelinhares]

The semantics of [disabled] aren't quite the same as 'not allowed'. I think is better leave it as default.

[filipelinhares]

🎉