CODEWITHSUNDEEP
htmlcssbutton
Kudor
Kudor

Reputation: 69

My html button cannot be clicked, even though I modified only its style

The code I have for my button in HTML is this simple

What causes the button to not be able to be clicked, even though it is of type button?

.menubutton {
  background-color: orange;
  color: black;
  text-align: center;
  font-size: 20px;
  padding: 20px 50px;
}
<button class="menubutton" style="position:absolute;left:10%" type="button"><b>Home</b></button>

Upvotes: 0

Views: 353

Answers (2)

human bean
human bean

Reputation: 857

The button is able to be clicked, as demonstrated by the following event listener:

document.querySelector(".menubutton").addEventListener("click", (e) => {
  console.log("button was clicked!");
})
.menubutton {
  background-color: orange;
  color: black;
  text-align: center;
  font-size: 20px;
  padding: 20px 50px;
}
<button class="menubutton" style="position:absolute;left:10%" type="button"><b>Home</b></button>

You probably mean that the user can't tell it's a button. To improve this, add a hover effect and pointer cursor to the CSS:

document.querySelector(".menubutton").addEventListener("click", (e) => {
  console.log("button was clicked!");
})
.menubutton {
  background-color: orange;
  color: black;
  text-align: center;
  font-size: 20px;
  padding: 20px 50px;
  
  /* 👇 pointer on hover */
  cursor: pointer;
  /* 👇 transition */
  transition: 0.2s ease;
}

/* 👇 hover event */
.menubutton:hover {
  background-color: lightgrey;
}
<button class="menubutton" style="position:absolute;left:10%" type="button"><b>Home</b></button>

Read more about hover effects here and transitions here.

Upvotes: 3

TechStudent10
TechStudent10

Reputation: 79

  1. I don't think you need to add type=button on a button element.
  2. You should add all the styles in the element in the <style> tag.

Using these changes, you should have:

HTML

<button class="menubutton">
    <b>Home</b>
</button>

CSS

<style>
    .menubutton {
        position: absolute;
        left: 10%;
        background-color: orange;
        color: black;
        text-align: center;
        font-size: 20px;
        padding: 20px 50px;
    }
</style>

Upvotes: -2

Related Questions