Whenever I hover over the button, it changes width as intended but the image shifts towards the center. My goal is to keep it fixed on the left so it doesn't shift when the button's width changes. Below is my React code:
<div>
<button
className={
this.state.activecut === true
? "designstudiobuttonleftopactive"
: "designstudiobuttonlefttop"
}
onClick={this.cutActiveHandler}
>
<img src={shirtlogo} id="cutlogo" alt="" />
</button>
</div>
.designstudiobuttonlefttop {
width: 60px;
height: 60px;
margin-top: 150px;
display: block;
border: 1px solid #574904;
border-radius: 50%;
background-color: white;
color: #574904;
text-align: center;
margin-left: 50px;
}
.designstudiobuttonlefttop:hover {
background-color: #f2f2f2;
color: #574904 !important;
text-decoration: underline;
transition-delay: 100ms !important;
cursor: pointer !important;
width: 200px;
border-radius: 50px 50px 50px 50px;
}
#cutlogo {
width: 50px;
height: 50px;
padding-right: 5px;
}
.designstudiobuttonleftopactive {
color: #574904 !important;
border: none;
background-color: white;
text-align: center;
text-decoration: underline;
cursor: pointer;
margin-top: 100px;
display: block;
margin-left: 50px;
}