Elementor Underline on Hover For Nav Menu, Buttons & Links

Elementor Underline on Hover For Nav Menu, Buttons & Links

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

Today, we are going to learn how we can creatively create a beautiful menu, button and link hover effect in Elementor. Although this requires some custom CSS, I want you to know that you have nothing to worry about as the code you need for every part of it is available in this post.

Have a look at the live demo here:

Check out this premium tutorial to have an Elementor underline animation on scroll instead of hover.

Keep reading for the underline on hover tutorial.

Elementor underline on hover for nav menu element

Left to right, left to right underline hover effect

Underline on Hover for Nav Menu element, Left to Right, then Left to Right
The underline grows horizontally from left to right when a mouse hovers on a menu item and disappears from left to right when a mouse leaves the menu item.

The way this underline hover effect happens goes like this; the line grows horizontally from left to right when the mouse cursor hovers on the menu item. And then disappears from left to right when the cursor leaves the menu item.

These are the steps to create this type of effect

  1. Add your nav menu to your Elementor template.
  2. Going to the style tab of Elementor, style your menu to how you want it to be. These can be font type, color, font size, etc.
  3. You should change the value for horizontal padding. Enter "0" to have the the exact effect as seen above.
  4. Adjust the distance between the menu items with the 'Space Between' setting instead.Elementor Underline on Hover For Nav Menu, Buttons & Links 1
  5. Then go to the advanced tab > custom CSS of Elementor and add the code below.

    Elementor Underline on Hover For Nav Menu, Buttons & Links 2
    This is in the Advanced tab
selector nav > ul {
    justify-content: space-between;
}
selector nav > ul.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu > li {
    position: relative;
    z-index: 1;
    flex-grow:0;
}
selector nav > ul > li::before {
    content:'';
    position:absolute;
    width: 100%;
    height:2px; /* How thick the line is */
    background-color: #000000!important; /* Color of the line */
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1); /* Adjust the transition duration and timing function here , use website cubic-bezier.com for a fancy timing function */
    bottom:4px; /* Vertical positioning of the line*/
    opacity: 1 !important; /* !important is only needed for nav menu element , you can delete it for the others */
    left:0;
    z-index: -3;
    transform: scaleX(0);
    transform-origin:right;
}
selector nav > ul > li:hover::before {
    transform:scaleX(1);
    transform-origin:left;
}
selector nav > ul.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu > li > a {
margin-inline-end:0px;
margin-inline-start:0px;
}
selector .elementor-nav-menu:after {
    content: none;
}

If you are using a vertical menu layout, you will also need to add this CSS:

selector nav > ul {
display: flex;
flex-direction: column;
align-items: center;
}

What the code in the 'li::before' does:

  • The background-color property is used to set the color of the underline. You need to change this to the color of your choice.
  • The height property is used to set the thickness of the line. As you can see from the code above, the thickness was set to 2px. Adjust as you wish.
  • The transition property sets the animation of the line. All you have to do here is to adjust the transition's duration and timing. The website "https://cubic-bezier.com" will help you create fancy timing functions.
  • And the bottom property is used to set the vertical positioning of the line. Adjust as required.

Note: you don't need to do anything in the code inside the 'li::hover::before'.

What the code for the vertical menu layout does:

  • display:flex & flex-direction:column are needed to center the nav items and adjust their width, so that the line is just under them (don't change this)
  • align-items: center; is required to center align the nav items. You could change this to align-items:flex-start; or align-items:flex-end; if you would prefer.

Right to left, left to right underline hover effect

Underline on Hover for Nav Menu item
The underline grows horizontally from right to left when a mouse hovers on a menu item and disappears from left to right when a mouse leaves the menu item.

This underline hover effect does the opposite to the effect we saw in the previous section when a mouse's cursor hovers on menu items.  But the effect when the cursor leaves the menu item remains the same.

The code for this underline hover effect is:

selector nav > ul {
    justify-content: space-between;
}
selector nav > ul.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu > li {
    position: relative;
    z-index: 1;
    flex-grow:0;
}
selector nav > ul > li::before {
    content:'';
    position:absolute;
    width: 100%;
    height:2px; /* How thick the line is */
    background-color: #000000!important; /* Color of the line */
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1); /* Adjust the transition duration and timing function here , use website cubic-bezier.com for a fancy timing function */
    bottom:4px; /* Vertical positioning of the line*/
    opacity: 1 !important; /* !important is only needed for nav menu element , you can delete it for the others */
    left:0;
    z-index: -3;
    transform: scaleX(0);
    transform-origin:right;
}
selector nav > ul > li:hover::before {
    transform:scaleX(1);
    transform-origin:right; 
}
selector nav > ul.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu > li > a {
margin-inline-end:0px;
margin-inline-start:0px;
}
selector .elementor-nav-menu:after {
    content: none;
}

