Nifty CSS Hover Animations

written by: Constantino
Last Updated: November 18, 2021

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.

Grows From Left

 
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

Grows From 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.

Grows From Middle

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

Leave a Reply

Your email address will not be published. Required fields are marked *

our blog.

Related Blogs You May Enjoy

Using CSS Grid In Bricks Builder (part 1)

In our multi-part part Bricks Builder Tutorial about CSS Grid, we will deep dive into all relevant aspects of CSS Grid in Bricks builder and by the…
Read More

How To Properly Create Image Cards in Bricks Builder

In this tutorial, we are going to show you how you properly create image cards in Bricks Builder. This concept applies far beyond the scope of just…
Read More

The Ultimate Guide to Understanding Google's New Algorithm

In June 2021, Google released a new update to their search engine algorithm that brings in new ranking factors to determine how websites are "graded & scored"…
Read More