CSS Transitions

HTML

<a href="#">I'm a styled link.</a>
<a id="ref" href="http://www.w3.org/TR/css3-transitions/#properties-from-css-" target="_blank">
    Want to know all the CSS properties that can be transitioned? &gt;&gt;
</a>

CSS

body { padding:20px; font-family:arial, helvetica, sans-serif; font-size:10pt; font-weight:bold; }
a#ref { position:fixed; bottom:10px; left:10px; background-color:#a00; border-left:12px solid #700;  }

/* DO NOT MODIFY ABOVE THIS LINE */

a { 
    text-decoration:none; 
    padding:5px 10px;
    color:#fcfcfc;
    background-color:#9c3;
    -moz-transtion:
        background 0.3s linear;
        color 1.0s linear
        ;
    -webkit-transtion:
        background 0.3s linear;
        color 1.0s linear
        ;
    transtion:background 0.3s linear;
}

a:hover{/* this will change the color to green when you hover*/
  background-color:#690  
}

a:active {
    /* this will change the color to red when you click*/
 background-color:#a00   
}

JavaScript

jQuery(function ($) {
    $('a:not(#ref)').on('click', function (e) { e.preventDefault(); });
    });