A collection of button effects in html, css, javascript

anim_submit.js

$(function() {
  $( "#button" ).click(function() {
    $( "#button" ).addClass( "onclic", 250, validate);
  });

  function validate() {
    setTimeout(function() {
      $( "#button" ).removeClass( "onclic" );
      $( "#button" ).addClass( "validate", 450, callback );
    }, 2250 );
  }
    function callback() {
      setTimeout(function() {
        $( "#button" ).removeClass( "validate" );
      }, 1250 );
    }
  });

anim_submit.scss

$green: #1ECD97;
$gray: #bbbbbb;
* {
  font-family: 'Roboto', sans-serif;
}
.container {
  position: absolute;
  top:50%;
  left:50%;
  margin-left: -65px;
  margin-top: -20px;
  width: 130px;
  height: 40px;
  text-align: center;
}
button {
  outline:none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius:40px;
  background: #fff;
  border: 2px solid $green;
  color:$green;
  letter-spacing:1px;
  text-shadow:0;
  font:{
    size:12px;
    weight:bold;
  }
  cursor: pointer;
  transition: all 0.25s ease;
  &:hover {
    color:white;
    background: $green;
  }
  &:active {
    //letter-spacing: 2px;
    letter-spacing: 2px ;
  }
  &:after {
    content:"SUBMIT";
  }
}
.onclic {
  width: 40px;
  border-color:$gray;
  border-width:3px;
  font-size:0;
  border-left-color:$green;
  animation: rotating 2s 0.25s linear infinite;

  &:after {
    content:"";
  }
  &:hover {
    color:$green;
    background: white;
  }
}
.validate {
  font-size:13px;
  color: white;
  background: $green;
  &:after {
    font-family:'FontAwesome';
    content:"\f00c";
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

anim_submit_button.html

<div class="container">
  <button id="button"></button>
</div>

animated.css

html {
  background-color: #333;
  transition: 0.5s;
}
h1 {
  font-family: Marvel;
  font-size: 50pt;
  margin-top: 15px;
  line-height: 50pt;
  transition: 0.5s;
  color: #bbb;
}
h6 {
  font-family: Marvel;
  font-size: 20pt;
  text-align: center;
  margin-top: -25px;
  margin-bottom: 15px;
  line-height: 20px;
  padding: none;
  transition: 0.5s;
  color: #bbb;
}
button {
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Marvel;
  font-size: 20pt;
  width: 200px;
  height: 45px;
  position: relative;
  border: solid #bbb 2px;
  color: #bbb;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  border-radius: 5px;
  margin: 5px;
}
button:focus {
  outline: none;
}
.button-container {
  width: 852px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
}
h4 {
  padding: 0px;
  line-height: .1;
  margin: 13px;
}
a {
  color: red;
  text-decoration: none;
  background: #f1f1f1;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
}
a:hover {
  color: #f1f1f1;
  background-color: red
}
#footer {
  position: relative;
  top: 4px;
  padding-bottom: 0px;
  text-align: center;
  font-family: Marvel;
  font-size: 13pt;
  color: #f1f1f1;
  line-height: 1;
  width: 99%;
}
@media screen and (max-width: 880px) {
  .button-container {
    width: 424px;
  }
}
@media screen and (max-width: 445px) {
  .button-container {
    width: 200px;
  }
}

.btn-1 {
  background: #333;
  padding: 0;
}
.btn-1 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 5px;
  transition: 0.5s ease-in-out;
}
.btn-1:before,
.btn-1:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: red;
  transition: all 0.5s ease-in-out;
}
.btn-1:before {
  height: 0%;
  width: 2px;
  top: 50%;
}
.btn-1:after {
  width: 0%;
  height: 2px;
  left: 50%;
}
.btn-1:hover:before {
  height: 100%;
  top: 0%;
  background: red;
}
.btn-1:hover:after {
  width: 100%;
  left: 0%;
  background: red;
}
.btn-1:hover {
  background: transparent;
  border-color: #333;
}
.btn-1 span:hover {
  color: red;
}
.btn-1 span:before,
.btn-1 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #333;
  transition: all 0.5s ease-in-out;
}
.btn-1 span:before {
  width: 2px;
  height: 0%;
  top: 50%;
}
.btn-1 span:after {
  height: 2px;
  width: 0%;
  left: 50%;
}
.btn-1 span:hover:before {
  height: 41px;
  top: 0%;
  background: red;
}
.btn-1 span:hover:after {
  width: 100%;
  left: 0%;
  background: red;
}
.btn-1:active {
  background-color: #00a7fc;
  border-color: #00a7fc;
}
.btn-1:active:before,
.btn-1:active:after {
  background-color: #00a7fc;
}
.btn-1 span:active {
  color: #333;
}
.btn-1 span:active:before,
.btn-1 span:active:after {
  background-color: #00a7fc;
}


.btn-2 {
  background-image: -webkit-linear-gradient(30deg, transparent 50%, red 50%);
  background-image: linear-gradient(30deg, transparent 50%, red 50%);
  background-size: 298%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0%;
}
.btn-2:hover {
  background-position: 100%;
  color: #f1f1f1;
  border-color: red;
}
.btn-2:active {
  background-color: #00a7fc;
  color: #333;
  background-position: 0%;
  border-color: #00a7fc;
}


.btn-3 {
  background: #333;
}
.btn-3:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  transform: scale(0);
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-3:hover:before {
  transform: scale(1);
}
.btn-3:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-3:active:before {
  background-color: #00a7fc;
}
.btn-3:active {
  border-color: #00a7fc;
  color: #333;
  background-color: #00a7fc;
}


.btn-4 {
  background: red;
}
.btn-4:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #333;
  transform: scale(1);
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-4:hover:before {
  transform: scale(0);
}
.btn-4:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-4:active {
  border-color: #00a7fc;
  color: #333;
  background-color: #00a7fc;
}
.btn-4:active:before {
  background-color: #00a7fc;
}


.btn-5 {
  background: #333;
}
.btn-5:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: red;
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-5:hover:before {
  width: 100%;
}
.btn-5:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-5:active:before {
  background-color: #00a7fc;
}
.btn-5:active {
  border-color: #00a7fc;
  background-color: #00a7fc;
  color: #333;
}


.btn-6 {
  background: #333;
}
.btn-6:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-6:hover:before {
  width: 100%;
}
.btn-6:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-6:active:before {
  background-color: #00a7fc;
}
.btn-6:active {
  border-color: #00a7fc;
  background-color: #00a7fc;
  color: #333;
}


.btn-7 {
  background: #333;
}
.btn-7:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: red;
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-7:hover:before {
  height: 100%;
}
.btn-7:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-7:active:before {
  background-color: #00a7fc;
}
.btn-7:active {
  border-color: #00a7fc;
  background-color: #00a7fc;
  color: #333;
}


.btn-8 {
  background: #333;
}
.btn-8:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: red;
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-8:hover:before {
  height: 100%;
}
.btn-8:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-8:active:before {
  background-color: #00a7fc;
}
.btn-8:active {
  border-color: #00a7fc;
  background-color: #00a7fc;
  color: #333;
}


.btn-9 {
  background: #333;
}
.btn-9:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 50%;
  background-color: red;
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-9:hover:before {
  width: 100%;
  right: 0%;
}
.btn-9:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-9:active {
  color: #333;
  border-color: #00a7fc;
  background-color: #00a7fc;
}
.btn-9:active:before {
  background-color: #00a7fc;
}


.btn-10 {
  background: red;
}
.btn-10:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0%;
  background-color: #333;
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-10:hover:before {
  width: 0%;
  right: 50%;
}
.btn-10:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-10:active {
  color: #333;
  border-color: #00a7fc;
  background-color: #00a7fc;
}
.btn-10:active:before {
  background-color: #00a7fc;
}


.btn-11 {
  background: #333;
}
.btn-11:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 50%;
  right: 0%;
  background-color: red;
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-11:hover:before {
  height: 100%;
  top: 0%;
}
.btn-11:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-11:active {
  color: #333;
  border-color: #00a7fc;
  background-color: #00a7fc;
}
.btn-11:active:before {
  background-color: #00a7fc;
}


.btn-12 {
  background: red;
}
.btn-12:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  right: 0%;
  background-color: #333;
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.btn-12:hover:before {
  height: 0%;
  top: 50%;
}
.btn-12:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-12:active {
  color: #333;
  border-color: #00a7fc;
  background-color: #00a7fc;
}
.btn-12:active:before {
  background-color: #00a7fc;
}


.btn-13 {
  background-color: #333;
}
.btn-13:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-13:hover:before {
  left: 0%;
  right: auto;
  width: 100%;
}
.btn-13:before {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0%;
  height: 100%;
  z-index: -1;
  content: "";
  color: #f1f1f1;
  background: red;
  transition: all 500ms ease-in-out;
}
.btn-13:active:before {
  background-color: #00a7fc;
}
.btn-13:active {
  color: #333;
  background-color: #00a7fc;
  border-color: #00a7fc;
}


.btn-14 {
  background-color: #333;
}
.btn-14:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-14:hover:before {
  right: 0%;
  left: auto;
  width: 100%;
}
.btn-14:before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0%;
  height: 100%;
  z-index: -1;
  content: "";
  color: #f1f1f1;
  background: red;
  transition: all 500ms ease-in-out;
}
.btn-14:active:before {
  background-color: #00a7fc;
}
.btn-14:active {
  color: #333;
  background-color: #00a7fc;
  border-color: #00a7fc;
}


.btn-15 {
  background-color: #333;
}
.btn-15:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-15:hover:before {
  bottom: 0%;
  top: auto;
  height: 100%;
}
.btn-15:before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 0%;
  width: 100%;
  z-index: -1;
  content: "";
  color: #f1f1f1;
  background: red;
  transition: all 500ms ease-in-out;
}
.btn-15:active:before {
  background-color: #00a7fc;
}
.btn-15:active {
  color: #333;
  background-color: #00a7fc;
  border-color: #00a7fc;
}


.btn-16 {
  background-color: #333;
}
.btn-16:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-16:hover:before {
  top: 0%;
  bottom: auto;
  height: 100%;
}
.btn-16:before {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 0%;
  width: 100%;
  z-index: -1;
  content: "";
  color: #f1f1f1;
  background: red;
  transition: all 500ms ease-in-out;
}
.btn-16:active:before {
  background-color: #00a7fc;
}
.btn-16:active {
  color: #333;
  background-color: #00a7fc;
  border-color: #00a7fc;
}


.btn-17 {
  background: #333;
  overflow: hidden;
  transition: all 0.3s ease-in-out 0s;
}
.btn-17:before {
  content: "";
  height: 0%;
  width: 0%;
  background: red;
  position: absolute;
  top: 50%;
  right: 50%;
  border-radius: 20px;
  z-index: -1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transform: translateX(50%) translateY(-50%) rotate(-45deg);
}
.btn-17:hover:before {
  animation: btn-17 2s;
  background-color: red;
}
.btn-17:hover {
  color: #f1f1f1;
  border-color: red;
  background-color: red;
  transition: background-color 0.5s ease-in-out 0.8s;
}
@keyframes btn-17 {
  0% {
    height: 0%;
    width: 0%;
  }
  25% {
    height: 250%;
    width: 600%;
  }
  50% {
    height: 600%;
    width: 600%;
  }
  75% {
    height: 100%;
    width: 600%;
  }
  100% {
    height: 0%;
    width: 0%;
  }
}


.btn-18 {
  background: #333;
  overflow: hidden;
  transition: all 0.3s ease-in-out 0s;
}
.btn-18:before {
  content: "";
  height: 0%;
  width: 0%;
  background: red;
  position: absolute;
  top: 50%;
  right: 50%;
  border-radius: 20px;
  z-index: -1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transform: translateX(50%) translateY(-50%) rotate(45deg);
}
.btn-18:hover:before {
  animation: btn-18 2s;
  background-color: red;
}
.btn-18:hover {
  color: #f1f1f1;
  border-color: red;
  background-color: red;
  transition: background-color 0.5s ease-in-out 0.8s;
}
@keyframes btn-18 {
  0% {
    height: 0%;
    width: 0%;
  }
  25% {
    height: 250%;
    width: 600%;
  }
  50% {
    height: 600%;
    width: 600%;
  }
  75% {
    height: 100%;
    width: 600%;
  }
  100% {
    height: 0%;
    width: 0%;
  }
}


.btn-19 {
  overflow: hidden;
  background: #333;
}
.btn-19:before {
  content: "";
  position: absolute;
  background: red;
  width: 0%;
  height: 0%;
  border-radius: 50%;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
}
.btn-19:hover:before {
  width: 110%;
  height: 300px;
}
.btn-19:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-19:active:before {
  background-color: #00a7fc;
}
.btn-19:active {
  color: #333;
  background-color: #00a7fc;
  border-color: #00a7fc;
}


.btn-20 {
  overflow: hidden;
  background-color: red;
}
.btn-20:before {
  content: "";
  position: absolute;
  background: #333;
  width: 110%;
  height: 300px;
  border-radius: 50%;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
}
.btn-20:hover:before {
  width: 0%;
  height: 0%;
}
.btn-20:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-20:active:before {
  background-color: #00a7fc;
}
.btn-20:active {
  color: #333;
  background-color: #00a7fc;
  border-color: #00a7fc;
}


