Cara Menciptakan Tombol Download Animasi Border

Animated Border Buttons - Memadukan CSS sanggup membuat suatu hasil yang sangat menarik , ibarat pada tombol download berikut ini perpaduan antara Coloured Buttons dan Social Buttons Hover dapat mengasilkan tombol animasi yang menarik .

Demo

Bagaimana Anda tertarik , berikut ini langkah-langkahnya :

Silahkan Anda buka Editor Template , kemudian Anda cari kode ]]></b:skin> dan salin instruksi dibawah ini kemudian terapkan sebelum atau diatasnya .

/*Animated Border Buttons*/
.col {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
}

.col-1,
.col-1-1,
.col-1-2,
.col-1-3,
.col-2-3,
.col-1-4,
.col-3-4,
.col-1-6,
.col-5-6,
.col-1-12,
.col-2-12,
.col-3-12,
.col-4-12,
.col-5-12,
.col-6-12,
.col-7-12,
.col-8-12,
.col-9-12,
.col-10-12,
.col-11-12,
.col-12-12 {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.col-1-12 {
    width: 8.3333%;
    *width: 8.3023%;
}

.col-1-6,
.col-2-12 {
    width: 16.6667%;
    *width: 16.6357%;
}

.col-1-4,
.col-3-12 {
    width: 25%;
    *width: 24.9690%;
}

.col-1-3,
.col-4-12 {
    width: 33.3333%;
    *width: 33.3023%;
}

.col-5-12 {
    width: 41.6667%;
    *width: 41.6357%;
}

.col-1-2,
.col-6-12 {
    width: 50%;
    *width: 49.9690%;
}

.col-7-12 {
    width: 58.3333%;
    *width: 58.3023%;
}

.col-2-3,
.col-8-12 {
    width: 66.6667%;
    *width: 66.6357%;
}

.col-3-4,
.col-9-12 {
    width: 75%;
    *width: 74.9690%;
}

.col-5-6,
.col-10-12 {
    width: 83.3333%;
    *width: 83.3023%;
}

.col-11-12 {
    width: 91.6667%;
    *width: 91.6357%;
}

.col-1,
.col-1-1,
.col-12-12 {
    width: 100%;
}

@media screen and (min-width: 35.5em) {
    .col-sm-1,
    .col-sm-1-1,
    .col-sm-1-2,
    .col-sm-1-3,
    .col-sm-2-3,
    .col-sm-1-4,
    .col-sm-3-4,
    .col-sm-1-6,
    .col-sm-5-6,
    .col-sm-1-12,
    .col-sm-2-12,
    .col-sm-3-12,
    .col-sm-4-12,
    .col-sm-5-12,
    .col-sm-6-12,
    .col-sm-7-12,
    .col-sm-8-12,
    .col-sm-9-12,
    .col-sm-10-12,
    .col-sm-11-12,
    .col-sm-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-sm-1-12 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .col-sm-1-6,
    .col-sm-2-12 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .col-sm-1-4,
    .col-sm-3-12 {
        width: 25%;
        *width: 24.9690%;
    }

    .col-sm-1-3,
    .col-sm-4-12 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .col-sm-5-12 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .col-sm-1-2,
    .col-sm-6-12 {
        width: 50%;
        *width: 49.9690%;
    }

    .col-sm-7-12 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .col-sm-2-3,
    .col-sm-8-12 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .col-sm-3-4,
    .col-sm-9-12 {
        width: 75%;
        *width: 74.9690%;
    }

    .col-sm-5-6,
    .col-sm-10-12 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .col-sm-11-12 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .col-sm-1,
    .col-sm-1-1,
    .col-sm-12-12 {
        width: 100%;
    }
}

@media screen and (min-width: 48em) {
    .col-md-1,
    .col-md-1-1,
    .col-md-1-2,
    .col-md-1-3,
    .col-md-2-3,
    .col-md-1-4,
    .col-md-3-4,
    .col-md-1-6,
    .col-md-5-6,
    .col-md-1-12,
    .col-md-2-12,
    .col-md-3-12,
    .col-md-4-12,
    .col-md-5-12,
    .col-md-6-12,
    .col-md-7-12,
    .col-md-8-12,
    .col-md-9-12,
    .col-md-10-12,
    .col-md-11-12,
    .col-md-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-md-1-12 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .col-md-1-6,
    .col-md-2-12 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .col-md-1-4,
    .col-md-3-12 {
        width: 25%;
        *width: 24.9690%;
    }

    .col-md-1-3,
    .col-md-4-12 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .col-md-5-12 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .col-md-1-2,
    .col-md-6-12 {
        width: 50%;
        *width: 49.9690%;
    }

    .col-md-7-12 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .col-md-2-3,
    .col-md-8-12 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .col-md-3-4,
    .col-md-9-12 {
        width: 75%;
        *width: 74.9690%;
    }

    .col-md-5-6,
    .col-md-10-12 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .col-md-11-12 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .col-md-1,
    .col-md-1-1,
    .col-md-12-12 {
        width: 100%;
    }
}

@media screen and (min-width: 64em) {
    .col-lg-1,
    .col-lg-1-1,
    .col-lg-1-2,
    .col-lg-1-3,
    .col-lg-2-3,
    .col-lg-1-4,
    .col-lg-3-4,
    .col-lg-1-6,
    .col-lg-5-6,
    .col-lg-1-12,
    .col-lg-2-12,
    .col-lg-3-12,
    .col-lg-4-12,
    .col-lg-5-12,
    .col-lg-6-12,
    .col-lg-7-12,
    .col-lg-8-12,
    .col-lg-9-12,
    .col-lg-10-12,
    .col-lg-11-12,
    .col-lg-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-lg-1-12 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .col-lg-1-6,
    .col-lg-2-12 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .col-lg-1-4,
    .col-lg-3-12 {
        width: 25%;
        *width: 24.9690%;
    }

    .col-lg-1-3,
    .col-lg-4-12 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .col-lg-5-12 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .col-lg-1-2,
    .col-lg-6-12 {
        width: 50%;
        *width: 49.9690%;
    }

    .col-lg-7-12 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .col-lg-2-3,
    .col-lg-8-12 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .col-lg-3-4,
    .col-lg-9-12 {
        width: 75%;
        *width: 74.9690%;
    }

    .col-lg-5-6,
    .col-lg-10-12 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .col-lg-11-12 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .col-lg-1,
    .col-lg-1-1,
    .col-lg-12-12 {
        width: 100%;
    }
}

@media screen and (min-width: 80em) {
    .col-xl-1,
    .col-xl-1-1,
    .col-xl-1-2,
    .col-xl-1-3,
    .col-xl-2-3,
    .col-xl-1-4,
    .col-xl-3-4,
    .col-xl-1-6,
    .col-xl-5-6,
    .col-xl-1-12,
    .col-xl-2-12,
    .col-xl-3-12,
    .col-xl-4-12,
    .col-xl-5-12,
    .col-xl-6-12,
    .col-xl-7-12,
    .col-xl-8-12,
    .col-xl-9-12,
    .col-xl-10-12,
    .col-xl-11-12,
    .col-xl-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-xl-1-12 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .col-xl-1-6,
    .col-xl-2-12 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .col-xl-1-4,
    .col-xl-3-12 {
        width: 25%;
        *width: 24.9690%;
    }

    .col-xl-1-3,
    .col-xl-4-12 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .col-xl-5-12 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .col-xl-1-2,
    .col-xl-6-12 {
        width: 50%;
        *width: 49.9690%;
    }

    .col-xl-7-12 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .col-xl-2-3,
    .col-xl-8-12 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .col-xl-3-4,
    .col-xl-9-12 {
        width: 75%;
        *width: 74.9690%;
    }

    .col-xl-5-6,
    .col-xl-10-12 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .col-xl-11-12 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .col-xl-1,
    .col-xl-1-1,
    .col-xl-12-12 {
        width: 100%;
    }
}

div.grey{
 background: #EDEDEB;
}

div.white{
 background: #F4F5F0;
}

div.dark-grey{
 background: #4C4D4B;
}

div.green{
 background: #5CB86E;
}

.pure-img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
  cursor: pointer;
  margin: 10px;
  border-radius: 5px;
  text-decoration: none;
  padding: 10px;
  font-size: 22px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
  color: #666666;
  border: 2px #666666 solid;
  outline: none;
}

