Bootstrap Button - No Hand Cursor

Question

I am developing an MVC6 project in Visual Studio 2015. I have just added Bootstrap 3.3.6 using Bower. On a very simple html page I have referenced the CSS in the header and Bootstrap at the bottom of the body as follows:

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

I defined a button as follows:

<button class="btn btn-primary">Hello</button>

When I debug the project (IIS, IE11) the button appears and is clearly styled by Bootstrap but there is no hand cursor.

If I use the browser to navigate to an example of a Bootstrap styled button, for example here: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp, the hand cursor appears as I would expect. So it's not my browser at fault.

Can anyone suggest why I am not getting a hand cursor from a simple Bootstrap styled button please?

Answer 1

You need to get rid of the button tags and just use anchor tags with bootstrap classes. For example:

instead of:

<button class="btn btn-primary">Hello </button>

write:

<a href="#" class="btn btn-primary">Hello </a>

This will make the HAND CURSOR appear when hovering over the btn bootstrap class

Answer 2

Try add role='button' instead. I have had this problem even though the documentation on bootstrap says type='button' should do the work but mine didn't.