.btn-21 {
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Marvel;
  font-size: 20pt;
  width: 200px;
  height: 45px;
  position: relative;
  color: #bbb;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  border-radius: 0px;
  margin: 5px;
  background: transparent;
  padding: 0;
  overflow: hidden;
  border: none;
}
.btn-21:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, transparent, #bbb);
  animation: btn-21-left 2s linear infinite;
  transition: 0.5s ease-in-out;
}
.btn-21:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to top, transparent, #bbb);
  animation: btn-21-top 2s linear infinite;
  animation-delay: 1s;
  transform: translateY(-100%);
}
.btn-21 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 6px;
}
.btn-21 span:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #bbb);
  animation: btn-21-right 2s linear infinite;
}
.btn-21 span:before {
  content: "";
  position: absolute;
  top: 0px;
  right: 12px;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #bbb);
  animation: btn-22-bottom 2s linear infinite;
  animation-delay: 1s;
  transform: translateY(-100%)
}
.btn-21:hover:before {
  background: linear-gradient(to left, transparent, red);
}
.btn-21:hover:after {
  background: linear-gradient(to top, transparent, red);
}
.btn-21 span:hover:before {
  background: linear-gradient(to bottom, transparent, red);
}
.btn-21 span:hover:after {
  background: linear-gradient(to right, transparent, red);
}
.btn-21:hover {
  color: red;
}
.btn-21:active:before {
  background: linear-gradient(to left, transparent, #00a7fc);
}
.btn-21:active:after {
  background: linear-gradient(to top, transparent, #00a7fc);
}
.btn-21 span:active:before {
  background: linear-gradient(to bottom, transparent, #00a7fc);
}
.btn-21 span:active:after {
  background: linear-gradient(to right, transparent, #00a7fc);
}
.btn-21:active {
  color: #00a7fc;
}
@keyframes btn-21-top {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes btn-21-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes btn-21-bottom {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes btn-21-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}


.btn-22 {
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Marvel;
  font-size: 20pt;
  width: 200px;
  height: 45px;
  position: relative;
  color: #bbb;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  border-radius: 0px;
  margin: 5px;
  background: transparent;
  padding: 0;
  overflow: hidden;
  border: none;
}
.btn-22:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, transparent, #bbb);
  animation: btn-22-left 2s linear infinite;
  transition: 0.5s ease-in-out;
}
.btn-22:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to top, transparent, #bbb);
  animation: btn-22-top 2s linear infinite;
  animation-delay: 1s;
  transform: translateY(-100%);
}
.btn-22 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 6px;
}
.btn-22 span:after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #bbb);
  animation: btn-22-right 2s linear infinite;
}
.btn-22 span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #bbb);
  animation: btn-22-bottom 2s linear infinite;
  animation-delay: 1s;
  transform: translateY(-100%)
}
.btn-22:hover:before {
  background: linear-gradient(to left, transparent, red);
}
.btn-22:hover:after {
  background: linear-gradient(to top, transparent, red);
}
.btn-22 span:hover:before {
  background: linear-gradient(to bottom, transparent, red);
}
.btn-22 span:hover:after {
  background: linear-gradient(to right, transparent, red);
}
.btn-22:hover {
  color: red;
}
.btn-22:active:before {
  background: linear-gradient(to left, transparent, #00a7fc);
}
.btn-22:active:after {
  background: linear-gradient(to top, transparent, #00a7fc);
}
.btn-22 span:active:before {
  background: linear-gradient(to bottom, transparent, #00a7fc);
}
.btn-22 span:active:after {
  background: linear-gradient(to right, transparent, #00a7fc);
}
.btn-22:active {
  color: #00a7fc;
}
@keyframes btn-22-top {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes btn-22-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes btn-22-bottom {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes btn-22-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}


.btn-23 {
  overflow: hidden;
  background-color: #333;
}
.btn-23:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 0%;
  background: red;
  border-radius: 23px;
  transition: all 0.5s ease-in-out;
  z-index: -1;
}
.btn-23:hover:before {
  width: 120%;
  left: -10%;
}
.btn-23:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-23:active {
  border-color: #00a7fc;
  color: #333;
  background-color: #00a7fc;
}
.btn-23:active:before {
  background-color: #00a7fc;
}
.btn-23:active {
  background-color: #00a7fc;
  border-color: #00a7fc;
  color: #333;
}
.btn-23:active:before {
  background-color: #00a7fc;
}


.btn-24 {
  background: #f1f1f1;
  overflow: hidden;
  background-color: red;
}
.btn-24:before {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  width: 120%;
  left: -10%;
  background-color: #333;
  transition: all 0.5s ease-in-out;
  border-radius: 23px;
  z-index: -1;
}
.btn-24:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-24:hover:before {
  width: 0%;
  left: 50%;
}
.btn-24:active {
  background-color: #00a7fc;
  border-color: #00a7fc;
  color: #333;
}
.btn-24:active:before {
  background-color: #00a7fc;
}


.btn-25 {
  background: #333;
}
.btn-25:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 0%;
  background-color: red;
  transition: all 0.5s ease-in-out;
  z-index: -1;
}
.btn-25:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 0%;
  background-color: red;
  transition: all 0.5s ease-in-out;
  z-index: -1;
}
.btn-25:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-25:hover:before,
.btn-25:hover:after {
  height: 100%;
}
.btn-25:active {
  color: #333;
  border-color: #00a7fc;
  background-color: #00a7fc;
}
.btn-25:active:before,
.btn-25:active:after {
  background-color: #00a7fc;
}


.btn-26 {
  background: #333;
}
.btn-26:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 0%;
  background-color: red;
  transition: all 0.5s ease-in-out;
  z-index: -1;
}
.btn-26:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 0%;
  background-color: red;
  transition: all 0.5s ease-in-out;
  z-index: -1;
}
.btn-26:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-26:hover:before,
.btn-26:hover:after {
  height: 100%;
}
.btn-26:active {
  color: #333;
  border-color: #00a7fc;
  background-color: #00a7fc;
}
.btn-26:active:before,
.btn-26:active:after {
  background-color: #00a7fc;
}


.btn-27 {
  background: #333;
}
.btn-27:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 50%;
  background-color: red;
  transition: all 0.5s ease-in-out;
  z-index: -1;
}
.btn-27:after {
  content: "";
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 0%;
  height: 50%;
  background-color: red;
  transition: all 0.5s ease-in-out;
  z-index: -1;
}
.btn-27:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-27:hover:before,
.btn-27:hover:after {
  width: 100%;
}
.btn-27:active {
  color: #333;
  border-color: #00a7fc;
  background-color: #00a7fc;
}
.btn-27:active:before,
.btn-27:active:after {
  background-color: #00a7fc;
}


.btn-28 {
  background: #333;
}
.btn-28:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 50%;
  background-color: red;
  transition: all 0.5s ease-in-out;
  z-index: -1;
}
.btn-28:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0%;
  height: 50%;
  background-color: red;
  transition: all 0.5s ease-in-out;
  z-index: -1;
}
.btn-28:hover {
  color: #f1f1f1;
  border-color: red;
}
.btn-28:hover:before,
.btn-28:hover:after {
  width: 100%;
}
.btn-28:active {
  color: #333;
  border-color: #00a7fc;
  background-color: #00a7fc;
}
.btn-28:active:before,
.btn-28:active:after {
  background-color: #00a7fc;
}


/*

		Following code is for copying button code

*/

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s ease-in-out;
}
.modal-box {
  background-color: transparent;
  position: absolute;
  width: 80%;
  height: 80%;
  left: 100px;
  top: 50px;
}
.close {
  position: fixed;
  width: auto;
  height: auto;
  background-color: transparent;
  border: none;
  padding: 0px;
  top: 10px;
  right: 10px;
  color: #f1f1f1;
  cursor: pointer;
}
.content {
  position: absolute;
  padding: 10px;
  background-color: #111;
  font-size: 10pt;
  font-family: "Nova Mono";
  color: #f1f1f1;
  overflow: auto;
  transition: opacity 0.3s ease-in-out;
  border-radius: 0px 25px 25px 25px
}
.content::-webkit-scrollbar {
  width: 0;
}
.content::-webkit-scrollbar-track {
  background: #111;
}
.content::-webkit-scrollbar-thumb {
  background: #666;
}
.content::-webkit-scrollbar-thumb:hover {
  background: #888;
}
.modal-box-buttons {
  position: relative;
  max-height: 50px;
  padding: 0px;
  background: transparent;
  z-index: 100;
}
.modal-box-buttons-button {
  width: 100px;
  height: 50px;
  background: #111;
  font-family: "Nova Mono";
  font-size: 20pt;
  cursor: pointer;
  margin-left: 0px;
  margin-top: 0px;
  border: none;
  border-radius: 25px 25px 0px 0px;
  margin-right: 0px;
  transition: all 0.3s ease-in-out;
  color: #f1f1f1;
}
.css {
  display: none;
}
#copy-button {
  width: 250px;
  position: absolute;
  bottom: 0px;
}
#copy-button button {
  position: relative;
  width: 120px;
  height: 35px;
  font-size: 17pt;
  bottom: 0px;
  letter-spacing: normal;
  padding: 0px;
  border: none;
  background-color: red;
  color: #f1f1f1;
  border-radius: 3px;
  margin: 0px;
  margin-right: 5px;
  transition: box-shadow 0.2s ease-in-out, bottom 0.2s ease-in-out;
  box-shadow: 0px 0px 10px 1px #000;
}
#copy-button button:hover {
  box-shadow: 0px 5px 40px 5px #000;
  bottom: 2px;
}
#copy-button button:active {
  box-shadow: none;
  bottom: 0px;
}
#copy-message {
  font-family: Marvel;
  font-size: 15pt;
  color: #f1f1f1;
  position: fixed;
  width: 120px;
  max-width: 200px;
  bottom: 10px;
  padding: 10px;
  left: -250px;
  background-color: red;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  text-align: center;
}

animated.js

/*

  Pure CSS Button Animation
  Author: Yohaan Chokhany
  
  The JavaScript code is for the copy functionality ONLY. There is no code for the buttons here. Please click on a button to copy its code.

*/

document.getElementById("btn1").onclick = function() { openModal(1) };
document.getElementById("btn2").onclick = function() { openModal(2) };
document.getElementById("btn3").onclick = function() { openModal(3) };
document.getElementById("btn4").onclick = function() { openModal(4) };
document.getElementById("btn5").onclick = function() { openModal(5) };
document.getElementById("btn6").onclick = function() { openModal(6) };
document.getElementById("btn7").onclick = function() { openModal(7) };
document.getElementById("btn8").onclick = function() { openModal(8) };
document.getElementById("btn9").onclick = function() { openModal(9) };
document.getElementById("btn10").onclick = function() { openModal(10) };
document.getElementById("btn11").onclick = function() { openModal(11) };
document.getElementById("btn12").onclick = function() { openModal(12) };
document.getElementById("btn13").onclick = function() { openModal(13) };
document.getElementById("btn14").onclick = function() { openModal(14) };
document.getElementById("btn15").onclick = function() { openModal(15) };
document.getElementById("btn16").onclick = function() { openModal(16) };
document.getElementById("btn17").onclick = function() { openModal(17) };
document.getElementById("btn18").onclick = function() { openModal(18) };
document.getElementById("btn19").onclick = function() { openModal(19) };
document.getElementById("btn20").onclick = function() { openModal(20) };
document.getElementById("btn21").onclick = function() { openModal(21) };
document.getElementById("btn22").onclick = function() { openModal(22) };
document.getElementById("btn23").onclick = function() { openModal(23) };
document.getElementById("btn24").onclick = function() { openModal(24) };
document.getElementById("btn25").onclick = function() { openModal(25) };
document.getElementById("btn26").onclick = function() { openModal(26) };
document.getElementById("btn27").onclick = function() { openModal(27) };
document.getElementById("btn28").onclick = function() { openModal(28) };

var modal = document.getElementById("modal");
var modalBox = document.getElementById("modal-box");
var modalBoxButtons = document.getElementById("modal-box-buttons");
var copyHTML = document.getElementById("copy-html");
var copyCSS = document.getElementById("copy-css");
var cssButton = document.getElementById("css-button");
var htmlButton = document.getElementById("html-button");
var selected = "HTML";
var modalId;
var content = document.getElementsByClassName("content");
var close = document.getElementById("closeModal");
var copyButton = document.getElementById("copy-button");
var copyTextarea = document.getElementById("copy-textarea");
var copyMessage = document.getElementById("copy-message");
var clicked = false;

window.onclick = function(event) {
  if (modal.style.display == "block") {
    if (event.target == modal || event.target == modalBoxButtons || event.target == close || event.target == copyButton || event.target == modalBox) {
      closeModal();
    }
  }
}

