Button Background on hover won't fill all the way
I have a button that when hovered it fills the background diagonally but for some reason it keeps the corners not filled. What do I need to change so it fills it all the way?
Here is my code for the button
![No description](https://cdn.answeroverflow.com/1263278140738899989/image.png)
16 Replies
maybe make a codepen
or show with a video
My issue is not the animation, but filling up the corners. But alright here you go:
https://codepen.io/Pqteras/pen/dyBGVbV
u want the corners to be sharp when bg fills?
it's round now since u gave border-radius
I want when its hovered, to not show the white background on the corners. Idk how to explain it further but when you hover over the button you can see on the corners the white color, which I do not want.
Here I zoomed it further
![No description](https://cdn.answeroverflow.com/1263289090691043348/image.png)
![No description](https://cdn.answeroverflow.com/1263289588181368906/Screenshot_20240718_062128_Chrome.jpg)
is this wut u want?
Yeah but keeping the rounded corners
only sharp edge when animated
otherwise rounded
that?
What?
is this wut u want?
I want the button to still have rounded corners, hovered or not.
The issue is that when hovered the button has a few white spots on its corners, making it not appealing to the eye. I want that gone.
I don't see any while spots
ooh now i see
i have lowesy brightness + extra dim on xD
ok i found 1 solution for u
make it so that once the width of the ::before is 120%, meaning tbe transition is done, it shoild set the bg color of the button .meetTeam to --primary-color
this way the bg color covers the white gap
but again, make sure u make so it sets the bg color only after transition of ::before is done
otherwise you would be able to see the bg of the button changing BEFORE the ::before fills the button, which i assume u don't want to show the user
and i have tried it, it works
m not showing u cause it's simple instruction. u should be able to do it yourself
I fixed it with this code for anyone who is wondering