.button-1 {
  width: 100%;
  height: auto;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
    7px 7px 20px 0px rgba(0,0,0,.1),
    4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
 }
 
 .button-1 {
  background: rgb(96,9,240);
  background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
  border: none;
 }
 
 .button-1:before {
  height: 0%;
  width: 2px;
 }
 
 .button-1:hover {
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
               -4px -4px 6px 0 rgba(116, 125, 136, .5), 
     inset -4px -4px 6px 0 rgba(255,255,255,.2),
     inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
 }

 .button-2 {
  background: transparent;
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  padding: 20px 30px;
  perspective: 30rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.308);
}

.button-2::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: linear-gradient(320deg, rgba(0, 140, 255, 0.678), rgba(128, 0, 128, 0.308));
  z-index: 1;
  transition: background 3s;
}

.button-2:hover::before {
  animation: rotate 1s;
  transition: all .5s;
}

@keyframes rotate {
  0% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.button-3 {
  padding: 1em 2em;
  font-size: 17px;
  background: transparent;
  border: none;
  position: relative;
  color: yellow;
  z-index: 1;
 }
 
 .button-3::after,
  .button-3::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all .4s;
 }
 
 .button-3::before {
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background: darkslategray;
  border-radius: 50px;
 }
 
 .button-3::after {
  transform: translate(0px, 0px);
  width: 10px;
  height: 10px;
  background: #ffffff15;
  backdrop-filter: blur(5px);
  border-radius: 50px;
 }
 
 .button-3:hover::before {
  transform: translate(5%, 20%);
  width: 10px;
  height: 10px;
 }
 
 .button-3:hover::after {
  border-radius: 50px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
  background:  linear-gradient(320deg, rgba(0, 140, 255, 0.678), rgba(128, 0, 128, 0.308));
 }
 
 .button-3:active::after {
  transition: 0s;
  transform: translate(0, 5%);
 }

 .button-4 {
  position: relative;
  padding: 1rem 2.5rem;
  color: #ffd739;
  font-size: 1em;
  background-color: #27045b;
  outline: none;
  border: none;
  font-weight: bold;
  border-radius: 5px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  transition-property: all;
  transition-duration: 0.3s;
  cursor: pointer;
}

.button-4:hover {
  background-color: #6807f9;
  box-shadow: 0px 14px 56px -11px #6807f9;
}

.button-4::before {
  content: "";
  position: absolute;
  height: 5px;
  width: 5px;
  background-color: white;
  border-radius: 100px;
  right: 2rem;
  bottom: 37%;
  animation: 0.5s both ease-in-out infinite;
}

.button-4:hover::before {
  animation-name: bounce_591;
  transition: all 0.3s ease;
}

@keyframes bounce_591 {
  0% {
    bottom: 37%;
  }

  50% {
    bottom: 70%;
  }

  100% {
    bottom: 37%;
  }
}

.button-5 {
  border: none;
  font-size: 17px;
  padding: 1em 2em;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 1;
  background: #caf0f8;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #333,
             2px 2px 200px #ffba08 inset;
  color: #fff;
}

.button-5:active {
  transform: scale(.98);
}

.button-5:hover {
  box-shadow: 2px 2px 0 #333,
             2px 2px 200px #003566 inset;
}

.button-5::before {
  content: '';
  position: absolute;
  left: -41%;
  width: 150%;
  height: 300%;
  border-radius: 50%;
  box-shadow: 2px 2px 0 #333,
             0 0 0 8px #d00000 inset,
             0 0 0 16px #dc2f02 inset,
             0 0 0 24px #e85d04 inset,
             0 0 0 32px #f48c06 inset,
             0 0 0 40px #faa307 inset;
  z-index: -1;
  transition: .2s;
}

.button-5:active::before {
  opacity: .001;
  box-shadow: 2px 2px 200px #03045e inset;
}

.button-5:hover::before {
  box-shadow: 2px 2px 0 #333,
             0 0 0 8px #90e0ef inset,
             0 0 0 16px #48cae4 inset,
             0 0 0 24px #00b4d8 inset,
             0 0 0 32px #0096c7 inset,
             0 0 0 40px #0077b6 inset;
  left: -9%;
  width: 150%;
  height: 300%;
}