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

Expired Domain Scam

Today we received a contact form fill out with the following message: Notice#: 491343 Date: 2021-01-21 YOUR IMMEDIATE ATTENTION TO THIS MESSAGE IS ABSOLUTELY NECESSARY! YOUR DOMAIN…
Read More

4 Custom Code Snippets For WordPress

When building a website and the customer needs a bit of custom functionality added to it, most designers look for a plugin to assist in this process.…
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