For this blog post, we will show you how to add even more CSS hover animations for links and/or menu items. If you want to see the first post check out here
We have provided a few more CSS hover animations that have a similar look and feel that will help enhance the style of your website.
The first style is the initial one we wrote about on our previous blog. This underline grows from the right.
a.left-hover
{
position: relative;
}
a.left-hover:before {
content: "";
position: absolute;
width: 0;
height: 5px;
bottom: 0;
left: 0;
background-color: #8c61ff;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
a.left-hover:hover:before {
visibility: visible;
width: 100%;
}CSS
The next animation is very similar, but this one grows from the right
a.right-hover
{
position: relative;
}
a.right-hover:before {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: 0;
right: 0;
background-color: #8c61ff;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
a.right-hover:hover:before {
visibility: visible;
width: 100%;
}CSS
For our last animation, we will animate the bottom border to come from the middle outward.
a.middle-hover
{
position: relative;
}
a.middle-hover:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #8c61ff;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out;
}CSS
