How can I make the area around a button also clickable? [duplicate] - html

Question

This question already has answers here:
Increasing clickable area of a button
(4 answers)
How to increase the clickable area of a <a> tag button?
(13 answers)
Closed 3 months ago.
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.

Answer 1

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>

Answer 2

$(function() {
var $win = $(window); // or $box parent container
var $box = $(".box");
var $log = $(".log");
$win.on("click.Bst", function(event) {
if (
$box.has(event.target).length == 0 //checks if descendants of $box was clicked
&&
!$box.is(event.target) //checks if the $box itself was clicked
) {
$log.text("you clicked outside the box");
} else {
$log.text("you clicked inside the box");
}
});
});
body,
div,
p {
margin: 0;
padding: 0;
}
body {
background-color: #d6d6d6;
}
.log {
position: relative;
top: 10px;
left: 10px;
color: #000;
}
.box {
position: relative;
top: 50px;
left: 100px;
width: 100px;
height: 100px;
font-size: 18px;
text-align: center;
color: white;
background-color: #79abff;
}
.box p {
color: black;
}
<p class="log">You clicked on: </p>
<div class="box">
Click me
<p>nested p</p>
</div>