Circle Button to Pill Button on Hover

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:
Screen Recording 2024-08-16 at 14

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? :pray:

.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 */
}

1 Like

here’s how I’d like it to look:
ezgif-3-a8d8cb9969

1 Like

Hi @_Blau - this CSS works for me. Adjust it to your needs.


.button {
  background-color: #3498db; /* Initial background color */
  color: white; /* Text color */
  border: none; /* Remove border */
  border-radius: 100px; /* Rounded corners */
  display: inline-flex; /* Use flexbox for centering content */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  box-sizing: border-box; /* Include padding and border in width calculation */
  transition: all 0.3s ease; /* Smooth transition for all changes */
  width: 52px; /* Initial width */
  height: 52px; /* Set a fixed height */
  position: relative; /* Enable positioning for pseudo-element */
  transform: translateX(0); /* Initial position */
}

.button:hover {
  width: 120px; /* Width on hover */
  transform: translateX(-34px); 
}
4 Likes

Amazing this worked!! thanks so much <3

2 Likes