title: Hover transition effect for Button
body: <p>I try to add a one-second transition from the normal color scheme to the hovering color for the Button element in Material UI. I use the method <code>transitions.create(props, options)</code> talked here in this article: <a href="https://medium.com/@octaviocoria/custom-css-transitions-with-react-material-ui-5d41cb2e7c5" rel="nofollow noreferrer">https://medium.com/@octaviocoria/custom-css-transitions-with-react-material-ui-5d41cb2e7c5</a>. Actually the transition can work, but the hovering color will also appear immediately on the button as long as the mouse hovers on it. How can I stop the color change immediately but wait for the transition to make it change.</p>
  
  <p>Related code:</p>
  
  <pre><code>function Mbutton({ classes }) {
    return (
      &lt;Button variant="outlined" className={classes.cart} disableRipple&gt;
        Add to Cart
      &lt;/Button&gt;
    );
  }
  
  const styles = theme =&gt; ({
    cart: {
      padding: "6px 16px",
      borderRadius: 0,
      border: "2px solid #000",
      "&amp;:hover": {
        transition: theme.transitions.create(["backgroundColor", "color"], {
          duration: 1000
        }),
        backgroundColor: "#000",
        color: "#fff"
      }
    }
  });
  </code></pre>
  
  <p>Also can check it on Code Sandbox: <a href="https://codesandbox.io/s/mbutton-fogco" rel="nofollow noreferrer">https://codesandbox.io/s/mbutton-fogco</a></p>
  
  <p>Thanks.</p>