Fading an HTML <a> anchor tag with CSS

Question

Link 1

<a class="LinkN1" id="HomeLink" href="./" >Home</a>

Link 1 CSS

.LinkN1{
text-decoration:none;
color:silver;
transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
-webkit-transition: color .25s ease-in-out;
width:70px;
text-align:center;
padding:5px;
height:20px;
background-color:#06C;
margin-left:103px;
margin-top:-30px;
float:left;
border-left:solid 3px silver;
}

.LinkN1:hover{
color:orange;
background-color:#333;

}

What i would like to do is fade the background color of the link LinkN1 from #06C to #333 in only CSS , but if this can be done is Javascript then i will use that.

NOTE SOLVED.

It was a transition mistake i did intend to animate both font and background colors hence color: and background-color: in the CSS .

Shaun. Edit- Only noticed comments now, thank you for the corrections, they are welcomed;

Answer 1

You animated the font colors, not the background:

transition:             color .25s ease-in-out;
-moz-transition:        color .25s ease-in-out;
-webkit-transition:     color .25s ease-in-out;

By Animating all css values, you're sure to get the background animated aswell:

transition:             all .25s ease-in-out;
-moz-transition:        all .25s ease-in-out;
-webkit-transition:     all .25s ease-in-out;}

Solution html:

 .LinkN1 { text-decoration: none; color: silver; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; width: 70px; text-align: center; padding: 5px; height: 20px; background-color: #06C; margin-left: 103px; margin-top: -30px; float: left; border-left: solid 3px silver; } .LinkN1:hover { color: orange; background-color: #333; } 

 <a class="LinkN1" id="HomeLink" href="./" >Home</a> 

Answer 2

To animate the color and background-color change transition to:

transition: background-color .25s ease-in-out, color .25s ease-in-out;

You can use transition: all; but that will also animate any other property change.

Answer 3

You need to define transition for background-color not the font color. So just change your CSS to

.LinkN1{
  text-decoration:none;
  color:silver;
  transition: background-color .25s ease-in-out;
  -moz-transition: background-color .25s ease-in-out;
  -webkit-transition: background-color .25s ease-in-out;
  width:70px;
  text-align:center;
  padding:5px;
  height:20px;
  background-color:#06C;
  margin-left:103px;
  margin-top:-30px;
  float:left;
  border-left:solid 3px silver;
}