Outlined button with linear gradient border breaks when zooming page out - css

Question

I made a button using MUI that has a round linear gradient border when hovering over it.
When I zoom out of the browser, the border breaks.
Here is an image of what the button looks like when zooming out of the page.
Here is my code:
const CustomButton = styled(Button)<ButtonProps | any>(({theme, variant}) => ({
borderRadius: '8px',
color: '#E7E7E1',
display: 'block',
letterSpacing: '1px',
padding: '0px',
position: 'relative',
zIndex: 2,
border: '1px solid #FFFFFF',
margin: '1px',
backgroundPosition: 'bottom',
'&:hover': {
border: 'none',
padding: '1px',
backgroundImage: 'linear-gradient(to left, red, green)',
color: '#fff',
zIndex: 1,
},
}));
const TestingButton = () => {
return (
<div className={classes.container}>
<CustomButton className={classes.button}>
<span className={classes.text}>Testing</span>
</CustomButton>
</div>
);
};
export default TestingButton;
.container {
margin-top: 20px;
margin-right: 40px;
}
.button {
margin-left: auto;
}
.text {
width: 100%;
background: #0e0e0e;
border-radius: 8px;
padding: 50px 200px;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 0.4px;
color: #ffffff;
}
.text:active {
background: #262626;
}