note: this didn’t seem to be what I meant.
I’m making a menu bar (File, Edit, View, etc) where it would be nice if I could expand the hitbox of the menus to make it harder to let go of your currently opened ones.
Example of what i mean:
Two things I’ve tried:
-
I tried putting the elements in a
::before/::afterselector and then having the actual element act as the extra hitbox, but I wasn’t sure how to make the margins and padding work. -
I also tried to use an invisible
outlinebut that doesn’t change the element’s hitbox.
Is there any way to implement this? ( JS is ok )
2
According to my understanding what you want is “Actual button should be small but its clickable area should me big/large/more”. If this is what you want then you can achieve it with this two methods:
1. This approach will be useful when button would not contain any background-color and border. Hover around the button and you will notice the clickable area kicking in.
.testBtn1{
background-color: transparent;
border: none;
padding: 20px;
cursor: pointer;
}<button class="testBtn1">This is button with transparent background and no border</button>2. This approach will be useful when you want background-color & border.
.testBtn2{
cursor: pointer;
background-color: transparent;
border: none;
padding: 20px;
}
.testBtn2 p{
background-color: lightgray;
padding: 10px;
border: 1px solid gray;
border-radius: 10px;
}<button class="testBtn2"><p>This is button with background and border</p></button>This are two ways. If I have misunderstood or missed something then do share. You can change padding as you need in both of options to increase and decrease clickable area.