transition effect,transition button color in 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 tran-
sition to smooth out that change—an effect previously only
possible using Flash or JavaScript, but now possible with a
few simple lines of CSS3.


The markup is a simple hyperlink, like so:

<a href="#" class="foo"> Transfer color here</a>

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;
  }
a.foo:hover {
  background: #690;
  }


Now let’s add a transition to that background color change.
This will smooth out and animate the difference over a speci-
fied period of time
For the time being, we’ll use only the vendor-prefixed proper-
ties which currently work in WebKit-based browsers (Safari
and Chrome) to keep things simple. Later, we’ll add vendor
prefixes for Mozilla and Opera.




a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  }
a.foo:hover {
  background: #690;
  }