cool hover

In this example below you will see how to do a cool hover with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©
  • HTML
  • CSS
  • JavaScript
    <div class="wrapper">
  <br>
  <a href="stuff">this is stuff</a>
  <br>
  <br>

  <div class="spacey">
    <a href="stuff">this is stuff</a>
  </div>
  <br>

  <div class="lefty">
    <a href="">left to right</a>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/mush_el/cool-hover-zvwgbr */
    html {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  background: #111;
}
.wrapper {
  margin: 20px auto;
  text-align: center;
}
a {
  border-bottom: 1px solid #f0c;
  box-shadow: inset 0 -5px 0 #f0c;
  text-decoration: none;
  padding: 0px 3px 0px 1px;
  color: #555;
  -webkit-transition: all .3s ease-in;
}
a:hover {
  box-shadow: inset 0 -28px 0 #f0c;
  color: #fff;
}

div.spacey a:hover {
  letter-spacing: 2px;
}

.spacey a {
  border-bottom: 1px solid #f0c;
  box-shadow: inset 0 -5px 0 #f0c;
  text-decoration: none;
  padding: 0px 3px 0px 1px;
  color: #555;
  -webkit-transition: all .3s ease-in;
}
.spacey a:hover {
  box-shadow: inset 0 28px 0 #f0c;
  color: #fff;
}
.lefty a {
  border-bottom: 1px solid #f0c;
  box-shadow: inset 0 -5px 0 #f0c;
  text-decoration: none;
  padding: 0px 15px 0px 14px;
  color: #555;
  -webkit-transition: all .3s ease-in;
}
.lefty a:hover {
  box-shadow: inset 132px 0px 0 #f0c;
  color: #fff;
}



/*Downloaded from https://www.codeseek.co/mush_el/cool-hover-zvwgbr */
    

Comments