button:hover{
 color: #ffffff;
 background-color: #666666;
}

.blue {
  color: #55acee;
  border: 2px #55acee solid;
}

.blue:hover {
  background-color: #55acee;
}

.green {
  color: #2ecc71;
  border: 2px #2ecc71 solid;
}

.green:hover {
  background-color: #2ecc71;
}

.red {
  color: #e74c3c;
  border: 2px #e74c3c solid;
}

.red:hover {
  background-color: #e74c3c;
}

.purple {
  color: #9b59b6;
  border: 2px #9b59b6 solid;
}

.purple:hover {
 background-color: #9b59b6;
}

.orange {
 color: #e67e22;
 border: 2px #e67e22 solid;
}

.orange:hover {
 background-color: #e67e22;
}

.yellow {
 color: #f1c40f;
 border: 2px #f1c40f solid;
}

.yellow:hover {
 background-color: #f1c40f;
}

.twitter{
 color: #00aced;
 border: 2px solid#00aced;
}
.twitter:hover{
 background-color: #00aced;
}
.facebook{
 color: #3b5998;
 border: 2px solid #3b5998;
}
.facebook:hover{
 background-color: #3b5998;
}
.google{
 color: #dd4b39;
 border: 2px solid #dd4b39;
}
.google:hover{
 background-color: #dd4b39;
}
.pinterest{
 color: #cb2027;
 border: 2px solid #cb2027;
}
.pinterest:hover{
 background-color: #cb2027;
}
.linkedin{
 color: #007bb6;
 border: 2px solid #007bb6;
}
.linkedin:hover{
 background-color: #007bb6;
}
.youtube{
 color: #bb0000;
 border: 2px solid #bb0000;
}
.youtube:hover{
 background-color: #bb0000;
}
.vimeo{
 color: #aad450;
 border: 2px solid #aad450;
}
.vimeo:hover{
 background-color: #aad450;
}
.tumblr{
 color: #32506d;
 border: 2px solid #32506d;
}
.tumblr:hover{
 background-color: #32506d;
}
.instagram{
 color: #517fa4;
 border: 2px solid #517fa4;
}
.instagram:hover{
 background-color: #517fa4;
}
.flickr{
 color: #ff0084;
 border: 2px solid #ff0084;
}
.flickr:hover{
 background-color: #ff0084;
}
.dribbble{
 color: #ea4c89;
 border: 2px solid #ea4c89;
}
.dribbble:hover{
 background-color: #ea4c89;
}
.quora{
 color: #a82400;
 border: 2px solid #a82400;
}
.quora:hover{
 background-color: #a82400;
}
.foursquare{
 color: #0072b1;
 border: 2px solid #0072b1;
}
.foursquare:hover{
 background-color: #0072b1;
}
.forrst{
 color: #5B9A68;
 border: 2px solid #5B9A68;
}
.forrst:hover{
 background-color: #5B9A68;
}
.vk{
 color: #45668e;
 border: 2px solid #45668e;
}
.vk:hover{
 background-color: #45668e;
}
.wordpress{
 color: #21759b;
 border: 2px solid #21759b;
}
.wordpress:hover{
 background-color: #21759b;
}
.stumbleupon{
 color: #EB4823;
 border: 2px solid #EB4823;
}
.stumbleupon:hover{
 background-color: #EB4823;
}
.yahoo{
 color: #7B0099;
 border: 2px solid #7B0099;
}
.yahoo:hover{
 background-color: #7B0099;
}
.blogger{
 color: #fb8f3d;
 border: 2px solid #fb8f3d;
}
.blogger:hover{
 background-color: #fb8f3d;
}
.soundcloud{
 color: #ff3a00;
 border: 2px solid #ff3a00;
}
.soundcloud:hover{
 background-color: #ff3a00;
}


