css: how to prevent absolutely positioned :after element from scaling during transition? - css

Question

I have an absolutely positioned button on the bottom left cornor. The size is fixed at 15px width and height.
The button has an :after element to increase the clickable area size.
When you hover over the button, the button expands. But this also increases size of the :after element.
How do you prevent the :after element from scaling scale(1.5) with the button element?
I tried playing around with width and height properties but this messes up the positioning.
body {
position: relative;
height: 100vh;
padding:0;
margin: 0;
}
p {
margin: 0;
padding: 0;
}
button {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 10000;
}
button::after {
content: '';
/* z-index: -100000; */
position: absolute;
bottom: 50%;
left: 50%;
height: 50px;
width: 50px;
transform: translate(-50%, 50%);
background: transparent;
border: 1px solid black;
}
button:hover {
transform: scale(1.5);
transition: transform 0.2s;
}
<p>element is left bottom corner</p>
<button></button>

Answer 1

Invert the styles applied I.E. apply the styles applied to the button to the :after element and vice-versa. because otherwise the :after element will also expand when hovered over the button
button {
position:relative;
border:1px solid #000;
display: block;
padding: 1.5rem 2.5rem;
}
button::after {
content: '';
z-index: -100000;
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, 50%);
display: block;
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: red;
z-index: 10000;
}
button:hover:after {
transform: translate(-50%, 50%) scale(1.5);
transition: transform 0.2s;
}
<p>element is left bottom corner</p>
<button></button>

Answer 2

Just create a second button which will act as a disguise. The button than you want has been given class="orgBut" and the disguised button which will be responsible for adding the borders is given class="afBut".
Both have the same position and properties, just the z-index of afBut is set to 0 so that it goes behind the orgBut.
The ::after selector is given to the afBut i.e. the disguised button which is behind your original button. And hover effect is given to the orgBut.
And that's it.
When you hover above the original button the cursor never goes to the button behind it and that is why the borders that you set are left un-affected.
The code is attached!!
`.orgBut {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 10000;
}
.afBut {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 0;
}
.afBut::after {
content: '';
/* z-index: -100000; */
position: absolute;
bottom: 50%;
left: 50%;
height: 50px;
width: 50px;
transform: translate(-50%, 50%);
background: transparent;
border: 1px solid black;
}
.orgBut:hover {
transform: scale(1.5);
transition: transform 0.2s;
}`
<p>element is left bottom corner</p>
<button class="orgBut"></button>
<button class="afBut"></button>
Feel free for any further issues