I am trying to implement a one-second transition from the default color scheme to the hover color for a Button element in Material UI. I am using the
transitions.create(props, options)Here is the relevant code snippet:
function Mbutton({ classes }) {
return (
<Button variant="outlined" className={classes.cart} disableRipple>
Add to Cart
</Button>
);
}
const styles = theme => ({
cart: {
padding: "6px 16px",
borderRadius: 0,
border: "2px solid #000",
"&:hover": {
transition: theme.transitions.create(["backgroundColor", "color"], {
duration: 1000
}),
backgroundColor: "#000",
color: "#fff"
}
}
});
You can also view and test it on Code Sandbox: https://codesandbox.io/s/mbutton-fogco
Thank you.