In Bootstrap 4, the cursor remains unchanged when hovering over a button, but it does change when hovering over anchors

While working with bootstrap 4 alpha, I noticed that the cursor on buttons has been removed but not on anchor tags. This can be seen as an example on the official Bootstrap site.

In my application, there is a form with two buttons - one for submitting the form and the other for redirecting to another page. The input button does not display the cursor, whereas the anchor tag does. I am aware that a custom CSS class can be created, but I wonder if this removal of cursors is intentional or a bug in the current alpha version.

<input type="submit" value="Sign In" class="btn btn-primary" />
<a role="button" href="@Url.Action("Register", "Account")" class="btn btn-secondary">Register Now</a>

Answer №1

Here is a detailed explanation - https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b

I cannot confirm if Bootstrap v4 applies this to anchor elements as well (unable to verify currently), but what remains certain is that browsers automatically display the cursor whenever a link contains the href attribute.

UPDATE - The latest stable version was released just a week ago and now includes

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

Official announcement at

Answer №2

include the class="button"

this will change the cursor to a pointer shape

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring touch events and input focusing on mobile devices using JavaScript

Recently, I integrated a JS touch mapping function into one of my pages sourced from Stack Overflow. This was necessary to enable my jQuery draggables to work on iOS Safari, as drag and drop functionality was not functioning without this mapping. Here is ...

Personalize the position of the v-select drop-down menu

I am currently working with the vuetify v-select component. The problem I am encountering is that instead of the dropdown opening downwards, I need it to open upwards since the dropdown is positioned at the bottom of the page which causes some of the dro ...

Is there a way to fade just the div element without affecting the text?

Is there a way to apply fade in/out effect only to the background of the div, without affecting the text inside? You can view my code snippet here: https://jsfiddle.net/tc6fq235/3/ <div class="fade">Hover over me.</div> .fade { background- ...

Saving an HTML5 canvas image to an MSSQL varbinary(max) field: A step-by-step guide

SAVING CANVAS IMAGE AS BASE64 STRING TO HIDDEN FIELD This script binds the base64 string to a hidden field on click event. save.addEventListener('click', function (event) { var dataUrl = canvas.toDataURL(); $('txtbx').val(dataUrl) ...

Execute code after the CSS has been loaded, but before the images start downloading

My website is experiencing a challenge. Downloading images is taking too long, with the complete website taking around 20 seconds to fully load on my system. A loader is displayed but only hides once the complete website is loaded (after 20 seconds). Whe ...

Methods for scaling the size of CSS background images

Can anyone assist me with scaling background image size properly? code: http://codepen.io/AnilSimon123/pen/JRBRZa Below is the code snippet: .bgimage{ background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vec ...

Is the displayed Cyrillic string in the incorrect character set?

I am facing an issue with extracting a value from a decoded JSON response obtained from a Russian API. The value within the JSON = Object268 Initially, it appeared as: Объект 268 After including <meta charset="utf-8"> in my html ...

Hide Details tag only on mobile view

How can I easily close the default opened <details> tag on mobile? I am working with Wordpress. Any suggestions on how to achieve this? <details open> <summary>Details</summary> Something small enough to go unnoticed. </ ...

Instant image update without the need to refresh the page

Currently working on a new web application that will allow users to create profile pages with their pictures. Using a basic HTML Form for inputting profile information. Looking for a solution where the uploaded profile picture can be viewed instantly with ...

Issue with Bootstrap columns being misaligned on mobile devices

On my website, I've implemented a Bootstrap Grid design with three columns under the container-fluid BS attribute, along with .row .no-gutters. While the boxes are perfectly aligned in the desktop view, they stack vertically on mobile and tablet devi ...

Storing the entire HTML5 game on the local device for faster loading and

I'm in the process of developing a 2D HTML5 game and I'm looking to optimize asset storage by requesting each asset only once and then storing them in the user's filesystem. Currently, I'm utilizing localStorage for this purpose, but it ...

Tips for adjusting the color of a row when hovering

Can I modify the row color on hover in material-table using props? Similar to this example. Appreciate your help. ...

jquery unclean data, in need of the jquery ui popup dialog

I have been experimenting with this library to determine if a form is dirty. By default, it triggers the standard browser confirmation asking whether you are certain about navigating away from the page. The jquery dirtyforms website includes a section sugg ...

The persistent space between the navbar and the index page remains despite the suggested fixes provided

There appears to be a discrepancy between the navigation bar and the rest of the page. Despite my efforts to adjust margins, I haven't been able to resolve it. The system is prompting me for more details before posting this question, but I'm unsu ...

EU directive on cookies: What is the best way to store your preferences?

While there are numerous third-party solutions available to comply with the cookie EU directive, I prefer to learn how to implement it myself. My specific requirement is that when a user clicks on "Accept", their choice should be remembered for the entire ...

The menu does not adjust to fit the site properly, causing the video/photos to appear off to the right on smaller screens

Earlier, I received some fantastic help for which I am extremely grateful. However, I find myself in need of your expert assistance once again. The website I am currently working on is . After simplifying the code and removing absolute positioning, I enco ...

Unable to apply a border to the button

I'm having trouble adding a border to my button on the website. I've tried setting the color, which works fine for the font color within the button, but the border properties are not working. Despite trying some highly rated solutions, none of th ...

Looking for assistance in adding some animated flair to your website as users scroll

I don't have much experience in animation but I would like to create some animation effects on scroll down. Can anyone provide suggestions? I attempted using SVG paths, but it didn't work out as expected. What I am aiming for is that when a visi ...

I implemented the order property in the css, however the layout positions remain unchanged

<section id="home"> <div class="container"> <div class="row align-items-center container-items"> <div class="col-md-6"> <div class="info"> <h1>Lorem ...

Is there a way to delete content in HTML after a particular text using Python and BeautifulSoup4?

I am currently in the process of scraping information from Wikipedia. My goal is to extract only the necessary data and filter out any irrelevant content such as See also, References, etc. <h2> <span class="mw-headline" id="See ...