how to change the cursor style for a button on click-CodePudding

i created a button using HTML and i'm trying to style the bottom to give it a different cursor style when i click the button. how do I go about it?

CodePudding user response：

In your css you can apply the cursor style for your button. You can also use inline style. Small examle.

button {
  cursor:crosshair;
}

<button>btn</button>

CodePudding user response：

You can accomplish this with a cursor css property. Check Mozilla's documentation for more indepth explanation regarding the property.

I've just read your question again and I see you want the cursor to change when a button press has occurred and is still lasting. You can accomplish it with an :active pseudo-class.

button:active {
    cursor: help;
}

<button href="#">test button</button>

CodePudding user response：

When the html is already parsed (DOMContentLoaded event) the script starts to work. We add an event listener for a click on this particular button and when it's clicked we assign a class for styling, for instance, a disabled state with another cursor.

I add a cursor with a pointing hand to a default state of the button since there's no default cursor: pointer; for buttons in browsers by default.

The 'clicked' cursor state is applied and works in browser (you can check it in Developer Tools in Chrome or another browser) after clicking on the button but it looks buggy in the result section of the code snippet below for some reason so check this approach in your code and browser.

Good luck