Navigation hover effects

      No Comments on Navigation hover effects

Navigation hover effects using CSS animations.

See the Pen Links with hover effects by scanfcode (@scanfcode) on CodePen.

Navigation hover effects

Amazing links with hover effects can be created using CSS. Let us understand the code.

HTML markup:

<div class="container">
  <nav class="navigation">
    <ul>
      <li>Home</li>
      <li>About us</li>
      <li>read more</li>
      <li>contact us</li>
    </ul>
  </nav>
</div>

This HTML markup create a simple navigation using the nav tag.

CSS-Creating the hover effect

.navigation li::after
{
  background:#ffcc00;
  z-index:-1;
  width:20px;
  height:20px;
  position:absolute;
  bottom:0;
  right:0;
  content:"";
  transition:.3s linear;
}

The code above is used to create a small square like content in the link. This is the same square that will work on hover.

.navigation li:hover::after
{
  width:100%;
  height:100%;
  border-radius:2px 14px;
}

The CSS that works on hover changes the width and height of the after content to 100%. This gives the animation to link.

.navigation li
{
  list-style-type:none;
  padding:10px 35px;
  font-size:20px;
  margin:20px;
  text-transform:uppercase;
  font-family: 'Fjalla One';
  color:#fff;
  border:solid 2px #fff;
  width:100px;
  display:inline-block;
  border-radius:2px 18px;
  position:relative;
}
.navigation li::after
{
  background:#ffcc00;
  z-index:-1;
  width:20px;
  height:20px;
  position:absolute;
  bottom:0;
  right:0;
  content:"";
  transition:.3s linear;
}
.navigation li:hover::after
{
  width:100%;
  height:100%;
  border-radius:2px 14px;
}

Navigation hover effects

Leave a Reply

Your email address will not be published. Required fields are marked *