We’d like to explore a very subtle When you hover over on buttons, you will see an animation happening it’s by adding hover effect for navigation button: the grid item becomes transparent and the border lines of each side animate, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans without any JS. As when you go to https://wbcomdesigns.com/contact/ you will hover the cursor over subscriber button.

 

HTML strucutre

 <nav>

  <ul class="nav-ul">

    <li class="nav-li">

      <a href="#">Main</a>

    </li>

    <li class="nav-li">

      <a href="#">About</a>

    </li>

    <li class="nav-li">

      <a href="#">Projects</a>

    </li>

    <li class="nav-li">

      <a href="#">Contacts</a>

    </li>

  </ul>

</nav>

 

CSS Codes to add dedicated style

a {

  color: inherit;

  text-decoration: none;

  outline: none;

}

.list-unstyled {

  padding: 0;

  margin: 0;

  list-style: none;

}

* {

  box-sizing: border-box;

}

html {

  background: #defbfd;

}

nav {

  height: 100%;

  font-family: 'MuseoSansCyrl', sans-serif;

  color: #3a3a3a;

}

nav .nav-ul {

  padding: 0;

  margin: 0;

  list-style: none;

  margin: 2.9375rem 2.3125rem 0;

  text-align: center;

}

nav .nav-li {

  display: inline-block;

  font-size: 1em;

}

nav .nav-li a {

  position: relative;

  display: block;

  margin: 0 2px;

  padding: 0.625rem 1.25rem;

  text-transform: uppercase;

  overflow: hidden;

}

nav .nav-li a:before {

  box-sizing: border-box;

  transform: translateX(100%);

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 99.5%;

  height: 2px;

  border-bottom: 2px solid transparent;

  border-left: 2px solid transparent;

}

nav .nav-li a:after {

  box-sizing: border-box;

  transform: translateX(-100%);

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 99.5%;

  height: 2px;

  border-top: 2px solid transparent;

  border-right: 2px solid transparent;

}

nav .nav-li a:hover {

  color: inherit;

  text-decoration: none;

}

nav .nav-li a:hover:before {

  transition: .1s transform linear, .1s height linear .1s;

  transform: translateX(0);

  height: 100%;

  border-color: #1fbfac;

}

nav .nav-li a:hover:after {

  transition: .1s transform linear .2s, .1s height linear .3s;

  transform: translateX(0);

  height: 100%;

  border-color: #1fbfac;

}

 

 

Leave a Reply

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

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

logo