Simple CSS3 Hover Transition Menu Effect

Simple CSS3 Hover Transition Menu Effect - Best simple Navigation for your web site

you can just copy and paste the HTML code inside the div without any images it will work for you where ever you want. Easy to edit and simple shot code with hovering and hover transition effect on timing with four colors.

Demo and Code to Install

<style>
#div
{
width:88px;
height:40px;
background:purple;
float:left;
border-left:1px solid white;
text-align:center;
padding-top:10px;
color:white;
font-family:verdana,arial;
font-size:12px;
}

a{text-decoration:none;}
#div:hover
{
width:88px;
animation:myfirst 2s;
-moz-animation:myfirst 2s; /* Firefox */
-webkit-animation:myfirst 2s; /* Safari and Chrome */
-o-animation:myfirst 2s; /* Opera */
}

@keyframes myfirst
{
0%   {background:purple;}
25%  {background:#1B70E0;}
50%  {background:#0959ED;}
75%  {background:#578DF2;}
0%   {background:purple;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:purple;}
25%  {background:#1B70E0;}
50%  {background:#0959ED;}
75%  {background:#578DF2;}
0%   {background:purple;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:purple;}
25%  {background:#1B70E0;}
50%  {background:#0959ED;}
75%  {background:#578DF2;}
0%   {background:purple;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:purple;}
25%  {background:#1B70E0;}
50%  {background:#0959ED;}
75%  {background:#578DF2;}
0%   {background:purple;}
}
</style>


<a href="#"><div id="div">HOME</div></a>
<a href="#"><div id="div">ABOUT</div></a>
<a href="#"><div id="div">BUY</div></a>
<a href="#"><div id="div">RENT</div></a>
<a href="#"><div id="div">SUBMIT</div></a>
<a href="#"><div id="div">TESTOMINAL</div></a>
<a href="#"><div id="div">CONTACT</div></a>

HOME

ABOUT

BUY

RENT