CODEWITHSUNDEEP
cssreactjs
chidi
chidi

Reputation: 29

how to change the cursor style for a button on click

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?

Upvotes: 2

Views: 1655

Answers (4)

fuziion_dev
fuziion_dev

Reputation: 1691

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>

Upvotes: 2

Mitali Patel
Mitali Patel

Reputation: 427

button {
  cursor:pointer;
}
<button>Click</button>

Upvotes: -1

Max Samusevich
Max Samusevich

Reputation: 123

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😀

document.addEventListener('DOMContentLoaded', (event) => {
   let buttonExample = document.querySelector(".button-example");
   
   buttonExample.addEventListener('click', (event) => {
    
      event.target.classList.add("button-example--disabled");

  });
  
});
.container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.button-example{
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  padding: 1em 2em;
  text-transform: uppercase;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 0.5em;
  color: #000;
}

.button-example:hover{
  cursor: pointer;
}

.button-example--disabled{
  background-color: #fefefe;
  border-color: grey;
  color: grey;
  cursor: not-allowed;
}
<div class="container">
<button type="button" class="button-example">Button text</button>
</div>

Upvotes: 1

Max Pattern
Max Pattern

Reputation: 1688

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>

Upvotes: 2

Related Questions