function openModal(chosenModalId) {
  modalId = chosenModalId;
  copyHTML.innerHTML = '&lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Marvel"&gt;<br><br>&lt;button class="btn-' + modalId + '"&gt;<br>&nbsp;&nbsp;&lt;span&gt;Click here&lt;/span&gt;<br>&lt;/button&gt;';
  copyCSS.innerHTML = '.btn-' + modalId + ' {<br>&nbsp;&nbsp;cursor: pointer;<br>&nbsp;&nbsp;letter-spacing: 2px;<br>&nbsp;&nbsp;text-transform: uppercase;<br>&nbsp;&nbsp;font-family: Marvel;<br>&nbsp;&nbsp;font-size: 20pt;<br>&nbsp;&nbsp;width: 200px;<br>&nbsp;&nbsp;height: 45px;<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;border: solid #777 2px;<br>&nbsp;&nbsp;color: #777;<br>&nbsp;&nbsp;z-index: 1;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;border-radius: 5px;<br>'
  if (modalId == 1) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;padding: 0;<br>}<br><br>.btn-1 span {<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;padding-top: 5px;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>}<br><br>.btn-1:before, .btn-1:after {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>}<br><br>.btn-1:before {<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;top: 50%;<br>}<br><br>.btn-1:after {<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;left: 50%;<br>}<br><br>.btn-1:hover:before {<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;top: 0%;<br>&nbsp;&nbsp;background: red;<br>}<br><br>.btn-1:hover:after {<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;left: 0%;<br>&nbsp;&nbsp;background: red;<br>}<br><br>.btn-1:hover {<br>&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;border-color: transparent;<br>}<br><br>.btn-1 span:hover {<br>&nbsp;&nbsp;color: red;<br>}<br><br>.btn-1 span:before, .btn-1 span:after {<br>&nbsp;&nbsp;position: absolute;<br>content: "";<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;background: #333;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>}<br><br>.btn-1 span:before {<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;top: 50%;<br>}<br><br>.btn-1 span:after {<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;left: 50%;<br>}<br><br>.btn-1 span:hover:before {<br>&nbsp;&nbsp;height: 41px;<br>&nbsp;&nbsp;top: 0%;<br>&nbsp;&nbsp;background: red;<br>}<br><br>.btn-1 span:hover:after {<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;left: 0%; <br>&nbsp;&nbsp;background: red;<br>}<br><br>.btn-1:active {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}<br><br>.btn-1:active:before, .btn-1:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-1 span:active {<br>&nbsp;&nbsp;color: #333;<br>}<br><br>.btn-1 span:active:before, .btn-1 span:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}'
  } else if (modalId == 2) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background-image: -webkit-linear-gradient(30deg, transparent 50%, red 50%);<br>&nbsp;&nbsp;background-image: linear-gradient(30deg, transparent 50%, red 50%);<br>&nbsp;&nbsp;background-size: 298%;<br>&nbsp;&nbsp;background-color: transparent;<br>&nbsp;&nbsp;background-repeat: no-repeat;<br>&nbsp;&nbsp;background-position: 0%;<br>}<br><br>.btn-2:hover {<br>&nbsp;&nbsp;background-position: 100%;<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-2:active {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-position: 0%;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}'
  } else if (modalId == 3) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-3:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transform: scale(0);<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-3:hover:before {<br>&nbsp;&nbsp;transform: scale(1);<br>}<br><br>.btn-3:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-3:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-3:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}'
  } else if (modalId == 4) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: red;<br>}<br><br>.btn-4:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Change background-color to your preference;<br>&nbsp;&nbsp;transform: scale(1);<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-4:hover:before {<br>&nbsp;&nbsp;transform: scale(0);<br>}<br><br>.btn-4:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-4:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-4:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}'
  } else if (modalId == 5) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-5:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-5:hover:before {<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-5:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-5:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-5:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}';
  } else if (modalId == 6) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-6:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-6:hover:before {<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-6:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-6:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-6:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}';
  } else if (modalId == 7) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-7:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-7:hover:before {<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-7:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-7:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-7:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}';
  } else if (modalId == 8) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-8:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-8:hover:before {<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-8:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-8:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-8:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}';
  } else if (modalId == 9) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-9:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 50%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-9:hover:before {<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;right: 0%;<br>}<br><br>.btn-9:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-9:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br><br>.btn-9:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
  } else if (modalId == 10) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: red;<br>}<br><br>.btn-10:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Change background-color to your preference;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-10:hover:before {<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;right: 50%;<br>}<br><br>.btn-10:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-10:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-10:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
  } else if (modalId == 11) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-11:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 50%;<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-11:hover:before {<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;top: 0%;<br>}<br><br>.btn-11:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-11:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-11:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
  } else if (modalId == 12) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: red;<br>}<br><br>.btn-12:before {<br>&nbsp;&nbsp;content: "";<br >&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0%;<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Change background-color to your preference;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-12:hover:before {<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;top: 50%;<br>}<br><br>.btn-12:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-12:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-12:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
  } else if (modalId == 13) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background-color: transparent;<br>}<br><br>.btn-13:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-13:hover:before {<br>&nbsp;&nbsp;left: 0%;<br>&nbsp;&nbsp;right: auto;<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-13:before {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;right: 0px;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transition: all 500ms ease-in-out;<br>}<br><br>.btn-13:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-13:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
  } else if (modalId == 14) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background-color: transparent;<br>}<br><br>.btn-14:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-14:hover:before {<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;left: auto;<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-14:before {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;left: 0px;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transition: all 500ms ease-in-out;<br>}<br><br>.btn-14:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-14:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
  } else if (modalId == 15) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background-color: transparent;<br>}<br><br>.btn-15:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-15:hover:before {<br>&nbsp;&nbsp;bottom: 0%;<br>&nbsp;&nbsp;top: auto;<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-15:before {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;left: 0px;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transition: all 500ms ease-in-out;<br>}<br><br>.btn-15:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-15:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
  } else if (modalId == 16) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background-color: transparent;<br>}<br><br>.btn-16:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-16:hover:before {<br>&nbsp;&nbsp;top: 0%;<br>&nbsp;&nbsp;bottom: auto;<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-16:before {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0px;<br>&nbsp;&nbsp;left: 0px;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transition: all 500ms ease-in-out;<br>}<br><br>.btn-16:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-16:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
  } else if (modalId == 17) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;transition: all 0.3s ease-in-out 0s;<br>}<br><br>.btn-17:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 50%;<br>&nbsp;&nbsp;right: 50%;<br>&nbsp;&nbsp;border-radius: 20px;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;-webkit-transition: all 0.5s ease;<br>&nbsp;&nbsp;-moz-transition: all 0.5s ease;<br>&nbsp;&nbsp;-ms-transition: all 0.5s ease;<br>&nbsp;&nbsp;transform: translateX(50%) translateY(-50%) rotate(-45deg);<br>}<br><br>.btn-17:hover:before {<br>&nbsp;&nbsp;animation: btn-17 2s;<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>.btn-17:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: background-color 0.5s ease-in-out 0.8s;<br>}<br><br>@keyframes btn-17 {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;25% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 250%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;50% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 600%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;75% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;}<br><br>}';
  } else if (modalId == 18) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;transition: all 0.3s ease-in-out 0s;<br>}<br><br>.btn-18:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 50%;<br>&nbsp;&nbsp;right: 50%;<br>&nbsp;&nbsp;border-radius: 20px;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;-webkit-transition: all 0.5s ease;<br>&nbsp;&nbsp;-moz-transition: all 0.5s ease;<br>&nbsp;&nbsp;-ms-transition: all 0.5s ease;<br>&nbsp;&nbsp;transform: translateX(50%) translateY(-50%) rotate(45deg);<br>}<br><br>.btn-18:hover:before {<br>&nbsp;&nbsp;animation: btn-18 2s;<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>.btn-18:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: background-color 0.5s ease-in-out 0.8s;<br>}<br><br>@keyframes btn-18 {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;25% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 250%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;50% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 600%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;75% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;}<br><br>}';
  } else if (modalId == 19) {
    copyCSS.innerHTML += '&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-19:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;border-radius: 50%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;top: 50%;<br>&nbsp;&nbsp;left: 50%;<br>&nbsp;&nbsp;transform: translateX(-50%) translateY(-50%);<br>&nbsp;&nbsp;-webkit-transition: all 0.5s ease;<br>&nbsp;&nbsp;-moz-transition: all 1s ease;<br>&nbsp;&nbsp;-ms-transition: all 1s ease;<br>}<br><br>.btn-19:hover:before {<br>&nbsp;&nbsp;width: 110%;<br>&nbsp;&nbsp;height: 300px;<br>}<br><br>.btn-19:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-19:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-19:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
  } else if (modalId == 20) {
    copyCSS.innerHTML += '&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>.btn-20:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Change background-color to your preference;<br>&nbsp;&nbsp;width: 110%;<br>&nbsp;&nbsp;height: 300px;<br>&nbsp;&nbsp;border-radius: 50%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;top: 50%;<br>&nbsp;&nbsp;left: 50%;<br>&nbsp;&nbsp;transform: translateX(-50%) translateY(-50%);<br>&nbsp;&nbsp;-webkit-transition: all 0.5s ease;<br>&nbsp;&nbsp;-moz-transition: all 1s ease;<br>&nbsp;&nbsp;-ms-transition: all 1s ease;<br>}<br><br>.btn-20:hover:before {<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 0%;<br>}<br><br>.btn-20:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-20:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-20:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
  } else if (modalId == 21) {
    copyCSS.innerHTML = '.btn-21 {<br>&nbsp;&nbsp;cursor: pointer;<br>&nbsp;&nbsp;letter-spacing: 2px;<br>&nbsp;&nbsp;text-transform: uppercase;<br>&nbsp;&nbsp;font-family: Marvel;<br>&nbsp;&nbsp;font-size: 20pt;<br>&nbsp;&nbsp;width: 200px;<br>&nbsp;&nbsp;height: 45px;<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;color: #777;<br>&nbsp;&nbsp;z-index: 1;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;border-radius: 0px;<br>&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;padding: 0;<br>&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;border: none;<br>}<br><br>.btn-21:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-21-right 2s linear infinite;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>}<br><br>.btn-21:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-21-bottom 2s linear infinite;<br>&nbsp;&nbsp;animation-delay: 1s;<br>&nbsp;&nbsp;transform: translateY(-100%);<br>}<br><br>.btn-21 span {<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;padding: 4px;<br>}<br><br>.btn-21 span:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-21-left 2s linear infinite;<br>}<br><br>.btn-21 span:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-21-top 2s linear infinite;<br>&nbsp;&nbsp;animation-delay: 1s;<br>&nbsp;&nbsp;transform: translateY(-100%);<br>}<br><br>.btn-21:hover:before {<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, red);<br>}<br><br>.btn-21:hover:after {<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, red);<br>}<br><br>.btn-21 span:hover:before {<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, red);<br>}<br><br>.btn-21 span:hover:after {<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, red);<br>}<br><br>.btn-21:hover {<br>&nbsp;&nbsp;color: red;<br>}<br><br>.btn-21:active:before {<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, #00a7fc);<br>}<br><br>.btn-21:active:after {<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, #00a7fc);<br>}<br><br>.btn-21 span:active:before {<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, #00a7fc);<br>}<br><br>.btn-21 span:active:after {<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, #00a7fc);<br>}<br><br>.btn-21:active {<br>&nbsp;&nbsp;color: #00a7fc;<br>}<br><br>@keyframes btn-21-right {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateX(-100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateX(100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-21-top {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateY(100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateY(-100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-21-left {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateX(100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateX(-100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-21-bottom {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateY(-100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateY(100%);<br>&nbsp;&nbsp;}<br><br>}';
  } else if (modalId == 22) {
    copyCSS.innerHTML = '.btn-22 {<br>&nbsp;&nbsp;cursor: pointer;<br>&nbsp;&nbsp;letter-spacing: 2px;<br>&nbsp;&nbsp;text-transform: uppercase;<br>&nbsp;&nbsp;font-family: Marvel;<br>&nbsp;&nbsp;font-size: 20pt;<br>&nbsp;&nbsp;width: 200px;<br>&nbsp;&nbsp;height: 45px;<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;color: #777;<br>&nbsp;&nbsp;z-index: 1;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;border-radius: 0px;<br>&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;padding: 0;<br>&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;border: none;<br>}<br><br>.btn-22:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-22-right 2s linear infinite;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>}<br><br>.btn-22:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-22-bottom 2s linear infinite;<br>&nbsp;&nbsp;animation-delay: 1s;<br>&nbsp;&nbsp;transform: translateY(-100%);<br>}<br><br>.btn-22 span {<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;padding: 4px;<br>}<br><br>.btn-22 span:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-22-left 2s linear infinite;<br>}<br><br>.btn-22 span:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-22-top 2s linear infinite;<br>&nbsp;&nbsp;animation-delay: 1s;<br>&nbsp;&nbsp;transform: translateY(-100%);<br>}<br><br>.btn-22:hover:before {<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, red);<br>}<br><br>.btn-22:hover:after {<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, red);<br>}<br><br>.btn-22 span:hover:before {<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, red);<br>}<br><br>.btn-22 span:hover:after {<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, red);<br>}<br><br>.btn-22:hover {<br>&nbsp;&nbsp;color: red;<br>}<br><br>.btn-22:active:before {<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, #00a7fc);<br>}<br><br>.btn-22:active:after {<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, #00a7fc);<br>}<br><br>.btn-22 span:active:before {<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, #00a7fc);<br>}<br><br>.btn-22 span:active:after {<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, #00a7fc);<br>}<br><br>.btn-22:active {<br>&nbsp;&nbsp;color: #00a7fc;<br>}<br><br>@keyframes btn-22-right {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateX(-100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateX(100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-22-top {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateY(100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateY(-100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-22-left {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateX(100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateX(-100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-22-bottom {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateY(-100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateY(100%);<br>&nbsp;&nbsp;}<br><br>}';
  } else if (modalId == 23) {
    messageAnimation("My Favorite!! 😜", "#F1B139", "#333", 3);
    copyCSS.innerHTML += '&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;background-color: transparent;<br>}<br><br>.btn-23:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;left: 50%;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;border-radius: 23px;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-23:hover:before {<br>&nbsp;&nbsp;width: 120%;<br>&nbsp;&nbsp;left: -10%;<br>}<br><br>.btn-23:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-23:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-23:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-23:active {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}<br><br>.btn-23:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
  } else if (modalId == 24) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>.btn-24:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;width: 120%;<br>&nbsp;&nbsp;left: -10%;<br>&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Change background-color to your preference;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;border-radius: 23px;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-24:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-24:hover:before {<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;left: 50%;<br>}<br><br>.btn-24:active {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}<br><br>.btn-24:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
  } else if (modalId == 25) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-25:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;width: 50%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-25:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;width: 50%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-25:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-25:hover:before, .btn-25:hover:after {<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-25:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-25:active:before, .btn-25:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
  } else if (modalId == 26) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-26:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;width: 50%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-26:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;width: 50%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-26:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-26:hover:before, .btn-26:hover:after {<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-26:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-26:active:before, .btn-26:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
  } else if (modalId == 27) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-27:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 50%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-27:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0%;<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 50%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-27:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-27:hover:before, .btn-27:hover:after {<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-27:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-27:active:before, .btn-27:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
  } else if (modalId == 28) {
    copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-28:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 50%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-28:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0%;<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 50%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-28:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-28:hover:before, .btn-28:hover:after {<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-28:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-28:active:before, .btn-28:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
  }
  copyCSS.innerHTML += "<br><br>.btn-" + modalId + ":focus {<br>&nbsp;&nbsp;outline: none<br>}";
  modal.style.display = "block";
  setTimeout(function() {modal.style.opacity = "1";}, 1);
  document.documentElement.style.overflow = "hidden";
  showHTML();
}

function closeModal() {
  modal.style.opacity = "0";
  setTimeout(function() {modal.style.display = "none";}, 300);
  document.documentElement.style.overflow = "auto";
  copyCSS.scrollTo(0, 0);
  copyHTML.scrollTo(0, 0);
}

function showHTML() {
  if (selected == "CSS") {
    copyHTML.style.display = "block";
    copyCSS.style.display = "none";
    selected = "HTML";
    htmlButton.style.opacity = "1";
    cssButton.style.opacity = "0.5";
  }
}

function showCSS() {
  if (selected == "HTML") {
    copyHTML.style.display = "none";
    copyCSS.style.display = "block";
    selected = "CSS";
    cssButton.style.opacity = "1";
    htmlButton.style.opacity = "0.5";
  }
}

function copyText(copySelect) {
  if (clicked == false) {
    var copyTextareaValue;
    if (copySelect == "HTML") {
      copyTextareaValue = '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Marvel">\n\n<button class="btn-' + modalId + '">\n  <span>Click here</span>\n</button>';
      showHTML();
    } else if (copySelect == "CSS") {
      copyTextareaValue = copyCSS.innerHTML;
      copyTextareaValue = copyTextareaValue.replace(/<br>/g, "\n");
      copyTextareaValue = copyTextareaValue.replace(/&nbsp;/g, " ");
      showCSS();
    }
    messageAnimation(copySelect + " Copied!", "red", "#f1f1f1", 2);
    copyTextarea.value = copyTextareaValue;
    copyTextarea.style.display = "block";
    copyTextarea.select();
    copyTextarea.setSelectionRange(0, 99999);
    document.execCommand('copy');
    copyTextarea.setSelectionRange(0, 0);
    copyTextarea.blur();
    copyTextarea.style.display = "none";
  }
}

function messageAnimation(messageText, backgroundColor, color, duration) {
    clicked = true;
    copyMessage.innerHTML = messageText;
    copyMessage.style.left = "40px";
    copyMessage.style.opacity = "1";
    copyMessage.style.backgroundColor = backgroundColor;
    copyMessage.style.color = color;
    setTimeout(function() {copyMessage.style.left = "10px"}, 300);
    setTimeout(function() {copyMessage.style.bottom = "100px"; copyMessage.style.opacity = "0"}, duration * 1000);
    setTimeout(function() {copyMessage.style.left = "-250px"; copyMessage.style.bottom = "10px"; clicked = false;}, duration * 1000 + 300);
}

function onLoad() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  modalBox.style.width = width - 200 + "px";
  modalBox.style.height = height - 100 + "px";
  content[0].style.width = width - 220 + "px";
  content[0].style.height = height - 210 + "px";
  content[1].style.width = width - 220 + "px";
  content[1].style.height = height - 210 + "px";
  copyButton.style.left = (width - 425) / 2 + "px";
}

function onResize() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  modalBox.style.width = width - 200 + "px";
  modalBox.style.height = height - 100 + "px";
  content[0].style.width = width - 220 + "px";
  content[0].style.height = height - 210 + "px";
  content[1].style.width = width - 220 + "px";
  content[1].style.height = height - 210 + "px";
  copyButton.style.left = (width - 445) / 2 + "px"
}

