Display + edge icon on hover (#12635)

This commit is contained in:
martmull
2025-06-17 10:17:58 +02:00
committed by GitHub
parent 15c703c01e
commit ccd16fb27f
5 changed files with 79 additions and 28 deletions

View File

@ -31,6 +31,15 @@ const StyledButton = styled.button`
}
`;
const StyledAnimatedIconWrapper = styled.span`
display: flex;
transition: transform 0.1s ease;
&:hover {
transform: translateY(-3%);
}
`;
export const InsideButton = ({
className,
Icon,
@ -41,7 +50,11 @@ export const InsideButton = ({
return (
<StyledButton className={className} onClick={onClick} disabled={disabled}>
{Icon && <Icon size={theme.icon.size.sm} />}
{Icon && (
<StyledAnimatedIconWrapper>
<Icon size={theme.icon.size.sm} />
</StyledAnimatedIconWrapper>
)}
</StyledButton>
);
};