Navigation Menu Mouse Hover Underline animation only CSS & HTML

by emuslearner
0 comment

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;

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

      &amp;:hover {
        color: #95a5a6;
      }

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

Check this full source code on Codepen

See the Pen Menu Hover Underline by emuslearner (@emuslearner) on CodePen.default

0 comment

More Posts in this topic

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: