Adding a hover effect when hovering over a button with arrows [closed]

For animationType = double-arrows, you need to write an animation with a hover effect, so that when you hover over the button itself, the arrow goes to the right and is not visible and a block with an arrow appears slowly from the left edge, which slightly pushes away the text and the block itself.

No hover effect

When hovering, a block with an arrow appears on the left, and the arrow that was on the right slowly moves to the right

Button.tsx

import { FC } from 'react';import { Link } from 'react-router-dom';interface ButtonProps {  to?: string;  text?: string;  icon?: string;  color?: string;  altText?: string;  className?: string;  textColor?: string;  onClick?: () => void;  classNameForImg?: string;  animationType?: 'right' | 'right-up' | 'double-arrows';}const Button: FC<ButtonProps> = ({  classNameForImg = 'w-6 h-6 transform transition-transform duration-300 msm:w-5 msm:h-5',  textColor = 'blackMain',  animationType = 'right',  color = 'transparent',  className = 'w-6 h-6',  altText = 'icon',  onClick,  icon,  text,  to,  ...props}) => {  const buttonAnimation =    animationType === 'double-arrows'      ? 'right-animation__button'      : '';  const buttonStyles = `group flex items-center justify-center font-bold text-base gap-3 transition-all rounded-xl duration-200 leading-[24px] active:scale-95 ${className} bg-${color} text-${textColor} ${buttonAnimation}`;  const iconAnimation =    animationType === 'right'      ? 'group-hover:translate-x-4'      : animationType === 'double-arrows'        ? "group-hover:translate-x-24"        : 'group-hover:translate-x-2 group-hover:-translate-y-1'  if (to) {    return (<Link to={to} className={buttonStyles} onClick={onClick} {...props} ><span>          {text}</span>        {icon && (<img            src={icon}            alt={altText}            className={`${classNameForImg} ${iconAnimation}`}          />        )}</Link>    );  }  return (<button className={buttonStyles} onClick={onClick} {...props}><span>        {text}</span>      {icon && (<img          src={icon}          alt={altText}          className={`${classNameForImg}`} />      )}</button>  );};export default Button;

index.css

.right-animation__button {  position: relative;  text-indent: 0;  transition: text-indent 0.2s linear;}.right-animation__button::before {  content: url(../shared/assets/header/arrow-right-white.svg);  display: flex;  align-items: center;  justify-content: center;  position: absolute;  top: 0;  left: 0;  height: 120%;  width: 10px;  transform: scale(0, 1);  transform-origin: left center;  transition: transform 0.2s linear;  pointer-events: none;}.right-animation__button:hover {  text-indent: 30px;}.right-animation__button:hover::before {  transform: scale(1, 1);}