animated_button.html

<body onload="onLoad()" onresize="onResize()">
  <h1 id="title" align="center">CSS Button Animation</h1>
  <h6 id="tip">Tap a button to copy its code</h6>
  <div id="button-container" class="button-container">
    <button id="btn1" class="btn-1"><span>Click here</span></button>
    <button id="btn2" class="btn-2"><span>Click here</span></button>
    <button id="btn3" class="btn-3"><span>Click here</span></button>
    <button id="btn4" class="btn-4"><span>Click here</span></button>
    <button id="btn5" class="btn-5"><span>Click here</span></button>
    <button id="btn6" class="btn-6"><span>Click here</span></button>
    <button id="btn7" class="btn-7"><span>Click here</span></button>
    <button id="btn8" class="btn-8"><span>Click here</span></button>
    <button id="btn9" class="btn-9"><span>Click here</span></button>
    <button id="btn10" class="btn-10"><span>Click here</span></button>
    <button id="btn11" class="btn-11"><span>Click here</span></button>
    <button id="btn12" class="btn-12"><span>Click here</span></button>
    <button id="btn13" class="btn-13"><span>Click here</span></button>
    <button id="btn14" class="btn-14"><span>Click here</span></button>
    <button id="btn15" class="btn-15"><span>Click here</span></button>
    <button id="btn16" class="btn-16"><span>Click here</span></button>
    <button id="btn17" class="btn-17"><span>Click here</span></button>
    <button id="btn18" class="btn-18"><span>Click here</span></button>
    <button id="btn19" class="btn-19"><span>Click here</span></button>
    <button id="btn20" class="btn-20"><span>Click here</span></button>
    <button id="btn21" class="btn-21"><span>Click here</span></button>
    <button id="btn22" class="btn-22"><span>Click here</span></button>
    <button id="btn23" class="btn-23"><span>Click here</span></button>
    <button id="btn24" class="btn-24"><span>Click here</span></button>
    <button id="btn25" class="btn-25"><span>Click here</span></button>
    <button id="btn26" class="btn-26"><span>Click here</span></button>
    <button id="btn27" class="btn-27"><span>Click here</span></button>
    <button id="btn28" class="btn-28"><span>Click here</span></button>
  </div>




  
  
  
  <!--

      Following code is for copying button code

  -->
  <div class="modal" id="modal">
    <button class="close"><span id="closeModal" class="material-icons" style="font-size: 30pt">close</span></button>
    <div id="modal-box" class="modal-box">
      <div class="modal-box-buttons" id="modal-box-buttons">
        <button id="html-button" class="modal-box-buttons-button" onclick="showHTML()">HTML</button><button style="opacity: 0.5" id="css-button" onclick="showCSS()" class ="modal-box-buttons-button">CSS</button>
      </div>
      <div id="copy">
        <div class="content" id="copy-html"></div>
        <div class="content css" id="copy-css"></div>
      </div>
      <div id="copy-button">
        <button id="copy-html" onclick="copyText('HTML')" title="Copy HTML">Copy HTML</button><button id="copy-css" onclick="copyText('CSS')" title='Copy CSS'>Copy CSS</button>
      </div>
    </div>
    <textarea id="copy-textarea" style="width: 100%; height: 100%; resize: none; z-index: 1; display: none"></textarea>
  </div>
  <div id="copy-message"></div>
  <div id="footer"><h4>Made by <a title="Yohaan Chokhany" href="https://www.codepen.io/yohaanchokhany/" target="_blank">Yohaan Chokhany</a></h4></div>
</body>

autoflip.scss

body{
	width: 100vw;
	height: 100vh;
	display: flex;
	position: relative;
	background: #1e1e24;
	align-items: center;
	justify-content: center;
}

$speed: 0.5s;

.btn-flip{
	opacity: 1;
	outline: 0;
	color: #fff;
	line-height: 40px;
	position: relative;
	text-align: center;
	letter-spacing: 1px;
	display: inline-block;
	text-decoration: none;
	font-family: 'Open Sans';
	text-transform: uppercase;
	
	&:hover{
		
		&:after{
			opacity: 1;
			transform: translateY(0) rotateX(0);
		}
		
		&:before{
			opacity: 0;
			transform: translateY(50%) rotateX(90deg);
		}
	}
	
	&:after{
		top: 0;
		left: 0;
		opacity: 0;
		width: 100%;
		color: #323237;
		display: block;
		transition: $speed;
		position: absolute;
		background: #adadaf;
		content: attr(data-back);
		transform: translateY(-50%) rotateX(90deg);
	}
	
	&:before{
		top: 0;
		left: 0;
		opacity: 1;
		color: #adadaf;
		display: block;
		padding: 0 30px;
		line-height: 40px;
		transition: $speed;
		position: relative;
		background: #323237;
		content: attr(data-front);
		transform: translateY(0) rotateX(0);
	}
}

autoflip_button.html

<a href="#" class="btn-flip" data-back="Back" data-front="Front"></a>

bubble_effect.js

$('.button--bubble').each(function() {
  var $circlesTopLeft = $(this).parent().find('.circle.top-left');
  var $circlesBottomRight = $(this).parent().find('.circle.bottom-right');

  var tl = new TimelineLite();
  var tl2 = new TimelineLite();

  var btTl = new TimelineLite({ paused: true });

  tl.to($circlesTopLeft, 1.2, { x: -25, y: -25, scaleY: 2, ease: SlowMo.ease.config(0.1, 0.7, false) });
  tl.to($circlesTopLeft.eq(0), 0.1, { scale: 0.2, x: '+=6', y: '-=2' });
  tl.to($circlesTopLeft.eq(1), 0.1, { scaleX: 1, scaleY: 0.8, x: '-=10', y: '-=7' }, '-=0.1');
  tl.to($circlesTopLeft.eq(2), 0.1, { scale: 0.2, x: '-=15', y: '+=6' }, '-=0.1');
  tl.to($circlesTopLeft.eq(0), 1, { scale: 0, x: '-=5', y: '-=15', opacity: 0 });
  tl.to($circlesTopLeft.eq(1), 1, { scaleX: 0.4, scaleY: 0.4, x: '-=10', y: '-=10', opacity: 0 }, '-=1');
  tl.to($circlesTopLeft.eq(2), 1, { scale: 0, x: '-=15', y: '+=5', opacity: 0 }, '-=1');

  var tlBt1 = new TimelineLite();
  var tlBt2 = new TimelineLite();
  
  tlBt1.set($circlesTopLeft, { x: 0, y: 0, rotation: -45 });
  tlBt1.add(tl);

  tl2.set($circlesBottomRight, { x: 0, y: 0 });
  tl2.to($circlesBottomRight, 1.1, { x: 30, y: 30, ease: SlowMo.ease.config(0.1, 0.7, false) });
  tl2.to($circlesBottomRight.eq(0), 0.1, { scale: 0.2, x: '-=6', y: '+=3' });
  tl2.to($circlesBottomRight.eq(1), 0.1, { scale: 0.8, x: '+=7', y: '+=3' }, '-=0.1');
  tl2.to($circlesBottomRight.eq(2), 0.1, { scale: 0.2, x: '+=15', y: '-=6' }, '-=0.2');
  tl2.to($circlesBottomRight.eq(0), 1, { scale: 0, x: '+=5', y: '+=15', opacity: 0 });
  tl2.to($circlesBottomRight.eq(1), 1, { scale: 0.4, x: '+=7', y: '+=7', opacity: 0 }, '-=1');
  tl2.to($circlesBottomRight.eq(2), 1, { scale: 0, x: '+=15', y: '-=5', opacity: 0 }, '-=1');
  
  tlBt2.set($circlesBottomRight, { x: 0, y: 0, rotation: 45 });
  tlBt2.add(tl2);

  btTl.add(tlBt1);
  btTl.to($(this).parent().find('.button.effect-button'), 0.8, { scaleY: 1.1 }, 0.1);
  btTl.add(tlBt2, 0.2);
  btTl.to($(this).parent().find('.button.effect-button'), 1.8, { scale: 1, ease: Elastic.easeOut.config(1.2, 0.4) }, 1.2);

  btTl.timeScale(2.6);

  $(this).on('mouseover', function() {
    btTl.restart();
  });
});

bubble_effect.scss

$dark-blue: #222;
$green: #90feb5;
$action-color: $green;

* {
  box-sizing: border-box;
}

div{
  display: block;
  height: 100%;
  animation: hue-rotate 10s linear infinite;
}

.button {
  -webkit-font-smoothing: antialiased;
  background-color: $dark-blue;
  border: none;
  color: #fff;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 100;
  text-decoration: none;
  user-select: none;
  letter-spacing: 1px;
  color: white;
  padding: 20px 40px;
  text-transform: uppercase;
  transition: all 0.1s ease-out;

  &:hover {
    background-color: $action-color;
    color: #fff;
  }
  
  &:active {
    transform: scale(0.95);
  }

  &--bubble {
    position: relative;
    z-index: 2;
    color: white;
    background: none;

    &:hover {
      background: none;
    }

    &:hover + .button--bubble__effect-container .circle {
      background: darken($action-color, 15%);
    }

    &:hover + .button--bubble__effect-container .button {
      background: darken($action-color, 15%);
    }

    &:active + .button--bubble__effect-container {
      transform: scale(0.95);
    }

    &__container {
      position: relative;
      display: inline-block;

      .effect-button {
        position: absolute;
        width: 50%;
        height: 25%;
        top: 50%;
        left: 25%;
        z-index: 1;
        transform: translateY(-50%);
        background: $dark-blue;
        transition: background 0.1s ease-out;
      }
    }
  }
}

.button--bubble__effect-container {
  position: absolute;
  display: block;
  width: 200%;
  height: 400%;
  top: -150%;
  left: -50%;
  -webkit-filter: url("#goo");
  filter: url("#goo");
  transition: all 0.1s ease-out;
  pointer-events: none;

  .circle {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 15px;
    background: $dark-blue;
    transition: background 0.1s ease-out;

    &.top-left {
        top: 40%;
        left: 27%;
    }

    &.bottom-right {
        bottom: 40%;
        right: 27%;
    }
  }
}

.goo {
  position: absolute;
  visibility: hidden;
  width: 1px;
  height: 1px;
}

html, body {
  width: 100%;
  height: 100%;
  text-align: center;
}

.button--bubble__container {
  top: 50%;
  margin-top: -25px;
}

@keyframes hue-rotate {
      from {
        -webkit-filter: hue-rotate(0);
        -moz-filter: hue-rotate(0);
        -ms-filter: hue-rotate(0);
        filter: hue-rotate(0);
      }
      to {
        -webkit-filter: hue-rotate(360deg);
        -moz-filter: hue-rotate(360deg);
        -ms-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg);
      }
}

bubble_effect_button.html

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="goo">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo"/>
    </filter>
  </defs>
</svg>

<span class="button--bubble__container">
  <a href="#campaign" class="button button--bubble">
    Hover me
  </a>
  <span class="button--bubble__effect-container">
    <span class="circle top-left"></span>
    <span class="circle top-left"></span>
    <span class="circle top-left"></span>

    <span class="button effect-button"></span>

    <span class="circle bottom-right"></span>
    <span class="circle bottom-right"></span>
    <span class="circle bottom-right"></span>
  </span>
</span>
</div>

bubbly.js

const animateButton = e => {
  e.preventDefault;
  //reset animation
  e.target.classList.remove('animate');
  e.target.classList.add('animate');

  setTimeout(() => {
    e.target.classList.remove('animate');
  }, 700);
};

const bubblyButtons = document.getElementsByClassName("bubbly-button");

for (let i = 0; i < bubblyButtons.length; i++) {
  bubblyButtons[i].addEventListener('click', animateButton, false);
}

bubbly.scss

$fuschia: #ff0081;
$button-bg: $fuschia;
$button-text-color: #fff;
$baby-blue: #f8faff;

