.button-1 {
  background-color: #eee;
  border: none;
  padding: 1rem;
  font-size: 1rem;
  border-radius: 1rem;
  color: lightcoral;
  box-shadow: 0 0.4rem #dfd9d9;
  cursor: pointer;
 }
 
 .button-1:active {
  color: white;
  box-shadow: 0 0.2rem #dfd9d9;
  transform: translateY(0.2rem);
 }
 
 .button-1:hover:not(:disabled) {
  background: lightcoral;
  color: white;
  text-shadow: 0 0.1rem #bcb4b4;
 }
 
 .button-1:disabled {
  cursor: auto;
  color: grey;
 }

 .button-2 {
  height: 50px;
  margin: 5px;
  background: #333;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: Consolas, Courier New, monospace;
  border: solid #404C5D 1px;
  font-size: 16px;
  color: rgb(161, 161, 161);
  -webkit-transition: 500ms;
  transition: 500ms;
  border-radius: 5px;
  background: linear-gradient(145deg, #2e2d2d, #212121);
  -webkit-box-shadow: -1px -5px 15px #41465B, 
               5px  5px 15px #41465B, 
    inset      5px  5px 10px #212121, 
    inset     -5px -5px 10px #212121;
  box-shadow: -1px -5px 15px #41465B, 
               5px  5px 15px #41465B, 
    inset      5px  5px 10px #212121, 
    inset     -5px -5px 10px #212121;
}

.button-2:hover {
  -webkit-box-shadow: 1px 1px 13px #20232e,
                    -1px -1px 13px #545b78;
  box-shadow: 1px 1px 13px #20232e,
             -1px -1px 13px #545b78;
  color: #d6d6d6;
  -webkit-transition: 500ms;
  transition: 500ms;
}

.button-2:active {
  -webkit-box-shadow: 1px 1px 13px #20232e,
                     -1px -1px 33px #545b78;
  box-shadow: 1px 1px 13px #20232e,
             -1px -1px 33px #545b78;
  color: #d6d6d6;
  -webkit-transition: 100ms;
  transition: 100ms;
}

.button-3 {
  --clr-font-main: hsla(0 0% 20% / 100);
  --btn-bg-1: hsla(194 100% 69% / 1);
  --btn-bg-2: hsla(217 100% 56% / 1);
  --btn-bg-color: hsla(360 100% 100% / 1);
  --radii: 0.5em;
  cursor: pointer;
  padding: 0.9em 1.4em;
  min-width: 120px;
  min-height: 44px;
  font-size: var(--size, 1rem);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  transition: 0.8s;
  background-size: 280% auto;
  background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
  border: none;
  border-radius: var(--radii);
  color: var(--btn-bg-color);
  box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35);
}

.button-3:hover {
  background-position: right top;
}

.button-3:is(:focus, :focus-visible, :active) {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);
}

@media (prefers-reduced-motion: reduce) {
  .button-3 {
    transition: linear;
  }
}

.button-4 {
  background-color: #444141;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  border: none;
 }
 
 .button-4:hover {
  background-image: linear-gradient(90deg, #53cbef 0%, #dcc66c 50%, #ffa3b6 75%, #53cbef 100%);
  animation: slidernbw 5s linear infinite;
  color: #000;
 }
 
 @keyframes slidernbw {
  to {
   background-position: 20vw;
  }
 }

 .button-5 {
  font-size: 18px;
  display: inline-block;
  outline: 0;
  border: 0;
  cursor: pointer;
  will-change: box-shadow,transform;
  background: radial-gradient( 100% 100% at 100% 0%, #89E5FF 0%, #5468FF 100% );
  box-shadow: 0px 0.01em 0.01em rgb(45 35 66 / 40%), 0px 0.3em 0.7em -0.01em rgb(45 35 66 / 30%), inset 0px -0.01em 0px rgb(58 65 111 / 50%);
  padding: 0 2em;
  border-radius: 0.3em;
  color: #fff;
  height: 2.6em;
  text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.button-5:hover {
  box-shadow: 0px 0.1em 0.2em rgb(45 35 66 / 40%), 0px 0.4em 0.7em -0.1em rgb(45 35 66 / 30%), inset 0px -0.1em 0px #3c4fe0;
  transform: translateY(-0.1em);
}

.button-5:active {
  box-shadow: inset 0px 0.1em 0.6em #3c4fe0;
  transform: translateY(0em);
}