<h3 dir="auto">Problem description</h3>
<p dir="auto">Any material-ui button stays in a focused state even after click or tap event has ended. It displays a white translucent overlay. It looks really bad! How can I hide it? Is there a standard way to do that? Here's a little hack on how to accomplish it.<br>
<code class="notranslate">this.refs.searchBtn.refs.overlay.style.background = 'none';</code></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/19772006/16523721/77178534-3fc2-11e6-90c2-9ca8263553ea.png"><img width="305" alt="screen shot 2016-07-01 at 7 22 05 pm" src="https://cloud.githubusercontent.com/assets/19772006/16523721/77178534-3fc2-11e6-90c2-9ca8263553ea.png" style="max-width: 100%;"></a></p>
### Steps to reproduce
### Versions
- Material-UI: ^0.15.1
- React: ^15.1.0
- Browser: Chrome
<p dir="auto">This issue has been around for quite a while, and I just reproduced it in 0.14.4 and 0.15.1-alpha.1. I looked through all "button" and "ripple" related issues and found no mention of this, so apologies if this is a duplicate.</p>
<p dir="auto"><a href="https://dl.dropboxusercontent.com/u/19969663/ripple_issue.mov" rel="nofollow">https://dl.dropboxusercontent.com/u/19969663/ripple_issue.mov</a><br>
As you can see, this is the latest version of the demos on material-ui.com. Video was taken in chrome on a mac.</p>
<p dir="auto">Basically, through some sequence of clicks the ripple effect doesn't go away. I've been playing around with it for quite a while and couldn't find consistent repro steps. It also seems to happen much more often on chrome in android as well as safari in iOS. I've noticed this issue in all browsers.</p>