body{
  font-size: 16px;
  font-family: 'Helvetica', 'Arial', sans-serif;
  text-align: center;
  background-color: $baby-blue;
}
.bubbly-button{
  font-family: 'Helvetica', 'Arial', sans-serif;
  display: inline-block;
  font-size: 1em;
  padding: 1em 2em;
  margin-top: 100px;
  margin-bottom: 60px;
  -webkit-appearance: none;
  appearance: none;
  background-color: $button-bg;
  color: $button-text-color;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
  
  &:focus {
    outline: 0;
  }
  
  &:before, &:after{
    position: absolute;
    content: '';
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
  }
  
  &:before{
    display: none;
    top: -75%;
    background-image:  
      radial-gradient(circle, $button-bg 20%, transparent 20%),
    radial-gradient(circle,  transparent 20%, $button-bg 20%, transparent 30%),
    radial-gradient(circle, $button-bg 20%, transparent 20%), 
    radial-gradient(circle, $button-bg 20%, transparent 20%),
    radial-gradient(circle,  transparent 10%, $button-bg 15%, transparent 20%),
    radial-gradient(circle, $button-bg 20%, transparent 20%),
    radial-gradient(circle, $button-bg 20%, transparent 20%),
    radial-gradient(circle, $button-bg 20%, transparent 20%),
    radial-gradient(circle, $button-bg 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
  //background-position: 0% 80%, -5% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 85% 30%;
  }
  
  &:after{
    display: none;
    bottom: -75%;
    background-image:  
    radial-gradient(circle, $button-bg 20%, transparent 20%), 
    radial-gradient(circle, $button-bg 20%, transparent 20%),
    radial-gradient(circle,  transparent 10%, $button-bg 15%, transparent 20%),
    radial-gradient(circle, $button-bg 20%, transparent 20%),
    radial-gradient(circle, $button-bg 20%, transparent 20%),
    radial-gradient(circle, $button-bg 20%, transparent 20%),
    radial-gradient(circle, $button-bg 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
  //background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
 
  &:active{
    transform: scale(0.9);
    background-color: darken($button-bg, 5%);
    box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
  }
  
  &.animate{
    &:before{
      display: block;
      animation: topBubbles ease-in-out 0.75s forwards;
    }
    &:after{
      display: block;
      animation: bottomBubbles ease-in-out 0.75s forwards;
    }
  }
}


@keyframes topBubbles {
  0%{
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
    50% {
      background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;}
 100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
  background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}

@keyframes bottomBubbles {
  0%{
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;}
 100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
  background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}

bubbly_button.html

<button class="bubbly-button">Click me!</button>

download.js

document.querySelectorAll('.button').forEach(button => {

    let duration = 3000,
        svg = button.querySelector('svg'),
        svgPath = new Proxy({
            y: null,
            smoothing: null
        }, {
            set(target, key, value) {
                target[key] = value;
                if(target.y !== null && target.smoothing !== null) {
                    svg.innerHTML = getPath(target.y, target.smoothing, null);
                }
                return true;
            },
            get(target, key) {
                return target[key];
            }
        });

    button.style.setProperty('--duration', duration);

    svgPath.y = 20;
    svgPath.smoothing = 0;

    button.addEventListener('click', e => {
        
        e.preventDefault();

        if(!button.classList.contains('loading')) {

            button.classList.add('loading');

            gsap.to(svgPath, {
                smoothing: .3,
                duration: duration * .065 / 1000
            });

            gsap.to(svgPath, {
                y: 12,
                duration: duration * .265 / 1000,
                delay: duration * .065 / 1000,
                ease: Elastic.easeOut.config(1.12, .4)
            });

            setTimeout(() => {
                svg.innerHTML = getPath(0, 0, [
                    [3, 14],
                    [8, 19],
                    [21, 6]
                ]);
            }, duration / 2);

        }

    });

});

function getPoint(point, i, a, smoothing) {
    let cp = (current, previous, next, reverse) => {
            let p = previous || current,
                n = next || current,
                o = {
                    length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
                    angle: Math.atan2(n[1] - p[1], n[0] - p[0])
                },
                angle = o.angle + (reverse ? Math.PI : 0),
                length = o.length * smoothing;
            return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
        },
        cps = cp(a[i - 1], a[i - 2], point, false),
        cpe = cp(point, a[i - 1], a[i + 1], true);
    return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}

function getPath(update, smoothing, pointsNew) {
    let points = pointsNew ? pointsNew : [
            [4, 12],
            [12, update],
            [20, 12]
        ],
        d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '');
    return `<path d="${d}" />`;
}

download.scss

.button {
    &.dark-single {
        --background: none;
        --rectangle: #242836;
        --success: #4BC793;
    }
    &.white-single {
        --background: none;
        --rectangle: #F5F9FF;
        --arrow: #275efe;
        --success: #275efe;
        --shadow: rgba(10, 22, 50, .1);
    }
    &.dark {
        --background: #242836;
        --rectangle: #1C212E;
        --arrow: #F5F9FF;
        --text: #F5F9FF;
        --success: #2F3545;
    }
}

.button {
    --background: #275efe;
    --rectangle: #184fee;
    --success: #{mix(white, #184fee, 20%)};
    --text: #fff;
    --arrow: #fff;
    --checkmark: #fff;
    --shadow: rgba(10, 22, 50, .24);
    display: flex;
    overflow: hidden;
    text-decoration: none;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    background: var(--background);
    border-radius: 8px;
    box-shadow: 0 2px 8px -1px var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    &:active {
        transform: scale(.95);
        box-shadow: 0 1px 4px -1px var(--shadow);
    }
    ul {
        margin: 0;
        padding: 16px 40px;
        list-style: none;
        text-align: center;
        position: relative;
        backface-visibility: hidden;
        font-size: 16px;
        font-weight: 500;
        line-height: 28px;
        color: var(--text);
        li {
            &:not(:first-child) {
                top: 16px;
                left: 0;
                right: 0;
                position: absolute;
            }
            &:nth-child(2) {
                top: 76px;
            }
            &:nth-child(3) {
                top: 136px;
            }
        }
    }
    & > div {
        position: relative;
        width: 60px;
        height: 60px;
        background: var(--rectangle);
        &:before,
        &:after {
            content: '';
            display: block;
            position: absolute;
        }
        &:before {
            border-radius: 1px;
            width: 2px;
            top: 50%;
            left: 50%;
            height: 17px;
            margin: -9px 0 0 -1px;
            background: var(--arrow);
        }
        &:after {
            width: 60px;
            height: 60px;
            transform-origin: 50% 0;
            border-radius: 0 0 80% 80%;
            background: var(--success);
            top: 0;
            left: 0;
            transform: scaleY(0);
        }
        svg {
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            left: 50%;
            top: 50%;
            margin: -9px 0 0 -10px;
            fill: none;
            z-index: 1;
            stroke-width: 2px;
            stroke: var(--arrow);
            stroke-linecap: round;
            stroke-linejoin: round;
        }
    }
    &.loading {
        ul {
            animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
        }
        & > div {
            &:before {
                animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
            }
            &:after {
                animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
            }
            svg {
                animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
            }
        }
    }
}

@keyframes text {
    10%,
    85% {
        transform: translateY(-100%);
    }
    95%,
    100% {
        transform: translateY(-200%);
    }
}

@keyframes line {
    5%,
    10% {
        transform: translateY(-30px);
    }
    40% {
        transform: translateY(-20px);
    }
    65% {
        transform: translateY(0);
    }
    75%,
    100% {
        transform: translateY(30px);
    }
}

@keyframes svg {
    0%,
    20% {
        stroke-dasharray: 0;
        stroke-dashoffset: 0;
    }
    21%,
    89% {
        stroke-dasharray: 26px;
        stroke-dashoffset: 26px;
        stroke-width: 3px;
        margin: -10px 0 0 -10px;
        stroke: var(--checkmark);
    }
    100% {
        stroke-dasharray: 26px;
        stroke-dashoffset: 0;
        margin: -10px 0 0 -10px;
        stroke: var(--checkmark);
    }
    12% {
        opacity: 1;
    }
    20%,
    89% {
        opacity: 0;
    }
    90%,
    100% {
        opacity: 1;
    }
}

@keyframes background {
    10% {
        transform: scaleY(0);
    }
    40% {
        transform: scaleY(.15);
    }
    65% {
        transform: scaleY(.5);
        border-radius: 0 0 50% 50%;
    }
    75% {
        border-radius: 0 0 50% 50%;
    }
    90%,
    100% {
        border-radius: 0;
    }
    75%,
    100% {
        transform: scaleY(1);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    font-family: 'Roboto', Arial;
    justify-content: center;
    align-items: center;
    background: #E4ECFA;
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        & > div {
            flex-basis: 100%;
            width: 0;
        }
        .button {
            margin: 16px;
            @media(max-width: 400px) {
                margin: 12px;
            }
        }
    }
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}

download_button.html

<div class="container">

    <a href="" class="button">
        <ul>
            <li>&#68;ownload</li>
            <li>&#68;ownloading</li>
            <li>Open File</li>
        </ul>
        <div>
            <svg viewBox="0 0 24 24"></svg>
        </div>
    </a>

    <a href="" class="button dark-single">
        <div>
            <svg viewBox="0 0 24 24"></svg>
        </div>
    </a>

    <div></div>

    <a href="" class="button white-single">
        <div>
            <svg viewBox="0 0 24 24"></svg>
        </div>
    </a>

    <a href="" class="button dark">
        <ul>
            <li>&#68;ownload</li>
            <li>&#68;ownloading</li>
            <li>Open File</li>
        </ul>
        <div>
            <svg viewBox="0 0 24 24"></svg>
        </div>
    </a>

</div>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/7299868-Download-Buttons" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>

fizzy.scss

@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,700,500,400italic,500italic,700italic,300italic);

body{
    background: #2C3940;
    overflow:hidden;
    font-family: 'Fira Sans', sans-serif;
    a{
        color:white;
        padding-top:20px;
        font-size:10px;
        opacity:0.6;
        position:relative;
        top:10px;
        transition:all .3s;
        font-weight:100;
        text-decoration:none;
        &:hover{
            opacity:1;

        }
        i.l{
            margin-right:3px;
        }
    }
}
input{
    display:none;
}

input:checked + label{
    .button_inner{
        background:transparent;
        transform:rotate(90deg);
        width:100px;
        border-radius:100px;
        box-shadow:0px 0px 0px 440px rgba(0,0,0,0);
        animation: finalbox .4s 4.42s cubic-bezier(0.39, 2.01, 0.27, 0.75) forwards;
        span.t{
            opacity:0;
            top:20px;
        }
    }
    i.l{
        left:14px;
        opacity:1;
        top:11px;
        animation:down 1s .25s infinite,final .2s 4s forwards;
    }
    .tick{
        position: absolute;
        left: 2px;
        right: 0;
        transform:scale(0) rotate(-90deg);
        color: #00C1FC;
        top: 11px;
        margin: auto;
        font-size: 22px;
        animation: tick .3s 4.7s forwards;
    }
    .button_spots{
        opacity:1;
        @for $i from 0 through 60{
            &:nth-of-type(#{$i}){
                top:(16px - random(10)) - 0 !important;
                left:-34px  !important;
                opacity:0;
                padding:random(20)/4 + 2 + px !important;
                animation:spew 1s .3s forwards,rotate 4s + random(4)/10 .25s + random(12)/10 linear infinite ,final .2s 4s forwards,spot-#{$i} .7s .4/random(10) + random(10)/10 + 10s linear infinite !important;
            }
        }

    }
}
.tick{
    position:absolute;
    left:-40;
    right:0;
    transform:scale(0);
    margin:auto;
    font-size:22px;
}
.button{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    margin:auto;
    text-align:Center;
    height:360px;
    width:200px;
    transform:translateY(-50%);
    h1{
        font-weight:100;
        color:White;
        font-size:24px;
        margin:0;
        text-transform:uppercase;
    }
    h2{
        font-weight:100;
        color:#00C4FF;
        opacity:1;
        font-size:14px;
        margin:4px 0px 0px 0px;
    }
    .b_l_quad .button_spots{
        @for $i from 1 through 20{
            &:nth-child(#{$i}){
                padding:random(3) + 2 + px;
                left: -25 + ($i * 12) + px;
                top: 50 + px;
            }
        }
        @for $i from 20 through 40{
            &:nth-child(#{$i}){
                padding:random(3) + 2 + px;
                left: -255 + ($i * 12) + px;
                top: -12 + px;
            }
        }
        @for $i from 40 through 46{
            &:nth-child(#{$i}){
                padding:random(3) + 2 + px;
                left: 204px;
                top: -488 + ($i * 12) + px;
            }
        }

        @for $i from 46 through 52{
            &:nth-child(#{$i}){
                padding:random(3) + 2 + px;
                left: -10px;
                top: -568 + ($i * 12) + px;
            }
        }
    }
    .button_spots{
        position:absolute;
        border-radius:100px;
        background:green;
        opacity:0;
        animation:opacity 1s;
        @for $i from 1 through 52{
            &:nth-of-type(#{$i}){
                transform-origin:90px - random(10) 20px - random(10);
                background:hsla(350 + random(399) ,57% - random(10) ,65%,1);
                box-shadow:0px 0px 10px rgba(255,255,255,0.12);
                transition:all 1s + random(10)/10;
            }
        }
    }
    &_inner{
        //overflow:hidden;
        border-radius:2px;
        position:absolute;
        width:200px;
        height:50px;
        left:0;
        right:0;
        top:50%;
        margin:auto;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.04);
        font-weight: 100;
        font-size: 12px;
        cursor:pointer;
        border: 2px solid #FFFFFF;
        color: white;
        text-align: Center;
        transition:all .3s,box-shadow .2s,transform .2s .2s;
        span.t{
            position:relative;
            top:6px;
            opacity:1;
            left:-10px;
            transition:left .4s .1s;


        }
        i.l{
            position: relative;
            left: -19px;
            top: 20px;
            color: #00C4FF;
            font-size: 25px;
            opacity: 0;
            transition: left .3s 0s,top .3s 0s,opacity .3s 0s;
        }
        &:hover{
            color:#2C3940;
            background: white;
            box-shadow: 0px 17px 18px -14px rgba(0, 0, 0, 0.08);
            span.t{
                left:16px;
                transition:left .4s;
            }
            i.l{
                top:12px;
                opacity:1;
                transition: left .3s 0s,top .3s .1s,opacity .3s .1s;
            }
        }
        &:hover .button_spots{
            @for $i from 1 through 19{
                &:nth-of-type(#{$i}){
                    animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
                }
            }
            @for $i from 20 through 40{
                &:nth-of-type(#{$i}){
                    animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
                }
            }
            @for $i from 40 through 46{
                &:nth-of-type(#{$i}){
                    animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
                }
            }
            @for $i from 46 through 54{
                &:nth-of-type(#{$i}){
                    animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
                }
            }
        }
    }
}

@for $i from 1 through 20{
    @keyframes spot-#{$i}{
        from{opacity:0;}
        to{transform:translateY(30px) translatex(-20px + $i*2);opacity:.6;}
    }
}
@for $i from 20 through 40{
    @keyframes spot-#{$i}{
        from{opacity:0;}
        to{transform:translateY(-30px) translatex(-50px + $i*2);opacity:.6;}
    }
}
@for $i from 40 through 45{
    @keyframes spot-#{$i}{
        from{opacity:0;}
        to{transform:translateY(-86px + $i*2) translatex(40px);opacity:.6;}
    }
}
@for $i from 46 through 54{
    @keyframes spot-#{$i}{
        from{opacity:0;}
        to{transform:translateY(-99px + $i*2) translatex(-40px);opacity:.6;}
    }
}

@keyframes opacity{
    from{}
    to{opacity:0;}
}

@keyframes rotate{
    from{opacity:.8}
    to{transform:rotate(360deg);opacity:.8}
}

@keyframes down{
    from{left:10px;}
    to{left:57px;}
}

@keyframes spew{
    from{opacity:0;}
    to{opacity:0.8;}
}

@keyframes final{
    from{opacity:1;}
    to{opacity:0;}
}
@keyframes finalbox{
    from{}
    to{width:50px;}
}
@keyframes tick{
    from{}
    to{transform:scale(1) rotate(-90deg)}
}

fizzy_button.html

<div class='button'>
  <h1>Fizzy CSS Button</h1>
  <h2>With super fizzy particle action</h2>
  <a href='https://www.codepen.io/jcoulterdesign'>
    <i class='ion-social-codepen'></i>
    <span>More Codepen shenanigans</span>
  </a>
  <input id='button' type='checkbox'>
  <label for='button'>
    <div class='button_inner q'>
      <i class='l ion-log-in'></i>
      <span class='t'>Downloads</span>
      <span>
        <i class='tick ion-checkmark-round'></i>
      </span>
      <div class='b_l_quad'>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
      </div>
    </div>
  </label>
</div>

flip.js

function flipCover (css, options) {
  var options = options || {}
  if (typeof css === "object") {
    options = css
  } else {
    options.css = css
  }

  var css = options.css
  var url = options.url
  var text = options.text || css
  var width = options.width
  var height = options.height

  var $section = $(".flip-cover-" + css).addClass(css + "-section")
  var $button = $("<div>").addClass(css + "-button")
  var $cover = $("<div>").addClass(css + "-cover")
  var $outer = $("<div>").addClass(css + "-outer")
  var $inner = $("<div>").addClass(css + "-inner")

  if (width) {
    $section.css("width", width)
  }

  if (height) {
    $section.css("height", height)

    var lineHeight = ':after{ line-height: ' + height + ';}'
    var $outerStyle = $('<style>').text('.' + css + '-outer' + lineHeight)
    $outerStyle.appendTo($outer)
    var $innerStyle = $('<style>').text('.' + css + '-inner' + lineHeight)
    $innerStyle.appendTo($inner)
  }

  $cover.html($outer)
  $inner.insertAfter($outer)

  $button.html($("<a>").text(text).attr("href", url))

  $section.html($button)
  $cover.insertAfter($button)
 }



