Radium Button hover

HTML

<script src="https://fb.me/react-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<script src="https://npmcdn.com/radium/dist/radium.js"></script>
<body>
  <div id="test"></div>
  
</body>

Babel + JSX

const StyleRoot = Radium.StyleRoot;

class Button extends React.Component {
	constructor(props) {
  	super(props);
    this.state = { disabled: false }
  }
  
  getStyles() {
    return {
    	backgroundColor: "red",
      border: 0,
      
      ":hover": {
      	backgroundColor: "blue",
      },
      
      ":disabled": {
      	backgroundColor: "green",
      }
    };
  }
  
  render() {
    return (
    	<div>
        <button key="button" style={this.getStyles()} disabled={this.state.disabled}>Test button</button>
        <input type="checkbox" onChange={(ev) => this.setState({ disabled: ev.target.checked })} />
        <div>
        	Button state: {Radium.getState(this.state, 'button', ':hover') ? "hovered" : "not hovered"}
        </div>
      </div>
    );
  }
};

const TestingButton = Radium(Button);

ReactDOM.render(
	<StyleRoot>
      <TestingButton />
  </StyleRoot>,
document.querySelector("#test"));