Hey everyone, I am using Wix Studio and trying to create this circle to pill hover on my icon button. I have successfully done almost all of the work, but I have an issue with keeping the button centred on the screen β so that the additional width is added to both the left and right side of it.
Right now it comes out like this:
But I want the width to be added equally on both sides of the icon and so that it stays centered.
I have added this code here, but I can not figure out how to have the button stay horizontally centred on the screen. I have added a container and tried to center the button as well, nothing works. Can anyone help please?
.eyecontainer {
text-align: center; /* Center the button within its container */
}
.eyebutton {
background-color: #3498db; /* Initial background color /
color: white; / Text color /
border: none; / Remove border /
border-radius: 100px; / Rounded corners /
display: inline-block; / Allow width change /
box-sizing: border-box; / Include padding and border in width calculation /
transition: width 0.3s ease; / Smooth transition for width change /
width: 52px; / Initial width */
}
.eyebutton:hover {
width: 120px; /* Width on hover */
}