flipCover({
  css: "dribbble",
  url: "https://dribbble.com/vveleva",
  text: "vveleva",
  width: "80px"
})

flipCover("twiter", {
  url: "https://twitter.com/vveleva",
  text: "vveleva",
  width: "80px"
})

flipCover("linkedin", {
  url: "https://linkedin.com/in/vveleva",
  text: "vveleva",
  width: "80px"
})

flipCover("email", {
  text: "vvveleva @gmail",
  width: "80px",
  height: "50px"
})

flip.scss

html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: -webkit-radial-gradient(
    center top, circle farthest-corner,
    #FFF 0%, #D8DFE9 100%);
  background-image: radial-gradient(
    circle farthest-corner at center top,
    #FFF 0%, #D8DFE9 100%);
  overflow: hidden;
}

@font-face {
  font-family: icon;
  src: url('https://bennettfeely.com/fonts/icons.woff');
}

@include flip-cover("dribbble", "d", #FC1786);
@include flip-cover("twiter", "t", #2EC8FA);
@include flip-cover("linkedin", "in", #2672ae);
@include flip-cover("email", "g", #f80);

flip_button.html

<div class="flip-cover-dribbble"></div>
<div class="flip-cover-twiter"></div>
<div class="flip-cover-linkedin"></div>
<div class="flip-cover-email"></div>

hover.scss

$icon-size	  : 60px;
$border-radius: 0.5;//15% = 0.15, 50% = 0.50 etc.

$background   : #2d2c3e;
$background-b : #2d2c3e;

// Icon Colors
$green        : #16A085;
$red          : #C82647;
$green-l      : #8CC63F;
$orange       : #EB9532;
$purple       : #7E3661;

// Text
$white		  : #FFFFFF;

body{
	background: $background-b;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
	z-index: -1;
}

.container{
	display: table;
	height: 95vh;
	width: 90%;
	padding-bottom: 5vh;
	margin: auto auto;
	@media (max-width: 900px){
	}
	background: $background;
	z-index: -1;
}

.content{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

h1{
	font-family: 'Lato', sans-serif;
	font-size: 36px;
	font-weight: 300;
	color: $white;
}

.icon-container{
	margin-top: 30px;
	width: 100%;
	height: $icon-size;
}

.icon{
	cursor: pointer;
	position: relative;
	display: inline-block;
	width: $icon-size;
	height: $icon-size;
	margin-left: $icon-size/5;
	margin-right: $icon-size/5;
	border-radius: $icon-size*$border-radius;
	overflow: hidden;
	&::before, &::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		transition: all 0.25s ease;
		border-radius: $icon-size*$border-radius;
	}
	i{
		position: relative;
		color: $white;
		font-size: $icon-size/2;
		margin-top: $icon-size/4;
		transition: all 0.25s ease;
	}
}

.icon-fill{
	&::before{
		transition-duration: 0.5s;
		box-shadow: inset 0 0 0 1px $green;
	}
	&:hover::before{
		box-shadow: inset 0 0 0 $icon-size $green;
	}
}

.icon-enter{
	&::after{
		box-shadow: inset 0 0 0 1px $orange;
	}
	&::before{
		border-radius: 0;
		margin-left: -100%;
		box-shadow: inset 0 0 0 $icon-size $orange;
	}
	&:hover::before{
		margin-left: 0;
	}
}

.icon-expand{
	&::after{
		box-shadow: inset 0 0 0 1px $red;
	}
	&::before{
		background: $red;
		box-shadow: inset 0 0 0 $icon-size $background;
	}
	&:hover::before{
		box-shadow: inset 0 0 0 1px $background;
	}
}

.icon-collapse{
	&::before{
		border-radius: 0;
	}
	&:hover::before{
		box-shadow: 
		inset 0 $icon-size/2 0 0 $green-l,
		inset 0 $icon-size/-2 0 0 $green-l;
	}
	&::after{
		box-shadow: inset 0 0 0 1px $green-l;
	}
}

.icon-rotate{
	box-shadow: inset 0 0 0 1px $purple;
	&::after, &::before{
		border: 0px solid transparent;
	}
	&:hover::before{
		transition:
			border-top-width 0.3s ease,
			border-top-color 0.3s ease;
		border-width: $icon-size;
		border-top-color: $purple;
	}
	&:hover::after{
		transition:
			border-left-width 0.3s ease,
			border-left-color 0.3s ease;
		border-width: $icon-size;
		border-left-color: $purple;
	}
	&:hover{
		transition: background 0.001s ease 0.3s;
		background: $purple;
	}
	i{
		z-index: 1;
	}
}

hover_button.html

<div class="container">
  <div class="content">
    <h1>CSS3 Icons</h1>
    <div class="icon-container">
      <div class="icon icon-fill"><i class="fa fa-home"></i></div>
      <div class="icon icon-enter"><i class="fa fa-user"></i></div>
      <div class="icon icon-expand"> <i class="fa fa-bars"></i></div>
      <div class="icon icon-collapse"><i class="fa fa-sign-in"></i></div>
      <div class="icon icon-rotate"><i class="fa fa-phone"></i></div>
    </div>
  </div>
</div>

hover_effects.js

$(function() {  
  $('.btn-6')
    .on('mouseenter', function(e) {
			var parentOffset = $(this).offset(),
      		relX = e.pageX - parentOffset.left,
      		relY = e.pageY - parentOffset.top;
			$(this).find('span').css({top:relY, left:relX})
    })
    .on('mouseout', function(e) {
			var parentOffset = $(this).offset(),
      		relX = e.pageX - parentOffset.left,
      		relY = e.pageY - parentOffset.top;
    	$(this).find('span').css({top:relY, left:relX})
    });
});

hover_effects.scss

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);

$btn-width: 250px !default;
$btn-height: 80px !default;
$btn-full: $btn-height+$btn-width !default;
$btn-half: $btn-full/2 !default;
$bg-color: #eeeeee !default;

html {
  padding-top: 50px;
  font-family: 'Open Sans', Helvetica, arial, sans-serif;
  text-align: center;
  background-color: $bg-color;

  *,
  *:before,
  *:after {
    box-sizing: border-box;
    transition: 0.5s ease-in-out;
  }

  i,em,
  b,strong,
  span {
    transition: none;
  }
}

*:before,
*:after {
  z-index: -1;
}

h1,
h4 {
  font-family: 'Raleway', 'Open Sans', sans-serif;
  margin: 0;
  line-height: 1;
}

a {
  text-decoration: none;
  line-height: $btn-height;
  color: black;
}

.centerer {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1rem
}

@media (min-width: 600px) {
  .wrap {
    width: 50%;
    float: left;
  }
}

[class^="btn-"] {
  position: relative;
  display: block;
  overflow: hidden;
  @include size(100%, $btn-height);
  max-width: $btn-width;
  margin: 1rem auto;
  text-transform: uppercase;
  border: 1px solid currentColor;
}

.btn-0 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);

  &:before {
    content: '';
    @include absolute(0,0,0,0);
    background-color: $btn-color-dark;
    transform: translateX(-100%);
  }

  &:hover {
    color: tint($btn-color, 75%);

    &:before {
      transform: translateX(0);
    }
  }
}

.btn-1 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);
  
  &:before {
    content: '';
    @include absolute(0,-50px,0,0);
    border-right: 50px solid transparent;
    border-bottom: $btn-height solid $btn-color-dark;
    transform: translateX(-100%);
  }

  &:hover {
    color: tint($btn-color, 75%);

    &:before {
      transform: translateX(0);
    }
  }
}

.btn-1-2 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);
  
  &:before,
  &:after {
    content: '';
    @include absolute(0,0,0,0);
    border-bottom: $btn-height solid $btn-color-dark;
  }
  
  &:before {
    right: -50px;
    border-right: 50px solid transparent;
    transform: translateX(-100%);
  }
  
  &:after {
    left: -50px;
    border-left: 50px solid transparent;
    transform: translateX(100%);
  }

  &:hover {
    color: tint($btn-color, 75%);

    &:before { transform: translateX(-40%); }
    &:after { transform: translateX(40%); }
  }
}

.btn-2 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);
  
  &:before,
  &:after {
    content: '';
    @include absolute(0,0,0,0);
  }

  &:before {
    right: -50px;
    border-right: 50px solid transparent;
    border-bottom: $btn-height solid $btn-color-dark;
    transform: translateX(-100%);
  }
  
  &:after {
    left: -50px;
    border-left: 50px solid transparent;
    border-top: $btn-height solid $btn-color-dark;
    transform: translateX(100%);
  }

  &:hover {
    color: tint($btn-color, 75%);

    &:before { transform: translateX(-49%); }
    &:after { transform: translateX(49%); }
  }
}

.btn-3 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);

  &:before,
  &:after {
    content: '';
    @include absolute(0,0,0,0);
    border-top: $btn-height/2 solid $btn-color-dark;
    border-bottom: $btn-height/2 solid $btn-color-dark;
  }
  
  &:before {
    border-right: $btn-height/2 solid transparent;
    transform: translateX(-100%);
  }

  &:after {
    border-left: $btn-height/2 solid transparent;
    transform: translateX(100%);
  }

  &:hover {
    color: tint($btn-color, 75%);
    
    &:before { transform: translateX(-30%); }    
    &:after { transform: translateX(30%); }
  }
}

.btn-4 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);
  
  &:before,
  &:after,
  span:before,
  span:after {
    content: '';
    @include absolute(0,0,0,0);
    background-color: $btn-color-dark;
  }
  
  &:before { transform: translate(-100%, -100%); }
  &:after { transform: translate(-100%, 100%); }
  span:before { transform: translate(100%, -100%); }
  span:after { transform: translate(100%, 100%); }
  
  &:hover {
    color: tint($btn-color, 75%);

    &:before { transform: translate(-50%, -50%); }
    &:after { transform: translate(-50%, 50%); }
    span:before { transform: translate(50%, -50%); }
    span:after { transform: translate(50%, 50%); }
  }
}

.btn-5 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
	color: tint($btn-color);
  @include triangle(up-right, 0, $btn-color-dark, true);
  @include triangle(down-left, 0, $btn-color-dark, true, before);

  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0 solid;
    transform: rotate(360deg);
  }
  
  &:before {
    bottom: 0;
    left: 0;
    border-color: transparent transparent transparent $btn-color-dark;
  }

  &:after {
    top: 0;
    right: 0;
    border-color: transparent $btn-color-dark transparent transparent;
  }

  &:hover {
    color: tint($btn-color, 75%);
    
    &:before,
    &:after {
      border-width: $btn-height $btn-width*1.05;
    }
  }
}

.btn-6 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
	color: tint($btn-color);
  
  span {
    @include absolute();
    display: block;
    @include size(0);
    border-radius: 50%;
    background-color: $btn-color-dark;
    transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  
  &:hover {
    color: tint($btn-color, 75%);
    
    span {
      @include size(225%, $btn-width*2.25);
    }
  }
  
  &:active {
    background-color: $btn-color;
  }
}

.btn-7 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);
  
  &:before,
  &:after,
  span:before,
  span:after {
    content: '';
    @include absolute(0);
    @include size(25.25%, 0);
    background-color: $btn-color-dark;
  }
  
  &:before { left: 0; }
  &:after { left: 50%; }
  
  span {
    &:before,
    &:after {
      top: auto;
      bottom: 0;
    }
    
    &:before { left: 25%; }
    &:after { left: 75%; }
  }
  
  &:hover {
    color: tint($btn-color, 75%);
    
    &:before,
    &:after,
    span:before,
    span:after {
      height: $btn-height;
    }
  }
}

.btn-8 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);
  
  &:before,
  &:after {
    content: '';
    @include absolute(0,0,0,0);
    background-color: $btn-color-dark;
  }
  
  &:before { transform: translateY(-100%); }
  &:after { transform: translateY(100%); }
  
  &:hover {
    color: tint($btn-color, 75%);
    
    &:before { transform: translateY(-50%); }
    &:after { transform: translateY(50%); }
  }
}

.btn-9 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);
  
  &:before,
  &:after,
  span:before,
  span:after {
    content: '';
    @include absolute(0,null,null,0);
    @include size(100%, 0);
    background-color: rgba($btn-color-dark, 0.25);
    transition: 0.4s ease-in-out;
  }
  
  &:after,
  span:before {
    top: auto;
    bottom: 0;
  }
  
  span:before,
  span:after {
    transition-delay: 0.4s;
  }
  
  &:hover {
    color: tint($btn-color, 75%);
    
    &:before,
    &:after,
    span:before,
    span:after {
      height: $btn-height;
    }
  }
  
  &:active {
    background-color: $btn-color;
  }
}

.btn-10 {
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);
  
  &:before,
  &:after,
  span:before,
  span:after {
    content: '';
    @include absolute(0,null,null,0);
    @include size(0, $btn-height);
    background-color: rgba($btn-color-dark, 0.25);
    transition: 0.4s;
  }
  
  &:after,
  span:before {
    left: auto;
    right: 0;
  }
  
  span:before,
  span:after {
    transition-delay: 0.4s;
  }
  
  &:hover {
    color: tint($btn-color, 75%);
    
    &:before,
    &:after,
    span:before,
    span:after {
      width: $btn-width;
    }
  }
  
  &:active {
    background-color: $btn-color;
  }
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    @include size(20px);
  }
  100% {
    left: 50%;
    @include size($btn-width*1.5);
  }
}

@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    @include size(20px);
  }
  100% {
    right: 50%;
    @include size($btn-width*1.5);
  }
}

.btn-11 {
  position: relative;
  $btn-color: random-color($max:200);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);
  
  &:before,
  &:after {
    @include absolute(50%);
    content: '';
    @include size(20px);
    background-color: $btn-color;
    border-radius: 50%;
  }
  
  &:before {
    left: -20px;
    transform: translate(-50%, -50%);
    // animation: criss-cross-left 0.8s reverse;
  }
  
  &:after {
    right: -20px;
    transform: translate(50%, -50%);
    // animation: criss-cross-right 0.8s reverse;
  }
  
  &:hover {
    color: tint($btn-color, 75%);

    &:before,
    &:after {
      // @include size($btn-width);
    }
    
    &:before {
      animation: criss-cross-left 0.8s both;
      animation-direction: alternate;
    }
    
    &:after {
      animation: criss-cross-right 0.8s both;
      animation-direction: alternate;
    }
  }
}

hover_effects_buttons.html

<div class="centerer">
  <h1>Just Some More</h1>
  <h1>Button Hover Effects</h1>
  <h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>

  <div class="wrap">
    <a class="btn-0" href="#">Swipe</a>
    <a class="btn-1" href="#">Diagonal Swipe</a>
    <a class="btn-1-2" href="#">Double Swipe</a>
    <a class="btn-2" href="#">Diagonal Close</a>
    <a class="btn-3" href="#"><span>Zoning In</span></a>
    <a class="btn-4" href="#"><span>4 Corners</span></a>
    <a class="btn-5" href="#">Slice</a>
  </div>
  <div class="wrap">
    <a class="btn-6" href="#">Position Aware<span></span></a>
    <a class="btn-7" href="#"><span>Alternate</span></a>
    <a class="btn-8" href="#">Smoosh</a>
    <a class="btn-9" href="#"><span>Vertical Overlap</span></a>
    <a class="btn-10" href="#"><span>Horizontal Overlap</span></a>
    <a class="btn-11" href="#">Collision</a>
  </div>
