share
Stack OverflowCSS class for pointer cursor
[+212] [12] w411 3
[2017-11-13 16:34:57]
[ css twitter-bootstrap bootstrap-4 ]
[ https://stackoverflow.com/questions/47269189/css-class-for-pointer-cursor ]

Is there any CSS class or attribute for pointer:cursor in Bootstrap 4 [1] specially for button or link?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success">Sample Button</button>

[+374] [2020-06-06 07:26:08] Vibhor Dube [ACCEPTED]

As of June 2020, adding role='button' to any HTML tag would add cursor: "pointer" to the element styling.

<span role="button">Non-button element button</span>

Official discussion on this feature - https://github.com/twbs/bootstrap/issues/23709

Documentation link - https://getbootstrap.com/docs/4.5/content/reboot/#pointers-on-buttons


(10) Be aware that although this may work, you should only use it when the role of the element is being a button. - Enrico
(2) This should be the new accepted answer, as it add the cursor but not other classes related to 'buttons' - Nelson Rodriguez
(1) I can confirm that this works and has been present since Bootstrap 3 at least. - andreszs
Bootstrap 5.2. it works. - Badarau Petru
Bootstrap v5.3 it also works. - An Phú
1
[+78] [2019-01-27 18:21:49] Hari Das

Unfortunately there is no such class in Bootstrap as of now (27th Jan 2019).

I scanned through bootstrap code and discovered following classes that use cursor: pointer. Seems like it is not a good idea to use any of them specifically for cursor: pointer.

summary {
  display: list-item;
  cursor: pointer;
}
.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}
.navbar-toggler:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.page-link:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.close:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity 0.6s ease;
}

The only OBVIOUS SOLUTION:

What I would suggest you is just to create a class in your common css as cursor-pointer. That is simple and elegant as of now.

.cursor-pointer{
  cursor: pointer;
}
<div class="cursor-pointer">Hover on  me</div>


(2) Simply add an attribute role="button" to HTML elements you like to have a pointer cursor when the mouse cursor is hovering the elements. - Aryo
2
[+72] [2017-11-13 16:45:18] Klooven

UPDATE for Bootstrap 4 stable

The cursor: pointer; rule has been restored, so buttons will now by default have the cursor on hover:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-success">Sample Button</button>


No, there isn't. You need to make some custom CSS for this.

If you just need a link that looks like a button (with pointer), use this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<a class="btn btn-success" href="#" role="button">Sample Button</a>


(18) I've accomplished the effect by simply adding: role="button" ... No need for the btn class. - Matt Wohler
FYI: disabled state is broken for buttons (has pointer) but works for links (no pointer): tested at getbootstrap.com/docs/4.4/components/buttons in FF76 and same behavior in my app using webjar's 4.4.1-1 - Derek White
3
[+60] [2020-12-29 09:08:07] Afzal Ali

You can assign button to role attribute of any html tag/element to make pointer over it.

<html-element role="button" />

(8) copy of Vibhor Dube's answer?! - Impostor
4
[+40] [2019-09-05 08:27:42] Alexis Paques

I usually just add the following custom CSS, the W3School example [1] prepended with cursor-