/* BACKGROUND TRANSITIONS */
/* Fade */
.fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.fade:hover, .fade:focus, .fade:active {
  background-color: #2098d1;
  color: white;
}

/* Sweep To Right */
.sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-right:hover, .sweep-to-right:focus, .sweep-to-right:active {
  color: white;
}
.sweep-to-right:hover:before, .sweep-to-right:focus:before, .sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Sweep To Left */
.sweep-to-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-left:hover, .sweep-to-left:focus, .sweep-to-left:active {
  color: white;
}
.sweep-to-left:hover:before, .sweep-to-left:focus:before, .sweep-to-left:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Sweep To Bottom */
.sweep-to-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-bottom:hover, .sweep-to-bottom:focus, .sweep-to-bottom:active {
  color: white;
}
.sweep-to-bottom:hover:before, .sweep-to-bottom:focus:before, .sweep-to-bottom:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

/* Sweep To Top */
.sweep-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-top:hover, .sweep-to-top:focus, .sweep-to-top:active {
  color: white;
}
.sweep-to-top:hover:before, .sweep-to-top:focus:before, .sweep-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

/* Bounce To Right */
.bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.bounce-to-right:hover, .bounce-to-right:focus, .bounce-to-right:active {
  color: white;
}
.bounce-to-right:hover:before, .bounce-to-right:focus:before, .bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Bounce To Left */
.bounce-to-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.bounce-to-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.bounce-to-left:hover, .bounce-to-left:focus, .bounce-to-left:active {
  color: white;
}
.bounce-to-left:hover:before, .bounce-to-left:focus:before, .bounce-to-left:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Bounce To Bottom */
.bounce-to-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.bounce-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.bounce-to-bottom:hover, .bounce-to-bottom:focus, .bounce-to-bottom:active {
  color: white;
}
.bounce-to-bottom:hover:before, .bounce-to-bottom:focus:before, .bounce-to-bottom:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Bounce To Top */
.bounce-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.bounce-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.bounce-to-top:hover, .bounce-to-top:focus, .bounce-to-top:active {
  color: white;
}
.bounce-to-top:hover:before, .bounce-to-top:focus:before, .bounce-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Radial Out */
.radial-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.radial-out:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.radial-out:hover, .radial-out:focus, .radial-out:active {
  color: white;
}
.radial-out:hover:before, .radial-out:focus:before, .radial-out:active:before {
  -webkit-transform: scale(2);
  transform: scale(2);
}