</div>

ink.scss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
}

.button-container {
  position: relative;
  width: 300px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40vh;
  overflow: hidden;
  transition: 0.5s;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.button-container button {
  width: 101%;
  height: 100%;
  font-family: "Monument Extended", sans-serif;
  font-size: 40px;
  background: #fff;
  -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
  mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
  -webkit-mask-size: 2300% 100%;
  mask-size: 2300% 100%;
  border: none;
  color: #000;
  cursor: pointer;
  animation: anim2 0.7s steps(22) forwards;
}

.button-container button:hover {
  animation: anim1 0.7s steps(22) forwards;
}

.mask {
  position: absolute;
  color: #fff;
  text-align: center;
  width: 101%;
  font-family: "Monument Extended", sans-serif;
  font-weight: lighter;
  font-size: 40px;
  margin-top: 25px;
  overflow: hidden;
}

@keyframes anim1 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes anim2 {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

ink_button.html

<div class="container">
  <div class="button-container">
    <span class="mask">HOVER</span>
    <button type="button" name="Hover">HOVER</button>
  </div>
</div>

lightswitch.scss

@import "compass/css3";

*, *:after, *:before { 
  box-sizing: border-box;
}

#switch {
   visibility:hidden;
  clip:rect(0 0 0 0);
  position: absolute;
  left: 9999px;
}

.switch {
  display: block;
  width: 130px;
  height: 60px;
  margin: 70px auto; 
  position: relative;
  background: #ced8da; /* Old browsers */
  background: -moz-linear-gradient(left,  #ced8da 0%, #d8e0e3 29%, #ccd4d7 34%, #d4dcdf 62%, #fff9f4 68%, #e1e9ec 74%, #b7bfc2 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ced8da), color-stop(29%,#d8e0e3), color-stop(34%,#ccd4d7), color-stop(62%,#d4dcdf), color-stop(68%,#fff9f4), color-stop(74%,#e1e9ec), color-stop(100%,#b7bfc2)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* IE10+ */
  background: linear-gradient(to right,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 ); /* IE6-9 */
  transition: all 0.2s ease-out;
  cursor: pointer;
  border-radius: 0.35em;
  box-shadow: 
    0 0 1px 2px rgba(0,0,0,0.7),
    inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 1px rgba(0,0,0,0.3),
    0 8px 10px rgba(0,0,0,0.15);
}  

.switch:before {
  display:block;
  position: absolute;
 	left: -35px; right: -35px;
  top: -25px; bottom: -25px;
  z-index: -2;
  content: "";
  border-radius: 0.4em;
  background: #d5dde0;
  background: linear-gradient(#d7dfe2, #bcc7cd);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -1px 1px 1px rgba(0,0,0,0.3),
    0 0 8px 2px rgba(0,0,0,0.2),
    0 2px 4px 2px rgba(0,0,0,0.1);
  pointer-events: none;
  transition: all 0.2s ease-out;
}

.switch:after {
 	content: "";
  position: absolute;
  right: -25px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #788b91;
  margin-top: -8px;
  z-index: -1;
  box-shadow: 
    inset 0 -1px 8px rgba(0,0,0,0.7),
    inset 0 -2px 2px rgba(0,0,0,0.2),
    0 1px 0 white,
    0 -1px 0 rgba(0,0,0,0.5),
    -47px 32px 15px 13px rgba(0,0,0,0.25);
}

#switch:checked ~ .switch {
  background: #b7bfc2; /* Old browsers */
  background: -moz-linear-gradient(left, #b7bfc2 0%, #e1e9ec 26%, #fff9f4 32%, #d4dcdf 38%, #ccd4d7 66%, #d8e0e3 71%, #ced8da 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b7bfc2), color-stop(26%,#e1e9ec), color-stop(32%,#fff9f4), color-stop(38%,#d4dcdf), color-stop(66%,#ccd4d7), color-stop(71%,#d8e0e3), color-stop(100%,#ced8da)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* IE10+ */
  background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 ); /* IE6-9 */
}

#switch:checked ~ .switch:after {
 	background: #b1ffff;
  box-shadow: 
    inset 0 -1px 8px rgba(0,0,0,0.7),
    inset 0 -2px 2px rgba(0,0,0,0.2),
    0 1px 0 white,
    0 -1px 0 rgba(0,0,0,0.5),
    -110px 32px 15px 13px rgba(0,0,0,0.25); 
}

lightswitch_button.html

<input type="checkbox" id="switch" name="switch">
<label for="switch" class="switch"></label>

liquid.css

body {
	display: flex;
	height: 100vh;

	align-items: center;
	justify-content: center;
}

.btn-liquid {
	display: inline-block;
	position: relative;
	width: 240px;
	height: 60px;

	border-radius: 27px;

	color: #fff;
	font: 700 14px/60px "Droid Sans", sans-serif;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.btn-liquid .inner {
	position: relative;

	z-index: 2;
}

.btn-liquid canvas {
	position: absolute;
	top: -50px;
	right: -50px;
	bottom: -50px;
	left: -50px;

	z-index: 1;
}

liquid.js

$(function() {
	// Vars
	var pointsA = [],
		pointsB = [],
		$canvas = null,
		canvas = null,
		context = null,
		vars = null,
		points = 8,
		viscosity = 20,
		mouseDist = 70,
		damping = 0.05,
		showIndicators = false;
		mouseX = 0,
		mouseY = 0,
		relMouseX = 0,
		relMouseY = 0,
		mouseLastX = 0,
		mouseLastY = 0,
		mouseDirectionX = 0,
		mouseDirectionY = 0,
		mouseSpeedX = 0,
		mouseSpeedY = 0;

	/**
	 * Get mouse direction
	 */
	function mouseDirection(e) {
		if (mouseX < e.pageX)
			mouseDirectionX = 1;
		else if (mouseX > e.pageX)
			mouseDirectionX = -1;
		else
			mouseDirectionX = 0;

		if (mouseY < e.pageY)
			mouseDirectionY = 1;
		else if (mouseY > e.pageY)
			mouseDirectionY = -1;
		else
			mouseDirectionY = 0;

		mouseX = e.pageX;
		mouseY = e.pageY;

		relMouseX = (mouseX - $canvas.offset().left);
		relMouseY = (mouseY - $canvas.offset().top);
	}
	$(document).on('mousemove', mouseDirection);

	/**
	 * Get mouse speed
	 */
	function mouseSpeed() {
		mouseSpeedX = mouseX - mouseLastX;
		mouseSpeedY = mouseY - mouseLastY;

		mouseLastX = mouseX;
		mouseLastY = mouseY;

		setTimeout(mouseSpeed, 50);
	}
	mouseSpeed();

	/**
	 * Init button
	 */
	function initButton() {
		// Get button
		var button = $('.btn-liquid');
		var buttonWidth = button.width();
		var buttonHeight = button.height();

		// Create canvas
		$canvas = $('<canvas></canvas>');
		button.append($canvas);

		canvas = $canvas.get(0);
		canvas.width = buttonWidth+100;
		canvas.height = buttonHeight+100;
		context = canvas.getContext('2d');

		// Add points

		var x = buttonHeight/2;
		for(var j = 1; j < points; j++) {
			addPoints((x+((buttonWidth-buttonHeight)/points)*j), 0);
		}
		addPoints(buttonWidth-buttonHeight/5, 0);
		addPoints(buttonWidth+buttonHeight/10, buttonHeight/2);
		addPoints(buttonWidth-buttonHeight/5, buttonHeight);
		for(var j = points-1; j > 0; j--) {
			addPoints((x+((buttonWidth-buttonHeight)/points)*j), buttonHeight);
		}
		addPoints(buttonHeight/5, buttonHeight);

		addPoints(-buttonHeight/10, buttonHeight/2);
		addPoints(buttonHeight/5, 0);
		// addPoints(x, 0);
		// addPoints(0, buttonHeight/2);

		// addPoints(0, buttonHeight/2);
		// addPoints(buttonHeight/4, 0);

		// Start render
		renderCanvas();
	}

	/**
	 * Add points
	 */
	function addPoints(x, y) {
		pointsA.push(new Point(x, y, 1));
		pointsB.push(new Point(x, y, 2));
	}

	/**
	 * Point
	 */
	function Point(x, y, level) {
	  this.x = this.ix = 50+x;
	  this.y = this.iy = 50+y;
	  this.vx = 0;
	  this.vy = 0;
	  this.cx1 = 0;
	  this.cy1 = 0;
	  this.cx2 = 0;
	  this.cy2 = 0;
	  this.level = level;
	}

	Point.prototype.move = function() {
		this.vx += (this.ix - this.x) / (viscosity*this.level);
		this.vy += (this.iy - this.y) / (viscosity*this.level);

		var dx = this.ix - relMouseX,
			dy = this.iy - relMouseY;
		var relDist = (1-Math.sqrt((dx * dx) + (dy * dy))/mouseDist);

		// Move x
		if ((mouseDirectionX > 0 && relMouseX > this.x) || (mouseDirectionX < 0 && relMouseX < this.x)) {
			if (relDist > 0 && relDist < 1) {
				this.vx = (mouseSpeedX / 4) * relDist;
			}
		}
		this.vx *= (1 - damping);
		this.x += this.vx;

		// Move y
		if ((mouseDirectionY > 0 && relMouseY > this.y) || (mouseDirectionY < 0 && relMouseY < this.y)) {
			if (relDist > 0 && relDist < 1) {
				this.vy = (mouseSpeedY / 4) * relDist;
			}
		}
		this.vy *= (1 - damping);
		this.y += this.vy;
	};


	/**
	 * Render canvas
	 */
	function renderCanvas() {
		// rAF
		rafID = requestAnimationFrame(renderCanvas);

		// Clear scene
		context.clearRect(0, 0, $canvas.width(), $canvas.height());
		context.fillStyle = '#fff';
		context.fillRect(0, 0, $canvas.width(), $canvas.height());

		// Move points
		for (var i = 0; i <= pointsA.length - 1; i++) {
			pointsA[i].move();
			pointsB[i].move();
		}

		// Create dynamic gradient
		var gradientX = Math.min(Math.max(mouseX - $canvas.offset().left, 0), $canvas.width());
		var gradientY = Math.min(Math.max(mouseY - $canvas.offset().top, 0), $canvas.height());
		var distance = Math.sqrt(Math.pow(gradientX - $canvas.width()/2, 2) + Math.pow(gradientY - $canvas.height()/2, 2)) / Math.sqrt(Math.pow($canvas.width()/2, 2) + Math.pow($canvas.height()/2, 2));

		var gradient = context.createRadialGradient(gradientX, gradientY, 300+(300*distance), gradientX, gradientY, 0);
		gradient.addColorStop(0, '#102ce5');
		gradient.addColorStop(1, '#E406D6');

		// Draw shapes
		var groups = [pointsA, pointsB]

		for (var j = 0; j <= 1; j++) {
			var points = groups[j];

			if (j == 0) {
				// Background style
				context.fillStyle = '#1CE2D8';
			} else {
				// Foreground style
				context.fillStyle = gradient;
			}

			context.beginPath();
			context.moveTo(points[0].x, points[0].y);

			for (var i = 0; i < points.length; i++) {
				var p = points[i];
				var nextP = points[i + 1];
				var val = 30*0.552284749831;

				if (nextP != undefined) {
					// if (nextP.ix > p.ix && nextP.iy < p.iy) {
					// 	p.cx1 = p.x;
					// 	p.cy1 = p.y-val;
					// 	p.cx2 = nextP.x-val;
					// 	p.cy2 = nextP.y;
					// } else if (nextP.ix > p.ix && nextP.iy > p.iy) {
					// 	p.cx1 = p.x+val;
					// 	p.cy1 = p.y;
					// 	p.cx2 = nextP.x;
					// 	p.cy2 = nextP.y-val;
					// }  else if (nextP.ix < p.ix && nextP.iy > p.iy) {
					// 	p.cx1 = p.x;
					// 	p.cy1 = p.y+val;
					// 	p.cx2 = nextP.x+val;
					// 	p.cy2 = nextP.y;
					// } else if (nextP.ix < p.ix && nextP.iy < p.iy) {
					// 	p.cx1 = p.x-val;
					// 	p.cy1 = p.y;
					// 	p.cx2 = nextP.x;
					// 	p.cy2 = nextP.y+val;
					// } else {

						p.cx1 = (p.x+nextP.x)/2;
						p.cy1 = (p.y+nextP.y)/2;
						p.cx2 = (p.x+nextP.x)/2;
						p.cy2 = (p.y+nextP.y)/2;

						context.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
					// 	continue;
					// }

					// context.bezierCurveTo(p.cx1, p.cy1, p.cx2, p.cy2, nextP.x, nextP.y);
				} else {
nextP = points[0];
						p.cx1 = (p.x+nextP.x)/2;
						p.cy1 = (p.y+nextP.y)/2;

						context.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
				}
			}

			// context.closePath();
			context.fill();
		}

		if (showIndicators) {
			// Draw points
			context.fillStyle = '#000';
			context.beginPath();
			for (var i = 0; i < pointsA.length; i++) {
				var p = pointsA[i];

				context.rect(p.x - 1, p.y - 1, 2, 2);
			}
			context.fill();

			// Draw controls
			context.fillStyle = '#f00';
			context.beginPath();
			for (var i = 0; i < pointsA.length; i++) {
				var p = pointsA[i];

				context.rect(p.cx1 - 1, p.cy1 - 1, 2, 2);
				context.rect(p.cx2 - 1, p.cy2 - 1, 2, 2);
			}
			context.fill();
		}
	}

	// Init
	initButton();
});

liquid_button.html

<a href="http://waaark.com" class="btn-liquid">
		<span class="inner">Liquid button ?</span>
</a>

neumorphic.sass

@import compass


// Squishy buttons inspired by https://goo.gl/bFCyS

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

html, body

  font-family: 'Lato', sans-serif
  background: url(https://s.cdpn.io/1715/dark_stripes.png)
  text-align: center
  height: 100%

.container

  text-align: center
  position: absolute
  margin-top: -80px
  width: 100%
  top: 50%

.toggle

  margin: 4px
  display: inline-block

.toggle
  $size: 140px

  box-shadow: inset 0 0 35px 5px rgba(0,0,0,0.25), inset 0 2px 1px 1px rgba(255,255,255,0.9), inset 0 -2px 1px 0 rgba(0,0,0,0.25)
  border-radius: 8px
  background: #ccd0d4
  position: relative
  height: $size
  width: $size

  &:before

    $radius: $size * 0.845
    $glow: $size * 0.125

    box-shadow: 0 0 $glow $glow / 2 #fff
    border-radius: $radius
    background: #fff
    position: absolute
    margin-left: ( $radius - $glow ) * -0.5
    margin-top: ( $radius - $glow ) * -0.5
    opacity: 0.2
    content: ''
    height: $radius - $glow
    width: $radius - $glow
    left: 50%
    top: 50%

  .button

    $radius: $size * 0.688

    -webkit-filter: blur(1px)
    -moz-filter: blur(1px)
    filter: blur(1px)

    transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)
    box-shadow: 0 15px 25px -4px rgba(0,0,0,0.5), inset 0 -3px 4px -1px rgba(0,0,0,0.2), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 3px 4px -1px rgba(255,255,255,0.2), inset 0 0 5px 1px rgba(255,255,255,0.8), inset 0 20px 30px 0 rgba(255,255,255,0.2)
    border-radius: $radius
    position: absolute
    background: #ccd0d4
    margin-left: $radius * -0.5
    margin-top: $radius * -0.5
    display: block
    height: $radius
    width: $radius
    left: 50%
    top: 50%

  .label

    transition: color 300ms ease-out
    text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0,0,0,0.8), 1px 1px 4px #fff
    line-height: $size - 1
    text-align: center
    position: absolute
    font-weight: 700
    font-size: 42px
    display: block
    opacity: 0.9
    height: 100%
    width: 100%
    color: rgba(0,0,0,0.4)

  input

    opacity: 0
    background :red
    position: absolute
    cursor: pointer
    z-index: 1
    height: 100%
    width: 100%
    left: 0
    top: 0

    &:active

      ~ .button

        box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4), inset 0 -8px 30px 1px rgba(255,255,255,0.9), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 8px 25px 0 rgba(0,0,0,0.4), inset 0 0 10px 1px rgba(255,255,255,0.6)
      
      ~ .label

        font-size: 40px
        color: rgba(0,0,0,0.45)

    &:checked
      
      ~ .button

        box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4), inset 0 -8px 25px -1px rgba(255,255,255,0.9), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 8px 20px 0 rgba(0,0,0,0.2), inset 0 0 5px 1px rgba(255,255,255,0.6)

      ~ .label

        font-size: 40px
        color: rgba(0,0,0,0.4)