If you are using a vertical menu layout, you will also need to add this CSS:

selector nav > ul {
display: flex;
flex-direction: column;
align-items: center;
}

Note: the same explanation from the previous section applies to this section. The only changes made here were done on the transform-origin property for both "a::before" and "a:hover::before".

Right to left, right to left underline hover effect

Underline on Hover for Nav Menu element, Right to Left, then Right to Left
The underline grows horizontally from right to left when a mouse hovers on a menu item and disappears from right to left when a mouse leaves the menu item.The underline hover effect goes from right to left when the cursor of a mouse hovers on a menu item. And when the cursor leaves the menu item, the effort of goes from right to left.

The code for this underline hover effect is:

selector nav > ul {
    justify-content: space-between;
}
selector nav > ul.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu > li {
    position: relative;
    z-index: 1;
    flex-grow:0;
}
selector nav > ul > li::before {
    content:'';
    position:absolute;
    width: 100%;
    height:2px; /* How thick the line is */
    background-color: #000000!important; /* Color of the line */
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1); /* Adjust the transition duration and timing function here , use website cubic-bezier.com for a fancy timing function */
    bottom:4px; /* Vertical positioning of the line*/
    opacity: 1 !important; /* !important is only needed for nav menu element , you can delete it for the others */
    left:0;
    z-index: -3;
    transform: scaleX(0);
    transform-origin:left;
}
selector nav > ul > li:hover::before {
    transform:scaleX(1);
    transform-origin:right; 
}
selector nav > ul.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu > li > a {
margin-inline-end:0px;
margin-inline-start:0px;
}
selector .elementor-nav-menu:after {
    content: none;
}

If you are using a vertical menu layout, you will also need to add this CSS:

selector nav > ul {
display: flex;
flex-direction: column;
align-items: center;
}

Note: the same explanation from the first section applies to this section. The only changes made here were done on the transform-origin property for both "a::before" and "a:hover::before".

Left to right, right to left underline hover effect

How to create beautiful menu effect in Elementor
The underline grows horizontally from left to right when a mouse hovers on a menu item and disappears from right to left when a mouse leaves the menu item.

This is the code for this menu effect:

selector nav > ul {
    justify-content: space-between;
}
selector nav > ul.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu > li {
    position: relative;
    z-index: 1;
    flex-grow:0;
}
selector nav > ul > li::before {
    content:'';
    position:absolute;
    width: 100%;
    height:2px; /* How thick the line is */
    background-color: #000000!important; /* Color of the line */
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1); /* Adjust the transition duration and timing function here , use website cubic-bezier.com for a fancy timing function */
    bottom:4px; /* Vertical positioning of the line*/
    opacity: 1 !important; /* !important is only needed for nav menu element , you can delete it for the others */
    left:0;
    z-index: -3;
    transform: scaleX(0);
    transform-origin:left;
}
selector nav > ul > li:hover::before {
    transform:scaleX(1);
    transform-origin:left; 
}
selector nav > ul.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu > li > a {
margin-inline-end:0px;
margin-inline-start:0px;
}
selector .elementor-nav-menu:after {
    content: none;
}

If you are using a vertical menu layout, you will also need to add this CSS:

selector nav > ul {
display: flex;
flex-direction: column;
align-items: center;
}

Note: the same explanation from the first section applies to this section. The only changes made here were done on the transform-origin property for both "a::before" and "a:hover::before".

Elementor underline hover effect for links and buttons

Underline hover effect on links, buttons and bottomless buttons
Underline hover effect on links, buttons and bottomless buttons

You can apply this hover effect on any link or button element(s) on your Elementor WordPress websites. Based on the demo you see on the gif above, we will keep it simple by giving the code for the left to right | left to right hover effect. You can achieve whatever effect you want by changing the values on the transform-origin property in the code. Change the 'right' value to 'left', and 'left' value to 'right', until you get the animation you want.

If you want this underline hover effect on just one link, use this code:

selector a {
    display: inline-block;
    position: relative;
    z-index: 1;
}

selector a::before {
    content:'';
    position:absolute;
    width: 100%;
    height:2px; /* How thick the line is */
    background-color: #000000!important; /* Color of the line */
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1); /* Adjust the transition duration and timing function here , use website cubic-bezier.com for a fancy timing function */
    bottom:14px; /* Vertical positioning of the line*/
    opacity: 1 !important; /* !important is only needed for nav menu element , you can delete it for the others */
    left:0;
    z-index: -3;
    transform: scaleX(0);
    transform-origin:right;
}

selector a:hover::before {
  transform:scaleX(1);
  transform-origin:left;
}

You can add this code to the individual widgets that hold your links if you have the pro version of Elementor. Just go to the "Advanced" tab, scroll down to Custom CSS and add this code inside the text area.

And if you want all the links on your website to have the underline hover effect, use this code:

