Some Nifty Animated Hover Efx

index.html

<div class="wrapper">
  <h1>Some Nifty Hover Efx</h1>


  <a class="btn-drib">
    <i class="icon-drib fa fa-dribbble"></i> dribbble
  </a>
  
  <a class="btn-flickr">
    <i class="icon-flickr fa fa-flickr"></i> flickr
  </a>
  
  <a class="btn-cloud">
    <i class="icon-cloud fa fa-cloud-download"></i> download
  </a>

</div>

some-nifty-animated-hover-efx.markdown

Some Nifty Animated Hover Efx

Animated buttons.

A Pen by akb20 on CodePen.

License.

style.scss

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


body {
  font-family: 'Lato', sans-serif;
  background: #333;
  color: white;
  text-align: center;
}

h1 {
  font-size: 4em;
  margin-bottom: 60px;
}

.wrapper {
  width: 800px;
  margin: 0 auto;
}


.btn-drib:hover .icon-drib {
    animation: bounce 1s infinite;
}

.btn-flickr:hover .icon-flickr {
    animation: flash 400ms infinite;
}

.btn-cloud:hover .icon-cloud {
    animation: fadeOutDown 800ms infinite;
}


.btn-drib {
  padding: 20px 27px;
  display: inline-block;
  margin-right: 30px;
  border: 4px solid #F8C471;
  width: 150px;
  color: #F8C471;
  text-align: center;
  font-size: 1.5em;
  border-radius: 5px;
  cursor: pointer;
}

.icon-drib {
  margin-right: 5px;
}

.btn-flickr {
  @extend .btn-drib;
  border: 4px solid #3498DB;
  color: #3498DB;
}

.icon-flickr {
  margin-right: 5px;
}

.btn-cloud {
  @extend .btn-drib;
  border: 4px solid #17A589;
  color: #17A589;
}

.icon-cloud {
  margin-right: 5px;
}



// Keyframes

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -12px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -8px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}


@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  15%, 85% {
    opacity: .7;
    color: #3c9cdc;
  }
}


@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />