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

Free Adobe Lightroom Filter

When working on any type of project for both yourself and your clients, getting good images is always a difficult task. Sometimes they provide you with a…
Read More

Adding Elements Inside Oxygen Repeater or Easy Posts

We are working on a new website for a client (will release URL soon) where they wanted a page for customer testimonials. One of the requirements of…
Read More

UI/UX Tips To Improve Your Website Conversions

It is now almost 2022 and you've probably realized that the quality of your website has a significant impact on your business. Most businesses realize they need…
Read More