// This defines the initial colors of the button State.init({ backgroundColor: "rgb(89, 230, 146)", color: "white", borderColor: "green", }); // This defines the colors when the mouse enters the button const handleOnMouseEnter = () => { State.update({ backgroundColor: "white", color: "green", borderColor: "green", }); }; // This defines the colors when the mouse leaves const handleOnMouseLeave = () => { State.update({ backgroundColor: "green", color: "white", borderColor: "green", }); }; return ( <button onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave} style={{ backgroundColor: state.backgroundColor, color: state.color, borderColor: state.borderColor, }} > BOS themed button </button> );