title: CSS Transition White Flash
body: <p>All I am trying to accomplish is a transition to a brighter hue (using opacity) using CSS and I have already attempted the -webkit-backface-visibility:hidden trick and it didn't work. Flashes white over hover and it's driving me nuts!!</p>
  
  <p><a href="http://jsfiddle.net/eb3Lp0s0/" rel="nofollow">http://jsfiddle.net/eb3Lp0s0/</a></p>
  
  <p>CSS</p>
  
  <pre><code>.button {
      margin-left:auto;
      margin-right:auto;
      margin-top:25px;
      display:block;
     border-top: 1px solid #96d1f8;
     background: #0083d4;
     background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#0083d4));
     background: -webkit-linear-gradient(top, #0099ff, #0083d4);
     background: -moz-linear-gradient(top, #0099ff, #0083d4);
     background: -ms-linear-gradient(top, #0099ff, #0083d4);
     background: -o-linear-gradient(top, #0099ff, #0083d4);
     padding: 5px 10px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
     -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
     -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
     box-shadow: rgba(0,0,0,1) 0 1px 0;
     text-shadow: rgba(0,0,0,.4) 0 1px 0;
     color:#272727;
     font-size: 18px;
     font-family: 'Century Gothic', Helvetica, Arial, Sans-Serif;
     text-decoration: none;
     vertical-align: middle;
     text-transform:uppercase;
    opacity: 1;
      transition: all 0.3s ease 0s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  
    }
  .button:hover {
     border-top-color: #28597a;
     background: #28597a;
     color: #ccc;
       opacity: 0.75;
       -webkit-backface-visibility: hidden;
  
     }
  .button:active {
     border-top-color: #1b435e;
     background: #1b435e;
     -webkit-backface-visibility: hidden;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;button type="button"  onclick="location.href='http://webwavebuilding.com/whatwedo.html'" class="button"&gt;Learn more&lt;/button&gt;
  </code></pre>