CSS3 Fade Effect

CSS3 Fade Effect.html

<!-- [JSFiddle](http://jsfiddle.net/zachharkey/nyDR3/1/) -->

<style type="text/css" media="screen">
  
  a.box-link {
    text-decoration: none;
    padding: 5px 10px;
    
    -webkit-transition-property: background;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 50ms;
    
    -moz-transition-property: background;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 50ms;
    
    -o-transition-property: background;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 50ms;
    
    transition-property: background;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 50ms;

  }
  .red-box-link           { color: #c35546; background-color: rgba(195,85,70,0.26); }
  .red-box-link:hover     { background-color: #c35546; color: #fff; }
  
</style>


<div class="example">
  <a class="box-link red-box-link" href="#">
    Simple Example
  </a>
</div>

http://jsfiddle.net/zachharkey/nyDR3/1/