htmlcssbuttonmousehover

How can I make the area around a button also clickable?

If the mouse is about 20px close to the button, I want that the button should be clickable. I tried increasing the width of the button by 20px and making the opacity 0.1 so the big size won't show. Then in the button:hover rule I made the opacity 1.

I did the above cause I don't really know how go about it.

the image depicts what I am trying to achieve.

Solution

  • Using vanilla js:

    document.getElementById("my-button").onclick = function (e) {
  e.stopPropagation();
  window.alert("here we go");
};
    button {
  margin: 20px;
  cursor: pointer;
}

div {
  cursor: pointer;
  background: gray;
  width: fit-content;
}

body {
  background: gray;
}
    <div onclick="document.getElementById('my-button').click()">
  <button id="my-button">Button</button>
</div>