I am currently working on designing navigation buttons for my portfolio website. The hovering effect is functioning perfectly, but I have encountered an issue where once the mouse moves away from the button, it quickly pops back to its original position instead of smoothly transitioning back.
Below is the code snippet that I am using:
li {
list-style-type: none;
margin: 20px 5px 0px 5px;
}
nav ul li a {
display: block;
margin: 30px 10px;
text-decoration: none !important;
text-align: center;
width: 90px;
padding: 6px 0;
border-radius: 4px;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
background: #E6E5CC;
float: right;
top: 0px;
left: 0px;
}
nav ul li a:hover {
color: inherit;
position: relative;
top: 0px;
right: 0;
bottom: 0;
left: 0px;
top: -5px;
left: -5px;
box-shadow: 1px 1px 0px #e3e2c5, 2px 2px 0px #dfdebe, 3px 3px 0px #cbc995, 4px 4px 0px #b4b165, 5px 5px 0px #56542a;
background: #f7f6ee;
}
nav ul li a:active {
color: inherit;
top: 5px;
left: 5px;
box-shadow: 0px 0px 5px white;
}<nav>
<ul>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>