To achieve this effect, you can utilize CSS along with some creative techniques. Below is a compact component that will wrap everything up nicely.
Check out the demo here
const InvertHoverButton = ({ id, backgroundColor, labelColor }) => {
// cubic-bezier(0.23, 1, 0.32, 1)
const transition = `background-color 450ms ${MaterialUI.transitions.easeOutFunction} 0ms`;
return (
<div style={{ display: 'inline-block' }}>
<style>
{`
#${id}:hover {
transition: ${transition} !important;
background-color: ${labelColor} !important;
color: ${backgroundColor} !important;
}
#${id} {
transition: ${transition} !important;
background-color: ${backgroundColor} !important;
color: ${labelColor} !important;
}
`}
</style>
<RaisedButton id={id} backgroundColor={labelColor} labelColor={backgroundColor} className="test">Fiddle!</RaisedButton>
</div>
);
};
Example:
// Don't forget to provide id, backgroundColor, and labelColor
<InvertHoverButton id="myButton" backgroundColor="red" labelColor="white">Fiddle!</InvertHoverButton>
You have the flexibility to adjust the CSS styling as needed, but I've tried to encapsulate it within this component for ease of testing on Stack Overflow. The main points to remember are:
1) Utilize CSS :hover on the <button> element rendered by RaisedButton
2) Ensure the initial props of RaisedButton have colors inverted to work with material-ui's hover overlay and ripple effects. Use CSS to correct the swapped colors when not in the hover state
3) Match the transition timing used by material-ui for the button label to ensure smooth animation
NOTE: If you're using material-ui custom themes, consider modifying this component to incorporate the primary/secondary colors from the raisedButton theme instead of accepting custom colors.