Materialize, hover effect, active & visited on button tag html5

I'm doing button styles within gulp-sass by applying effects such as hover , active and visited with Materialize , but at the time of clicking to the button and release it puts a default color of the aforementioned framework ( waves-light ).
When I'm defining the colors, I activate the parameters background-color start with hover, active y visited , but do not take it into account, and try to do it directly in the CSS , but it does not work. I leave you a fragment of the code in CSS:

.bton-fb {
width: 200px;
height: 50px;
border-radius: 5px;
background-color: #3b5998;
}

button.bton-fb:hover {
background-color: #5772ac; 
}

button.bton-fb:active {
background-color: #14306b; 
}

button.bton-fb:visited {
background-color: #14306b; 
}

<div>
<h1 class="">Ejemplo de Botónes</h1>
<button class="waves-effect bton-fb">Hover me! ;)</button>
</div>