.elementor .elementor-heading-title a {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.elementor .elementor-heading-title a::before {
    content:'';
    position:absolute;
    width: 100%;
    height:2px; /* How thick the line is */
    background-color: #000000!important; /* Color of the line */
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1); /* Adjust the transition duration and timing function here , use website cubic-bezier.com for a fancy timing function */
    bottom:14px; /* Vertical positioning of the line*/
    opacity: 1 !important; /* !important is only needed for nav menu element , you can delete it for the others */
    left:0;
    z-index: -3;
    transform: scaleX(0);
    transform-origin:right;
}

.elementor .elementor-heading-title a:hover::before {
  transform:scaleX(1);
  transform-origin:left;
}

While this code will give all buttons on your website the underline hover effect

.elementor a.elementor-button {
display: inline-block; 
position: relative;
z-index: 1;
}

.elementor a.elementor-button::before {
    width: 60%;
    height:2px; /* How thick the line is */
    background-color: #000000!important; /* Color of the line */
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1); /* Adjust the transition duration and timing function here , use website cubic-bezier.com for a fancy timing function */
    bottom:14px; /* Vertical positioning of the line*/
    opacity: 1 !important; /* !important is only needed for nav menu element , you can delete it for the others */
    left:20%;
    z-index: -3;
    transform: scaleX(0);
    transform-origin:right;
}

.elementor a.elementor-button:hover::before {
transform:scaleX(1);
transform-origin:left;
}

If you have Elementor Pro,  you can easily add these codes to your website using this method:

  • Click on the Hamburger menu on your Eelementor panel
  • Click on site settings
  • Scroll down to Custom CSS and click on it
  • Copy the above code and paste it in the text area in Custom CSS
  • Save and exit the site settings page.

The images below will show you how to add custom CSS to your site.

Elementor Underline on Hover For Nav Menu, Buttons & Links 3

Elementor Underline on Hover For Nav Menu, Buttons & Links 4

Elementor Underline on Hover For Nav Menu, Buttons & Links 5

Elementor Underline on Hover For Nav Menu, Buttons & Links 6

Now, if you do not have the Pro version of Elementor, you can still achieve this by adding the code to your theme's customizer.

  • Go to your WP dashboard, hover on "Appearance" and click on "Customizer"
  • Your theme's customizer allows you to do some changes on the front-end. Here, you have to scroll down to "Additional CSS"
  • Open it and paste the code you copy above

Elementor Underline on Hover For Nav Menu, Buttons & Links 7

Elementor Underline on Hover For Nav Menu, Buttons & Links 8

 

Trendy thick underline hover effect for Elementor

Elementor Underline on Hover For Nav Menu, Buttons & Links 9

With a little tweak to the original code, you can have a beautiful underline effect behind your texts that appears and disappear when you hover on a link or button.

How to create this effect:

  • Copy any of the codes above that you wish to use
  • Then change the height property (make it bigger by increasing the value)
  • Finally change the color so that it's different than your text's color

I hope you found this tutorial helpful in your web design project. Follow us on Youtube and turn on the notification to get new design tutorials about Elementor!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

22 Responses

  1. This is awesome!!
    One question, when I paste the code into a "align to center" menu, the code cancels it and forces "align to left", and I can't get it back to center align. How can I fix it?

    And again, thanks a lot for sharing this 🙂

    1. Thanks for asking! I should have added this information in the tutorial indeed.

      Here, just add this CSS and it will center the menu items!

      selector li {
      text-align: center;
      }

      Cheers!

  2. Hi! I've a problem using the code for a button. The underline doesn't match the text but it starts at the left limit of the button (where there is no text).. How can I "move" the starting point of the underline?

    Sorry for my bad english and thank you 🙂

    1. Hey Davide!

      In the CSS, you will want to change the 'left' and 'width' property. Here is the optimal way to get what you are after:

      Completely delete the 'width:xx%;' line.
      Edit 'left:xx' to 'left:20px' where 20px is the value of the left padding in your buttons.
      Add 'right:20px' where 20px is the value of the right padding in your buttons.

      Cheers!

  3. Is it possible to change the thickness of the lines throughout the breakpoints. Especially when using a thicker line on the desktop - this doesn't translate down.

    1. Hey Heather!

      Indeed it didn't work for these scenarios. I updated the code now, and it's working fine even when there are sub menu items!

  4. Hi,
    I want to have align-items: left, but the hover underline will not correspond with the lenth of word, all of underline will be 100% length. How to adjust it? By the way, I use vertical nav.

  5. Hello, I tried using the "Left to right, left to right underline hover effect" and followed all your steps but the space-between isn't working. The horizontal and vertical padding work...

  6. Your website never cease to impress me. It's really a great resource for anyone who want to push elementor past its limitations. This effect is working really well, thanks!

Leave a Reply

Just launched

CSS Course For Elementor Users

Offer incredible value to your clients by becoming a CSS ninja!