Navigation Menu Mouse Hover Underline animation only CSS & HTML

Total
1
Shares

Today I share a simple but awesome mouse hover underline animation navigation menu. You can use this for all kinds of website projects. And this animation created with the only CSS no JS or jquery. Let’s began

HTML

First, we’ve to create the menu items int the HTML section. Here it is.

<ul>
  <li><a href="#">home</a></li>
  <li><a href="#">archives</a></li>
  <li><a href="#">tags</a></li>
  <li><a href="#">categories</a></li>
  <li><a href="#">about</a></li>
</ul>

CSS

After creating the menu items we’ll now do our design and mouse hover underline animation

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #222;
}

ul {
  display: flex;
  flex-direction: column;
  align-items: start;
  list-style-type: none;

  li {
    padding: 6px 0;

    a {
      position: relative;
      display: block;
      padding: 4px 0;
      font-family: Lato, sans-serif;
      color: #ecf0f1;
      text-decoration: none;
      text-transform: uppercase;
      transition: 0.5s;

      &::after {
        position: absolute;
        content: "";
        top: 100%;
        left: 0;
        width: 100%;
        height: 3px;
        background: #3498db;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s;
      }

      &:hover {
        color: #95a5a6;
      }

      &:hover::after {
        transform: scaleX(1);
        transform-origin: left;
      }
    }
  }
}

Check this full source code on Codepen

[codepen_embed height=”265″ theme_id=”default” slug_hash=”JjjxrWQ” default_tab=”result” user=”emuslearner”]See the Pen Menu Hover Underline by emuslearner (@emuslearner) on CodePen.[/codepen_embed]

Leave a Reply

Sign Up for Our Newsletters

Get notified of the best deals on our WordPress themes.

You May Also Like