/* Radial In */
.radial-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
  background: #2098d1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.radial-in:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e1e1e1;
  border-radius: 100%;
  -webkit-transform: scale(2);
  transform: scale(2);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.radial-in:hover, .radial-in:focus, .radial-in:active {
  color: white;
}
.radial-in:hover:before, .radial-in:focus:before, .radial-in:active:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}

/* Rectangle In */
.rectangle-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #2098d1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.rectangle-in:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e1e1e1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.rectangle-in:hover, .rectangle-in:focus, .rectangle-in:active {
  color: white;
}
.rectangle-in:hover:before, .rectangle-in:focus:before, .rectangle-in:active:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}

/* Rectangle Out */
.rectangle-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.rectangle-out:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.rectangle-out:hover, .rectangle-out:focus, .rectangle-out:active {
  color: white;
}
.rectangle-out:hover:before, .rectangle-out:focus:before, .rectangle-out:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* Shutter In Horizontal */
.shutter-in-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #2098d1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.shutter-in-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e1e1e1;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.shutter-in-horizontal:hover, .shutter-in-horizontal:focus, .shutter-in-horizontal:active {
  color: white;
}
.shutter-in-horizontal:hover:before, .shutter-in-horizontal:focus:before, .shutter-in-horizontal:active:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

/* Shutter Out Horizontal */
.shutter-out-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.shutter-out-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.shutter-out-horizontal:hover, .shutter-out-horizontal:focus, .shutter-out-horizontal:active {
  color: white;
}
.shutter-out-horizontal:hover:before, .shutter-out-horizontal:focus:before, .shutter-out-horizontal:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Shutter In Vertical */
.shutter-in-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #2098d1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.shutter-in-vertical:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e1e1e1;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.shutter-in-vertical:hover, .shutter-in-vertical:focus, .shutter-in-vertical:active {
  color: white;
}
.shutter-in-vertical:hover:before, .shutter-in-vertical:focus:before, .shutter-in-vertical:active:before {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}

/* Shutter Out Vertical */
.shutter-out-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.shutter-out-vertical:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2098d1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.shutter-out-vertical:hover, .shutter-out-vertical:focus, .shutter-out-vertical:active {
  color: white;
}
.shutter-out-vertical:hover:before, .shutter-out-vertical:focus:before, .shutter-out-vertical:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}