neumorphic_button.html

<div class="container">
  <div class="toggle">
    <input type="checkbox">
    <span class="button"></span>
    <span class="label">+</span>
  </div>
  <div class="toggle">
    <input type="checkbox" checked>
    <span class="button"></span>
    <span class="label">–</span>
  </div>
</div>

transitions.scss

body{
  background: #1D1D1D;
}
section#button-container{
  display: inline-block;
  width: 100%;

  .container{
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    display: block;
    float:left;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .button{
    margin: 20px;
    float: left;
    position: relative;
    font-family: arial;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;


    .label{
      padding: 10px;
      display: inline-block;
    }

    &.v1 {

      .left, .right, .bottom, .top {
        background: #f0202f;
        position: absolute;
      }
      .left, .right {
        height: 45px;
        width: 1px;
      }
      .top, .bottom {
        height: 1px;
        width: 30px;
      }
      .top {
        top: 0;
        left: 0;
      }
      .bottom {
        bottom: 0;
        right: 0;
      }
      .left {
        transform: rotate(35deg);
        left: -7px;
        top: -1px;
      }
      .right {
        transform: rotate(35deg);
        right: -7px;
        bottom: -1px;
      }
    }
    &.v2{

      .icon{
        &:before, &:after{
          content: '';
          background: #f0202f;
          position: absolute;
          display: block;
          width: 40px;
          height: 1px;
          transform: rotate(-45deg);
        }
        &:before{
          left: 0;
        }
        &:after{
          right: 0;
        }
      }
      &:before, &:after{
        content: '';
        height: 1px;
        width: 30px;
        position: absolute;
        display: block;
        background: #f0202f;
      }
      &:before{
        left: 0;
      }
      &:after{
        right: 0;
      }
    }

    &.v3{

      &:hover{
        .icon{
          &:before, &:after{
            width: 35px;
          }

          span {
            &:before, &:after {
              height: 35px;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: width 0.5s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: height 0.5s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v4{

      &:hover{
        .icon{
          &:before, &:after{
            width: 10px;
          }

          span {
            &:before, &:after {
              height: 10px;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: width 0.5s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: height 0.5s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v5{

      &:hover{
        .icon{
          transform: scale(0.8);

          &:before, &:after{
            width: 20px;
          }

          span {
            &:before, &:after {
              height: 20px;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition:all 0.5s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: width 0.5s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: height 0.5s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v6{

      &:hover{
        .icon{
          transform: scale(0.9);

          &:before, &:after{
            width: 100%;
          }

          span {
            &:before, &:after {
              height: 100%;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.5s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: width 0.5s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: height 0.5s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v7{

      &:hover{
        .icon{
          transform: scale(0.9) skew(-40deg, 0deg);

          &:before, &:after{
            width: 100%;
          }

          span {
            &:before, &:after {
              height: 100%;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.5s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: width 0.5s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: height 0.5s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }
    &.v8{

      &:hover{
        .icon{
          transform: scale(1.1) skew(-40deg, 0deg);

          &:before, &:after{
            width: 100%;
          }

          span {
            &:before, &:after {
              height: 100%;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.5s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: width 0.5s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: height 0.5s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }
    &.v9{

      &:hover{
        .icon{
          transform: scale(1.1) skew(-40deg, 0deg);

          &:before, &:after{
            width: 100%;
          }

          span {
            &:before, &:after {
              height: 100%;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;
        transition-delay: 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: width 0.2s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: height 0.2s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v10{

      &:hover{
        .icon{
          transform: scale(0.9) skew(0deg, 0deg);

          &:before, &:after{
            width: 100%;
          }

          span {
            &:before, &:after {
              height: 100%;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;
        transition-delay: 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: width 0.2s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: height 0.2s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v11{

      &:hover{
        .icon{
          transform: scale(0.9) skew(0deg, 0deg);

          &:before, &:after{
            width: 100%;
          }

          span {
            &:before, &:after {
              height: 100%;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: width 0.2s;
          transition-delay: 0.2s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: height 0.2s;
            transition-delay: 0.2s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v12{

      &:hover{
        .icon{
          transform: scale(0.9) skew(0deg, 0deg);

          &:before{
            width: 0;
          }
          &:after{
            width: 100%;
          }

          span {
            &:before, &:after {
              height: 0;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: width 0.2s;
          transition-delay: 0.2s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: height 0.2s;
            transition-delay: 0.2s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v12{

      &:hover{
        .icon{
          transform: scale(0.9) skew(0deg, 0deg);

          &:before{
            width: 0;
          }
          &:after{
            width: 50%;
            right: 25%;
          }

          span {
            &:before, &:after {
              height: 0;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: all 0.2s;
          transition-delay: 0.2s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: all 0.2s;
            transition-delay: 0.2s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v13{

      &:hover{
        .icon{
          transform: scale(0.9) skew(0deg, 0deg);

          &:before, &:after{
            width: 60px;
          }
          &:before{
            left: calc(50% - 30px);
          }
          &:after{
            right: calc(50% - 30px);
          }

          span {
            &:before, &:after {
              height: 0;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: all 0.2s;
          transition-delay: 0.4s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: all 0.2s;
            transition-delay: 0.2s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v14{

      &:hover{
        .icon{
          transform: scale(0.9) skew(0deg, 0deg);

          &:before, &:after{
            width: 60px;
            transition-delay: 0.4s;
          }
          &:before{
            left: calc(50% - 30px);
          }
          &:after{
            right: calc(50% - 30px);
          }

          span {
            &:before, &:after {
              height: 0;
              transition-delay: 0s;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: all 0.2s;
          transition-delay: 0s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: all 0.2s;
            transition-delay: 0.4s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v15{

      &:hover{
        .icon{
          transform: scale(0.9) skew(0deg, 0deg);

          &:before, &:after{
            width: 60px;
          }
          &:before{
            left: calc(50% - 30px);
          }
          &:after{
            right: calc(50% - 30px);
          }

          span {
            &:before, &:after {
              height: calc(100% - 20px);
            }
            &:before{
              top: 10px;
            }
            &:after{
              bottom: 10px;
            }
          }
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: all 0.2s;
          transition-delay: 0.2s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: all 0.2s;
            transition-delay: 0.2s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v16{

      &:hover{
        .icon{
          &:before, &:after{
            width: 100%;
          }

          span {
            &:before, &:after {
              height: 100%;
            }
          }
        }
        .icon2{
          transform: skew(-40deg, 0deg) scaleX(1);
          background: #f0202f;
          z-index: -1;
        }
      }

      .label{
        padding: 10px 22px;
      }
      .icon2 {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg) scaleX(0.2);
        transition: all 0.2s;
        transition-delay: 0.2s;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: all 0.2s;
          transition-delay: 0.2s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: all 0.2s;
            transition-delay: 0.2s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v17{

      &:hover{
        .icon{
          &:before, &:after{
            width: 100%;
          }

          span {
            &:before, &:after {
              height: 100%;
            }
          }
        }
        .icon2{
          transform: skew(-40deg, 0deg) scale(1);
          background: #f0202f;
          z-index: -1;
        }
      }

      .label{
        padding: 10px 22px;
      }
      .icon2 {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg) scaleX(0.2) scaleY(0.5);
        transition: all 0.2s;
        transition-delay: 0.2s;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: all 0.2s;
          transition-delay: 0.2s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: all 0.2s;
            transition-delay: 0.2s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    &.v18{

      &:hover{
        .icon{
          transform: scale(0.9) skew(0deg, 0deg);

          &:before, &:after{
            width: 60px;
            transition-delay: 0.4s;
          }
          &:before{
            left: calc(50% - 30px);
          }
          &:after{
            right: calc(50% - 30px);
          }

          span {
            &:before, &:after {
              height: 0;
              transition-delay: 0s;
            }
          }
        }
        .icon2{
          transform: skew(-40deg, 0deg) scaleX(1);
          background: #f0202f;
          z-index: -1;
          transition-delay: 0.5s;
        }
      }

      .label{
        padding: 10px 22px;
      }

      .icon2 {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg) scaleX(0.2);
        transition: all 0.2s;
      }

      .icon{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-40deg, 0deg);
        transition: all 0.2s;

        &:before, &:after{
          content: '';
          height: 1px;
          width: 30px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: all 0.2s;
          transition-delay: 0s;
        }
        &:before{
          left: 0;
          top: 0;
        }
        &:after{
          right: 0;
          bottom: 0;
        }
        span{

          &:before, &:after{
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            height: 30px;
            transition: all 0.2s;
            transition-delay: 0.4s;
          }
          &:before{
            left: 0;
            top: 0;
          }
          &:after{
            right: 0;
            bottom: 0;
          }
        }
      }
    }
    &.v19{
      .label {
        padding: 10px 30px;
        font-family: arial;
        font-size: 14px;
        display: inline-block;
        z-index: 10;
        position: relative;
        white-space: nowrap;
        line-height: 24px;
        transition: all 0.225s;
        transition-delay: 0.45s;
        letter-spacing: 2px;
      }

      &.button-start{
        .label{
          padding: 12px 65px;
        }
      }

      .icon2 {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all 0.225s;
        transform: skew(-40deg, 0deg) scaleX(1);
        background: rgba(#f0202f, 0.8);
        transition-delay: 0.45s;
      }

      .icon {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all 0.225s;
        transform: scale(0.9) skew(0deg, 0deg);
        transition-delay: 0.15s;

        &:before, &:after {
          width: 60px;
          opacity: 0;
          content: '';
          height: 1px;
          position: absolute;
          display: block;
          background: #f0202f;
          transition: all 0.375s;
          transition-delay: 0.3s;
        }
        &:before {
          top: 0;
          left: calc(50% - 30px);
        }
        &:after {
          bottom: 0;
          right: calc(50% - 30px);
        }
        span {

          &:before, &:after {
            height: 0;
            transition-delay: 0s;
            content: '';
            background: #f0202f;
            position: absolute;
            display: block;
            width: 2px;
            transition: all 0.225s;
          }
          &:before {
            left: 0;
            top: 0;
          }
          &:after {
            right: 0;
            bottom: 0;
          }
        }
      }
      &:hover {
        .icon {
          transform: skew(-40deg, 0deg);

          &:before, &:after {
            transition-delay: 0s;
            width: 30px;
            opacity: 1;
          }
          &:before {
            left: 0;
          }
          &:after {
            right: 0;
          }

          span {
            &:before, &:after {
              height: 30px;
              transition-delay: 0.45s;
            }
          }
        }
        .icon2 {
          transform: skew(-40deg, 0deg) scaleX(0.2);
          background: transparent;
          transition-delay: 0s;
          opacity: 0;
        }
      }

      &.white{

        &:hover {
          .label{
            color: #fff;
            transition-delay: 0s;
          }
        }
        .icon2 {
          background: #fff;
        }
        .icon {

          &:before, &:after {
            background: #fff;
          }
          span {
            &:before, &:after {
              background: #fff;
            }
          }
        }
      }
      &.labelred{
        .label{
          color: #f0202f;
        }
      }
      &.labelgray{
        .label{
          color: #1D1D1D;
        }
      }
      &.transparent{
        float: none;
        display: inline-block;
        -webkit-transform: translateZ(0px);
        transform: translateZ(0px);

        .label{
          color: #fff;
          transition-delay: 0s;
        }
        .icon2 {
          background: transparent;
        }
        .icon {
          transform: scale(1) skew(10deg, 0deg);

          &:before, &:after {
            background: #fff;
          }
          span {
            &:before, &:after {
              background: #fff;
            }
          }
        }
        &:hover {
          .icon {
            transform: scale(1) skew(-40deg, 0deg);
          }
        }
      }
    }
  }
}

transitions_button.html

<section id="button-container">
    <div class="container">
        <div class="button v3">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v4">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v5">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v6">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v7">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v8">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v9">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v10">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v11">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v12">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v13">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v14">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v15">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
        </div>
        <div class="button v16">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
            <span class="icon2">
            </span>
        </div>
        <div class="button v17">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
            <span class="icon2">
            </span>
        </div>
        <div class="button v18">
            <span class="label">Button</span>
            <span class="icon">
                <span></span>
            </span>
            <span class="icon2">
            </span>
      </div>
  </div>
  <div class="container">
      <div class="button v19">
        <span class="label">Button</span>
        <span class="icon">
          <span></span>
        </span>
        <span class="icon2">
        </span>
      </div>
      <div class="button v19 white labelgray">
        <span class="label">Button</span>
        <span class="icon">
          <span></span>
        </span>
        <span class="icon2">
        </span>
      </div>
      <div class="button v19 transparent">
        <span class="label">Button</span>
        <span class="icon">
          <span></span>
        </span>
        <span class="icon2">
        </span>
      </div>
    </div>
</section>