How to increase the clickable area of a button? - html

Question

I need to increase the clickable height of a button to 48px. The button has a background color, and I want to increase the clickable height without actually setting the height of the button (i.e. the increase in clickable area should be invisible / empty space around the button). I've tried increasing the padding and setting background-clip: content-box, however this means that the edges of the button are no longer rounded. What is the recommended way to achieve this?

Answer 1

I'd work with a pseudo element here:
button {
--clickable-space-around-button: -15px;
position: relative;
}
button::after {
content: "";
left: var(--clickable-space-around-button);
right: var(--clickable-space-around-button);
bottom: var(--clickable-space-around-button);
top: var(--clickable-space-around-button);
position: absolute;
}
<div style="padding: 20px;">
<button onclick="console.log('clicked')">Click me</button>
</div>

Answer 2

If your issue was rounded corner then use transparent border and padding-box not content-box
button {
background:red padding-box;
font-size:25px;
padding:10px 20px;
border:25px solid transparent;
border-radius:35px;
outline:none;
}
button:active {
background-color:blue;
}
<button>text</button>

Answer 3

Here is what I found for your request, I hope it will be useful.
I can suggest adding an invisible before (tinted with a color so that
the area is visible, you just need to remove this color):
.link {
position: relative;
display: block;
margin:50px auto;
height: 1px;
width: 1px;
background: pink;
cursor: pointer;
}
.link:before {
content: '';
position: absolute;
display: block;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background: rgba(255, 0, 0, 0.06);//цвет убрать
}
<a class="link" href="#"></a>
Original Answer: https://ru.stackoverflow.com/a/702645
Or you also can just try margin
Have a good day!