.button-1 {
  --bg: #000;
  --hover-bg: #ff90e8;
  --hover-text: #000;
  color: #fff;
  font-size: 14px;
  border: 1px solid var(--bg);
  border-radius: 4px;
  padding: 0.8em 2em;
  background: var(--bg);
  transition: 0.2s;
}

.button-1:hover {
  color: var(--hover-text);
  transform: translate(-0.25rem,-0.25rem);
  background: var(--hover-bg);
  box-shadow: 0.25rem 0.25rem var(--bg);
}

.button-1:active {
  transform: translate(0);
  box-shadow: none;
}

.button-2 {
  position: relative;
  padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
  border-radius: 3px;
  font-size: 14px;
  color: #FFF;
  text-decoration: none;
  background-color: #2ecc71;
  border: none;
  border-bottom: 5px solid #27ae60;
  text-shadow: 0px -2px #27ae60;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
 }
 
 .button-2:hover, .button-2:active {
  -webkit-transform: translate(0px,5px);
  -ms-transform: translate(0px,5px);
  transform: translate(0px,5px);
  border-bottom: 1px solid #2ecc71;
 }

 .button-3 {
  background-color: #ffed4b;
  border: none;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #fff;
  box-shadow: 4px 4px 0 #000;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.button-3:before {
  content: "";
  position: absolute;
  top: -20%;
  left: -
20%;
  width: 150%;
  height: 150%;
  background-color: rgba(0,0,0,0.2);
  transform: rotate(45deg);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.button-3:hover {
  transform: translate(2px, 2px);
  box-shadow: 6px 6px 0 #000;
}

.button-3:hover:before {
  opacity: 1;
}

.button-3:active {
  transform: translate(0px, 0px);
  box-shadow: 4px 4px 0 #000;
}

.button-3:active:before {
  opacity: 0;
}

.button-4 {
  padding: 1.1rem 2.2rem;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  transition: all .2s;
  position: relative;
  border: none;
  background: #000;
}

.button-4:before,.button:after {
  content: "";
  position: absolute;
  top: 50%;
  background: #ff3d00;
  height: 108%;
  width: 0;
  z-index: -1;
  transition: all .7s;
  transform: translateY(-50%);
}

.button-4:before {
  left: 0%;
}

.button-4:after {
  right: 0%;
}

.button-4:hover {
  color: #fff;
  box-shadow: #f51a1a7f 0 30px 60px -12px inset, #ff00007f 0 18px 36px -18px inset;
  z-index: 2;
}

.button-4:hover::before {
  width: 50%;
  left: 50%;
}

.button-4:hover::after {
  width: 50%;
  right: 50%;
}

.button-5 {
  padding: 1.3em 3em;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

.button-5:hover {
  background-color: #23c483;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

.button-5:active {
  transform: translateY(-1px);
}