I have incorporated a unique Button Component in my React project that transforms on hover using a scale value. I am utilizing this button twice.
The first instance contains only dynamic content without an onClick property:
<Button className={`${classes.btn} ${classes["main-btn"]}`}>
{isLoginMode
? "Login"
: isRegisterMode
? "Register"
: "Reset Password"}
</Button>
The second instance involves an onClick event to modify some state:
<Button
properties={{
onClick: () => {
setAuthMode(
isLoginMode ? AuthModes.register : AuthModes.login
);
},
}}
className={`${classes.btn} ${classes["alt-btn"]`}
>
{isLoginMode ? "Register" : "Login"}
</Button>
While the desktop version works smoothly, there seems to be a delay in updating the text of the second button on Safari mobile. This issue arises due to the transition property, which functioned properly once removed.
Here's the CSS snippet:
Within this component:
.btn {
width: 100%;
padding: 0.7rem 0.9rem;
transition: transform 1s ease;
}
In the Custom Button Component:
.btn {
outline: none;
border: none;
padding: 0.8rem 1.2rem;
background-color: var(--secondary-color);
border-radius: var(--radius-low);
color: white;
font-weight: bold;
}
.btn:hover {
transform: scale(1.02);
}