title: Changing style of a button on click
body: <p>Is it possible to change <code>background-color</code> of my button <code>onClick</code> function?</p>
  
  <p>ex. click <code>background-color: black</code>, another click <code>background-color: white</code> </p>
  
  <p>I've tried something like <code>this.style</code>, no result.</p>
  
  <p>I've managed to get overlay working and insert needed data inside of it.
  But didn't managed to find any post that could help me.
  I am using react-bootstrap.
  This is my code.</p>
  
  <pre><code>  const metaDataOverlay = (
    &lt;div&gt;
    &lt;style type="text/css"&gt;{`
    .btn-overlay {
      background-color: white;
      margin-right: -15px;
      margin-left: -15px;
      padding-bottom: -20px;
      padding: 0;
    }
    `}&lt;/style&gt;
  
        &lt;ButtonToolbar&gt;
          &lt;ButtonGroup&gt;
          &lt;OverlayTrigger trigger={['hover', 'focus']} placement="left" overlay={popoverHoverFocus}&gt;
            &lt;Button bsStyle="overlay" onClick={ clicked } onKeyPress={ keypress }&gt;
              &lt;div className={bemBlocks.item().mix(bemBlocks.container("item"))} data-qa="hit"&gt;
                &lt;a href={url} onClick={(e)=&gt;{e.preventDefault(); console.log("123")}}&gt;
                  &lt;div&gt;
                    &lt;img data-qa="poster" className={bemBlocks.item("poster")} src={result._source.poster} width="240" height="240"/&gt;
                  &lt;/div&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/Button&gt;
          &lt;/OverlayTrigger&gt;
          &lt;/ButtonGroup&gt;
        &lt;/ButtonToolbar&gt;
  
      &lt;/div&gt;
    )
  </code></pre>