How to Create an Hover Transition Link Effect With CSS3

Let’s start with a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change—an effect previously only possible using Flash or JavaScript,but now possible with a few simple lines of CSS.
 The markup is a simple hyperlink, like so:

// Comment
<pre class="prettyprint">// Comment
&lt;?php
$blue = 1;
$red = 2;
$green = 3;
</pre>

Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background .3s ease,     color 0.2s linear;
  -moz-transition: background .3s ease,     color 0.2s linear;
  -o-transition: background .3s ease, color 0.2s linear;  transition: background .3s ease, color 0.2s linear;  }
a.foo:hover,
a.foo:focus {
  color: #030;
  background: #690;
  }