/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.border-fade:hover, .border-fade:focus, .border-fade:active {
  box-shadow: inset 0 0 0 4px #2098d1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Hollow */
.hollow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: background;
  transition-property: background;
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hollow:hover, .hollow:focus, .hollow:active {
  background: none;
}

/* Trim */
.trim {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.trim:before {
  content: '';
  position: absolute;
  border: white solid 4px;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.trim:hover:before, .trim:focus:before, .trim:active:before {
  opacity: 1;
}

/* Ripple Out */
@-webkit-keyframes ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.ripple-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.ripple-out:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 6px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.ripple-out:hover:before, .ripple-out:focus:before, .ripple-out:active:before {
  -webkit-animation-name: ripple-out;
  animation-name: ripple-out;
}

/* Ripple In */
@-webkit-keyframes ripple-in {
  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}

@keyframes ripple-in {
  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}

.ripple-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.ripple-in:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  opacity: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.ripple-in:hover:before, .ripple-in:focus:before, .ripple-in:active:before {
  -webkit-animation-name: ripple-in;
  animation-name: ripple-in;
}

/* Outline Out */
.outline-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.outline-out:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-out:hover:before, .outline-out:focus:before, .outline-out:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

/* Outline In */
.outline-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.outline-in:before {
  pointer-events: none;
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-in:hover:before, .outline-in:focus:before, .outline-in:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}

/* Round Corners */
.round-corners {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: border-radius;
  transition-property: border-radius;
}
.round-corners:hover, .round-corners:focus, .round-corners:active {
  border-radius: 1em;
}

/* Underline From Left */
.underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.underline-from-left:hover:before, .underline-from-left:focus:before, .underline-from-left:active:before {
  right: 0;
}

/* Underline From Center */
.underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.underline-from-center:hover:before, .underline-from-center:focus:before, .underline-from-center:active:before {
  left: 0;
  right: 0;
}

/* Underline From Right */
.underline-from-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.underline-from-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.underline-from-right:hover:before, .underline-from-right:focus:before, .underline-from-right:active:before {
  left: 0;
}

/* Overline From Left */
.overline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.overline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  top: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.overline-from-left:hover:before, .overline-from-left:focus:before, .overline-from-left:active:before {
  right: 0;
}

/* Overline From Center */
.overline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.overline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  top: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.overline-from-center:hover:before, .overline-from-center:focus:before, .overline-from-center:active:before {
  left: 0;
  right: 0;
}

/* Overline From Right */
.overline-from-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.overline-from-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  top: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.overline-from-right:hover:before, .overline-from-right:focus:before, .overline-from-right:active:before {
  left: 0;
}

/* Reveal */
.reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: #2098d1;
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.reveal:hover:before, .reveal:focus:before, .reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}

/* Underline Reveal */
.underline-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.underline-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.underline-reveal:hover:before, .underline-reveal:focus:before, .underline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* Overline Reveal */
.overline-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.overline-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.overline-reveal:hover:before, .overline-reveal:focus:before, .overline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

Selanjutnya Anda menuju Entri gres , salin instruksi dibawah ini dan pastekan pada Mode HTML.

<div class="col-1">
   <button class="border-fade">border-fade</button>
   <button class="hollow">hollow</button>
   <button class="trim">trim</button>
   <button class="ripple-out">ripple-out</button>
   <button class="ripple-in">ripple-in</button>
   <button class="outline-out">outline-out</button>
   <button class="outline-in">outline-in</button>
   <button class="round-corners">round-corners</button>
   <button class="underline-from-left">underline-from-left</button>
   <button class="underline-from-center">underline-from-center</button>
   <button class="underline-from-right">underline-from-right</button>
   <button class="reveal">reveal</button>
   <button class="underline-reveal">underline-reveal</button>
   <button class="overline-reveal">overline-reveal</button>
   <button class="overline-from-left">overline-from-left</button>
   <button class="overline-from-center">overline-from-center</button>
   <button class="overline-from-right">overline-from-right</button>
  </div>

Semoga bermanfaat!

Sumber http://www.websiteedukasi.com/