.btn-1 {
 
  padding: 15px 20px;
  display: block;
  width: fit-content; 
  text-align: center;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 700;
  color: white;
  transition: .5s cubic-bezier(.22,.61,.36,1);
  -webkit-box-shadow: 0 3px 3px 0 rgba(1,1,1,.55);
  box-shadow: 0 3px 3px 0 rgba(1,1,1,.55);
  background-color: #ff0e1f;
}

.btn-1:hover,.btn-1:focus {
  -webkit-filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7));
  filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7));
  color: white;
}





.btn-2 {
  padding: 15px 25px;
  display: block;
  width: fit-content;
  text-align: center;
  font-size: 15px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.btn-2:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 1;
  transition: opacity .3s ease-in-out;
 border-radius: 10px;
}

.btn-2:hover {
color: #ff0e1f;
}

.btn-2:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}



  
.btn-3 {
 
  padding: 21px 27px;
  width: fit-content;
  text-align: center;  
  font-size: 17px;
  background-color: #00c6c20d;
  border-color: #0000;
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: inset 0 3px 0 0 #00fcff, inset 20px 0 50px #08eee14d, inset 20px 0 300px #00c8bb0d, inset 0 20px 50px #08eee14d, inset 0 0 10px #affffa, 4px 4px 4px 0 #0a0a0a80;
 border: none;
 cursor: pointer;
  transition: all .3s;
  outline: none;
 
}



.btn-3:hover {
  border-color: #0000;
  color: #000;
}

.btn-4 {
  text-align: center;
  display: block;
  padding: 15px 30px;
  width: fit-content;
  color: #fff;
  text-transform: uppercase;
  background-color: #111;
  border: 1px solid #efdede;
 -webkit-transition: all .5s cubic-bezier(.3,1,.35,1) 0s;
  transition:all .5s cubic-bezier(.3,1,.35,1) 0s;
  border-radius: 10px;
  font-weight: 500;
  box-shadow: 0px 0px 3px 2px #f9aa01;
  
  
}

.btn-4:hover,
.btn-4:focus {
  background-color: #00c574;
  border-color: #00c574;
   color: #111;
}


.btn-5 {
  padding: 1em 2em;
  border: none;  
  display: block;
  font-style: italic;
  width: fit-content;
  background: #0e1721;
  text-align: center;
  border-radius: 3px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff; 
  transition:all .5s cubic-bezier(.3,1,.35,1) 0s;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline: 2px solid #fff;
}

.btn-5:hover {
  color: #fff;
  transform: scale(1.05);
  outline: 2px solid #fff;
  box-shadow: 2px 3px 10px -2px #fff;
}

.btn-5::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #45f882;
  transform: skewX(45deg);
  z-index: -1;
  transition: width 500ms;
}

.btn-5:hover::before {
  width: 200%;
}