.cursor-alias {cursor: alias;}
.cursor-all-scroll {cursor: all-scroll;}
.cursor-auto {cursor: auto;}
.cursor-cell {cursor: cell;}
.cursor-context-menu {cursor: context-menu;}
.cursor-col-resize {cursor: col-resize;}
.cursor-copy {cursor: copy;}
.cursor-crosshair {cursor: crosshair;}
.cursor-default {cursor: default;}
.cursor-e-resize {cursor: e-resize;}
.cursor-ew-resize {cursor: ew-resize;}
.cursor-grab {cursor: -webkit-grab; cursor: grab;}
.cursor-grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.cursor-help {cursor: help;}
.cursor-move {cursor: move;}
.cursor-n-resize {cursor: n-resize;}
.cursor-ne-resize {cursor: ne-resize;}
.cursor-nesw-resize {cursor: nesw-resize;}
.cursor-ns-resize {cursor: ns-resize;}
.cursor-nw-resize {cursor: nw-resize;}
.cursor-nwse-resize {cursor: nwse-resize;}
.cursor-no-drop {cursor: no-drop;}
.cursor-none {cursor: none;}
.cursor-not-allowed {cursor: not-allowed;}
.cursor-pointer {cursor: pointer;}
.cursor-progress {cursor: progress;}
.cursor-row-resize {cursor: row-resize;}
.cursor-s-resize {cursor: s-resize;}
.cursor-se-resize {cursor: se-resize;}
.cursor-sw-resize {cursor: sw-resize;}
.cursor-text {cursor: text;}
.cursor-w-resize {cursor: w-resize;}
.cursor-wait {cursor: wait;}
.cursor-zoom-in {cursor: zoom-in;}
.cursor-zoom-out {cursor: zoom-out;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success cursor-pointer">Sample Button</button>

[1] https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

5
[+17] [2020-06-15 13:26:24] Rick

I don't have enough reputation to comment on the relevant answers, but to people reading this; adding .btn does not just add the pointer cursor but adds a lot of other styling [1] as well. Which is great if it's a button and you want the bootstap button styling, but in other cases it would mess a lot up for other elements.

The best thing you can do, like Hari Das suggested [2], and which I also always do, is to add the following css:

.cursor-pointer {
  cursor: pointer;
}

After which you can add it to any element

<div class="cursor-pointer"> .. </div>
[1] https://github.com/twbs/bootstrap/blob/master/scss/_buttons.scss
[2] https://stackoverflow.com/a/54391421/6234444

bootstrap 4.3 has fixed this problem already getbootstrap.com/docs/4.3/components/buttons/#examples - w411 3
6
[+5] [2019-06-28 06:09:19] Coder Amogh

I tried and found out that if you add a class called btn you can get that hand or cursor icon if you hover over the mouse to that element. Try and see.

Example:

<span class="btn">Hovering over must have mouse cursor set to hand or pointer!</span>

Cheers!


7
[+4] [2019-11-17 19:33:43] user8588978

Bootstrap 3 - Just adding the "btn" Class worked for me.

Without pointer cursor:

<span class="label label-success">text</span>

With pointer cursor:

<span class="label label-success btn">text</span>

8
[+1] [2021-03-31 15:32:36] Davut Gürbüz

Don't know when added but according to its doc there is btn-link

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
<button type="button" class="btn btn-link">Click Me, Hover Me Link</button>
 <body> 
 </html>

Link

https://getbootstrap.com/docs/4.0/components/buttons/

btn-link [1]

[1] https://getbootstrap.com/docs/4.0/components/buttons/

9
[+1] [2022-09-01 06:43:34] swadhin

Try to use type = button <span type="button">Hover me</span>


10
[0] [2021-01-31 13:55:51] Vysakh Vijayakumar

There is no classes for that. But you can add inline style for your div or other elements like,

<div class="" style="cursor: pointer;">

this is valid html but it's not needed: the update to the accepted answer to this question notes Bootstrap 4 Stable now handles this out of the box - iammatthew2
This question talks about Bootstrap. Using the "style" attribute is ignoring Bootstrap. - Oliver P
11
[0] [2022-12-14 09:01:37] Du-Lacoste

You could use either one of the followings to get your job done:

1st: use type=button;

<!-- display as a link -->
<button type="button" class="btn btn-link">Click Me, Hover Me Link</button> 

<!-- display as a button -->
<button type="button" class="btn btn-primary">Click Me, Hover Me Link</button> 

2nd: use anchor and role=button;

<a role="button" class="btn btn-primary" href="#">Click Me, Hover Me Link</a>

either way, once you hover you will see hand ...


12