Try using this code for free on Hot Page!
Sign up

Hot Buttons, No Issues

A collection of 50 distinctive button styles, built for Hot Page but usable anywhere there is HTML (that is, everywhere).

Almost all of the buttons here forgo setting font-family, because we figure you’ll probably want to use your own font. If you want a bigger button, set a bigger font-size and padding should increase proportionally.

Basic

 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
line-height: 1.4;
padding: 0.5em 1.25em;
border: none;
cursor: pointer;
color: white;
background-color: #3498db;
transition: background-color 0.3s ease-out;
&:hover {
  background-color: #2980b9;
}

&:active {
  background-color: #1c598a;
  transition: none;
}

&:focus-visible {
  outline-offset: 0.1rem;
  outline: 0.2rem solid red;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.5em 1.25em;
cursor: pointer;
transition: background-color 0.3s ease-out, color 0.3s ease-out;
background-color: transparent;
color: #3498db;
border: 2px solid #3498db;
&:hover {
  background-color: #3498db;
  color: white;
}

&:active {
  background-color: #1c598a;
  transition: none;
}

&&:focus-visible {
  outline: 0.2rem solid #ffae00;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.5em 1.25em;
cursor: pointer;
border: none;
cursor: pointer;
transition: background-color 0.3s ease-out;
background-color: #e74c3c;
color: white;
border-radius: 20px;
&:hover {
  background-color: #c0392b;
}

&:active {
  background-color: #a5281b;
  transition: none;
}

&:focus-visible {
  outline-offset: 0.1rem;
  outline: 0.2rem solid #1ed021;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.5em 1.25em;
cursor: pointer;
border: none;
transition: background-color 0.3s ease-out, color 0.3s ease-out;
background: transparent;
color: #2ecc71;
border: 2px solid #2ecc71;
&:hover {
  background: #2ecc71;
  color: white;
}

&:active {
  background: #229954;
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid #e74c3c;
  outline-offset: 0.2rem;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
border: none;
padding: 0.5em 1.25em;
cursor: pointer;
transition: color 0.3s ease-out;
background: none;
color: #8e44ad;
text-decoration: underline;
&:hover {
  color: #cc9fe0;
}

&:active {
  color: #580474;
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid #ffdb00;
  box-shadow: 0 0 1rem 0.2rem #ffdb00;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.5em 1.25em;
cursor: pointer;
border: none;
transition: background-color 0.3s ease-out;
transition: background 0.3s ease-out;
background: #1abc9c;
color: white;
border-radius: 50px;
&:hover {
  background: #16a085;
}

&:active {
  background: #12876f;
  transition: none;
}

&:focus-visible {
  box-shadow: 0 0 0.4rem 0.1rem #0000ad;
  outline: 0.2rem solid #0000ad;
}
 
font-size: 0.8rem;
font-family: inherit;
font-weight: normal;
padding: 0.5em;
cursor: pointer;
transition: background-color 0.3s ease-out;
background-color: #ba2323;
border: solid 1px #831212;
color: #fff;
border-radius: 5px;
&:hover {
  background-color: #d95959;
}

&:active {
  transform: translateY(1px);
}

&:focus-visible {
  outline: 0.2rem solid #ff4a4a;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.5em 1.25em;
cursor: pointer;
border: none;
cursor: pointer;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
color: black;
&:hover {
  background: linear-gradient(45deg, #ff7675, #fab1a0);
}

&:active {
  background: linear-gradient(45deg, #d63031, #e17055);
}

&:focus-visible {
  outline: 0.1rem solid #007dff;
  outline-offset: 0.1rem;
}
 
font-size: 1.125rem;
font-family: inherit;
font-weight: 600;
text-transform: uppercase;
padding: 0.8em 2em;
border: none;
cursor: pointer;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)), radial-gradient(circle at top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
color: #111;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 9px;
backdrop-filter: blur(10px);
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6), 4px 4px 10px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-out, color 0.3s ease-out, backdrop-filter 0.3s ease-out, background 0.3s ease-out;
&:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.15)), radial-gradient(circle at top left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.7), 6px 6px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(11px);
}

&:active {
  transform: scale(0.98);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.8), 2px 2px 6px rgba(0, 0, 0, 0.2);
  transition: none;
}

&:focus-visible {
  outline: 0.3rem solid #ffc0cb;
  box-shadow: 0 0 2rem #ffc0cb;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.75em 1.5em;
cursor: pointer;
color: #0ff;
background: #111;
border: 2px solid #0ff;
border-radius: 6px;
text-transform: uppercase;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
transition: background 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out;
&:hover {
  background: #0ff;
  color: #111;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

&:active {
  background: #008b8b;
  color: #fff;
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid #ff6300;
  outline-offset: 0.2rem;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.75em 1.5em;
background: linear-gradient(135deg, #ff007f, #ff9e00);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background 0.3s ease-out, transform 0.3s ease-out;
position: relative;
overflow: hidden;
&::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-out, background 0.3s ease-out;
}

&:hover::before {
  background: rgba(255, 255, 255, 0.1);
}

&:active {
  transform: translate(2px, 2px);
  transition: none;
  &::before {
    transform: translate(-10%, -30%);
    transition: transform 0.1s ease-out;
  }
}

&:focus-visible {
  outline: 0.1rem solid #87fd00;
  box-shadow: 0 0 1rem #87fd00;
}
 
font-size: 1rem;
font-family: inherit;
padding: 0.75em 1.75em;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
color: white;
background: black;
border: 3px solid cyan;
box-shadow: 0 0 5px cyan, 0 0 10px transparent;
transition: background 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
&:hover {
  box-shadow: 0 0 10px cyan, 0 0 40px cyan, 0 0 80px cyan;
  border-color: white;
}

&:active {
  background: #1c598a;
  transform: scale(0.96);
  box-shadow: 0 0 15px cyan, 0 0 30px cyan, 0 0 60px cyan;
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid rgb(24.7% 100% 1.18%);
  outline-offset: 0.2rem;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.75em 1.5em;
cursor: pointer;
color: white;
background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
background-size: 400% 400%;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 8px;
transition: background 0.3s ease-out, filter 0.3s ease-out;
animation: holo-glow 6s infinite linear;
@keyframes holo-glow {
  0%, 100% {
    background-position: 0% 50%;
  }

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

&:hover {
  filter: brightness(1.2) saturate(1.5);
}

&:active {
  background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
  filter: brightness(0.8);
  transition: none;
  transform: scale(0.9);
}

&:focus-visible {
  outline: 0.2rem solid green;
  outline-offset: 0.2rem;
}

Elevated

 
font-size: 1rem;
font-weight: 900;
text-transform: uppercase;
padding: 1em 2.5em;
cursor: pointer;
background: white;
color: black;
border: 0.25em solid black;
  border-radius: 1000px;
box-shadow: 4px 4px 0px black;
transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
&:hover {
  box-shadow: 6px 6px 0px black;
  transform: translate(-2px, -2px);
}

&:active {
  box-shadow: 2px 2px 0px black;
  transform: translate(2px, 2px);
  transition: none;
}

&:focus-visible {
  outline: 0.3rem solid #ffe469;
  box-shadow: 0 0 2rem 1rem #ffe469;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 700;
text-transform: uppercase;
padding: 0.5em 1.25em;
background: linear-gradient(135deg, #11998e, #38ef7d);
color: white;
padding: 14px 36px;
border: none;
border-radius: 0.5em;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-out;
&:hover {
  transform: rotateX(15deg) rotateY(15deg) scale(1.05);
  background: linear-gradient(135deg, #38ef7d, #11998e);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

&:active {
  transform: scale(0.9);
  box-shadow: none;
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid #2d6dcd;
  box-shadow: 0 0 1rem #2d6dcd;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.5em 1.25em;
cursor: pointer;
border: none;
background-color: #d35400;
color: white;
transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
&:hover {
  background: #ba4a00;
}

&:active {
  background: #9c3f00;
  box-shadow: none;
  transition: none;
}

&:focus-visible {
  outline: 0.3rem solid #ffe47a;
  outline-offset: 0.2rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 700;
text-transform: uppercase;
padding: 0.875em 2.5em;
border: none;
background: #ff5722;
color: white;
cursor: pointer;
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
position: relative;
border-radius: 0.5em;
box-shadow: 0px 6px 0px #d84315;
&:hover {
  transform: translate(0px, -4px);
  box-shadow: 0px 10px 0px #bf360c;
}

&:active {
  background: #ff5722;
  transform: translate(0px, 4px);
  box-shadow: 0px 2px 0px #d84315;
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid #9BF723;
  transition: all 0.2s ease-in-out;
}
 
font-size: 1rem;
font-family: inherit;
padding: 0.5em 1.25em;
border: none;
cursor: pointer;
transition: background-color 0.3s ease-out;
background: #f39c12;
color: white;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
&:hover {
  background-color: #d68910;
}

&:active {
  background-color: #b9770e;
  box-shadow: none;
  transition: none;
}

&:focus-visible {
  outline: 0.1rem solid #d91ed9;
  outline-offset: 0.2rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.5em 1.25em;
border: none;
cursor: pointer;
transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
background: #e0e0e0;
color: #333;
border-radius: 12px;
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
&:hover {
  box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
}

&:active {
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
  background: white;
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid #f84c68;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.75em 1.5em;
cursor: pointer;
border: none;
background: #6200ea;
color: #fff;
border-radius: 8px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-out, background-color 0.3s ease-out, transform 0.3s ease-out;
&:hover {
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

&:active {
  background: #6200ea;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid #ffbf00;
  outline-offset: 0.2rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 0.75em 1.5em;
border: none;
cursor: pointer;
transition: box-shadow 0.3s ease-out;
background: #5a6ee1;
color: #fff;
border-radius: 8px;
box-shadow: 4px 4px 8px #4a5bb5, -4px -4px 8px #7e8dff;
&:hover {
  box-shadow: 2px 2px 4px #4a5bb5, -2px -2px 4px #7e8dff;
}

&:active {
  background: linear-gradient(145deg, #6e7dff, #5a6ee1);
  box-shadow: inset 2px 2px 4px #4a5bb5, inset -2px -2px 4px #7e8dff;
}

&:focus-visible {
  outline: 0.1rem solid #D20A2E;
  box-shadow: 0 0 1rem #fe5f7c;
  transition: all 0.1s ease-out;
}
 
font-size: 1.5rem;
font-family: inherit;
line-height: 1;
padding: .6em;
border: none;
cursor: pointer;
transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
background: #ff5252;
border-radius: 50%;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
border: none;
aspect-ratio: 1;
display: flex;
&:hover {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
}

&:active {
  background: #b31414;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid #35caca;
  transition: all 0.1s ease-out;
}

Flat

 
font-size: 1rem;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
padding: 0.75em 1.5em;
cursor: pointer;
color: #222;
background: #fc0;
border: 4px solid #222;
transition: background 0.3s ease-out, border 0.3s ease-out, transform 0.3s ease-out;
&:hover {
  background: #f90;
  border: 4px solid #000;
}

&:active {
  background: #f60;
  transform: translate(2px, 2px);
  transition: none;
}

&:focus-visible {
  outline: 0.3rem solid #00d1ff;
  outline-offset: 0.2rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1.2rem;
font-family: monospace;
text-transform: uppercase;
font-weight: 900;
padding: 0.6em 1.2em;
background: none;
color: black;
border: 3px solid black;
cursor: pointer;
transition: background 0.2s, color 0.2s;
&:hover {
  background: black;
  color: white;
}

&:active {
  background: red;
  border-color: red;
  transition: none;
}

&:focus-visible {
  outline: 0.3rem solid #44d444;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 600;
text-transform: uppercase;
padding: 0.75em 1.5em;
cursor: pointer;
color: black;
background: white;
border: 2px solid black;
transition: background 0.3s ease-out, color 0.3s ease-out;
&:hover {
  background: black;
  color: white;
}

&:active {
  transform: scale(0.95);
  transition: none;
}

&:focus-visible {
  outline: 0.1rem solid #05cbff;
  outline-offset: 0.2rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 700;
padding: 0.75em 1.5em;
cursor: pointer;
color: black;
background: white;
border: 2px solid black;
position: relative;
transition: color 0.3s ease-out, background 0.3s ease-out, transform 0.3s ease-out;
&::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 4px, black 5px);
  opacity: 0;
  transition: opacity 0.3s;
}

&:hover::after {
  opacity: 1;
}

&:active {
  background: black;
  color: white;
  transform: scale(0.95);
  transition: none;
}

&:active::after {
  background: repeating-linear-gradient(0deg, transparent, transparent 4px, white 5px);
}

&:focus-visible {
  outline: 0.2rem dashed #ffc700;
  outline-offset: 0.2rem;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: bold;
padding: 0.75em 1em;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.25em;
background: none;
border: 0.2wem solid black;
position: relative;
&::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffea00;
  z-index: -1;
  transition: transform 0.2s ease-out;
  transform: translate(0.3em, 0.3em);
}

&:hover::after {
  transform: none;
}

&:active {
  transform: translate(0.125em, 0.125em);
  text-shadow: 0.125em 0.125em white;
}

&:focus-visible {
  outline: 0.2rem solid #a6ff61;
  outline-offset: 0.2rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
padding: 0.75em 1.5em;
cursor: pointer;
color: white;
background: #f0f;
border: 0.15em solid white;
border-radius: 0.25em;
transition: background 0.3s ease-out, color 0.3s ease-out, transform 0.3s ease-out;
&:hover {
  background: #0ff;
  color: black;
}

&:active {
  background: #fc0;
  color: black;
  transform: scale(0.95);
  transition: background 0.2s ease-out, color 0.2s ease-out;
}

&:focus-visible {
  outline: 0.3rem solid #ff8500;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 900;
text-transform: uppercase;
padding: 0.75em 1.7em;
font-family: inherit;
cursor: pointer;
color: white;
background: black;
border: none;
letter-spacing: -0.5px;
transition: transform 0.15s ease-out;
&:hover {
  transform: scale(1.2);
}

&:active {
  transform: scale(0.95);
  transition: none;
}

&:focus-visible {
  outline: 0.3rem double #FF5E42;
  transition: all 0.2s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
padding: 1em 1.5em;
font-weight: bold;
background: yellow;
color: black;
border: 0.25em solid black;
text-transform: uppercase;
position: relative;
cursor: pointer;
transition: transform 0.2s ease-out, background 0.3s ease-out;
&:hover {
  transform: translate(-2px, -2px);
}

&:active {
  background: white;
  transform: translate(2px, 2px);
  transition: none;
}

&:focus-visible {
  outline: 0.2rem dashed #42B7FF;
  outline-offset: 0.3rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 700;
padding: 0.6em 1.4em;
text-transform: uppercase;
cursor: pointer;
color: white;
background-image: linear-gradient(to left, crimson 33.3%, darkGreen 33.3%, darkGreen 66.6%, cornFlowerBlue 66.6%);
background-size: 300%;
transition: background 0.3s ease-out;
&:hover {
  background-position: 50%;
}

&:active {
  background-position: right;
  transition: background 0.1s ease-out;
}

&:focus-visible {
  outline: 0.2rem solid #72df2f;
  transition: all 0.2s ease-out;
  border-radius: 2rem;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
padding: 1em .75em;
font-size: inherit;
letter-spacing: 0.2em;
border: 4px solid #3C14D0;
color: #3C14D0;
background: #fff;
cursor: pointer;
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
box-shadow: 0px 0px 0px #3C14D0;
&:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0px #3C14D0;
}

&:active {
  transform: scale(0.97);
  box-shadow: 0px 0px 0px #3C14D0;
  transition: none;
}

&:focus-visible {
  transition: all 0.1s ease-out;
  outline: 0.3rem groove #AD42FF;
  outline-offset: 0.4rem;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
text-transform: uppercase;
background: white;
color: navy;
cursor: pointer;
padding: 0.5rem;
border: 0.125em solid navy;
border-radius: 0.5rem;
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background 0.3s ease-out, color 0.3s ease-out;
&:hover {
  transform: translate(0 0.2rem);
  box-shadow: 0 0.6em navy, 0 0.9em rgba(0, 0, 0, 0.4);
}

&:active {
  background: navy;
  color: white;
  transform: translate(0,0.4rem);
  box-shadow: 0 0.6em navy;
  transition: none;
}

&:focus-visible {
  outline: 0.3rem double #4FCC12;
  transition: all 0.1s ease-out;
  outline-offset: 0.1rem;
}

Morphs

 
font-size: 1rem;
font-family: inherit;
font-weight: 700;
text-transform: uppercase;
padding: 0.875em 1.8em;
background: linear-gradient(135deg, #fc466b, #3f5efb);
color: white;
border: none;
border-radius: 1000px;
cursor: pointer;
&:hover {
  animation: button-spin 0.6s ease-out;
}

&:active {
  background: linear-gradient(135deg, #fc466b, #3f5efb);
  transform: scale(0.9);
}

@keyframes button-spin {
  0% {
    transform: rotate(0deg) scale(1.2);
  }

  100% {
    transform: rotate(720deg) scale(1);
  }
}

&:focus-visible {
  outline: 0.2rem inset #ff6b00;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 700;
text-transform: uppercase;
padding: 0.75em 1.75em;
background: linear-gradient(135deg, #ff512f, #dd2476);
color: white;
border: none;
border-radius: 3rem;
cursor: pointer;
transition: border-radius 0.3s ease-out;
&:hover {
  animation: button-wobble 0.4s ease-in-out;
  border-radius: 10px;
}

&:active {
  background: linear-gradient(135deg, #ff512f, #dd2476);
  transform: scale(0.9);
}

@keyframes button-wobble {
  0 {
    border-radius: 10px;
    transform: rotate(0deg) scale(1);
  }

  20% {
    border-radius: 30px 10px 40px 20px;
    transform: rotate(3deg) scale(1.05);
  }

  40% {
    border-radius: 10px 30px 20px 40px;
    transform: rotate(-3deg) scale(0.98);
  }

  60% {
    border-radius: 40px 20px 10px 30px;
    transform: rotate(2deg) scale(1.02);
  }

  80% {
    border-radius: 20px 40px 30px 10px;
    transform: rotate(-2deg) scale(1.03);
  }

  100% {
    border-radius: 10px;
    transform: rotate(0deg) scale(1);
  }
}

&:focus-visible {
  outline: 0.2rem solid #17b6bc;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 700;
padding: 0.75em 1.75em;
background: linear-gradient(135deg, #36d1dc, #5b86e5);
color: white;
border: none;
border-radius: 10px;
text-transform: uppercase;
cursor: pointer;
transition: border-radius 0.3s ease-out, transform 0.3s ease-out;
&:hover {
  border-radius: 40px;
  transform: scale(1.1);
}

&:active {
  background: linear-gradient(-135deg, #36d1dc, #5b86e5);
  transform: none;
  transition: none;
}

&:focus-visible {
  outline: 0.15rem dotted #ff7d00;
  transition: all 0.1s ease-out;
  outline-offset: 0.1rem;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
padding: 0.75em 1.65em;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
color: white;
border: none;
border-radius: 12px;
transition: mask 0.3s ease-out, color 0.3s ease-out;
&:hover {
  border-radius: 0;
  mask: conic-gradient(from 155deg at top,#0000,#000 1deg 49deg,#0000 50deg) top/9px 51% repeat-x, conic-gradient(from -25deg at bottom,#0000,#000 1deg 49deg,#0000 50deg) bottom/9px 51% repeat-x;
}

&:active {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  mask: none;
  transform: scale(0.9);
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid #4FCC12;
  transition: all 0.1s ease-out;
  box-shadow: 0 0 1rem #4FCC12;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 700;
text-transform: uppercase;
padding: 0.75em 2em;
border: none;
border-radius: 1.25em;
cursor: pointer;
color: white;
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
&:hover {
  animation: button-gel 0.5s ease-out forwards;
}

&:active {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  box-shadow: none;
  transform: scale(0.95);
  transition: none;
}

@keyframes button-gel {
  0% {
    border-radius: 20px;
  }

  50% {
    border-radius: 50px 20px 50px 20px;
  }

  100% {
    border-radius: 30px;
  }
}

&:focus-visible {
  outline: 0.2rem solid #7eb12c;
  transition: all 0.1s ease-out;
  border-radius: 1rem;
  box-shadow: 0 0 1.5rem #7eb12c;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
padding: 0.75em 2em;
background: #000;
color: #0f0;
border: 2px solid #0f0;
border-radius: 0.4em;
transition: transform 0.3s ease-out;
&:hover {
  animation: glitch-morph 0.3s ease-in-out;
}

&:active {
  transform: scale(0.9);
  transition: none;
}

@keyframes glitch-morph {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transform: skew(0deg, 0deg);
  }

  20% {
    clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 90%);
    transform: skew(3deg, -3deg);
  }

  40% {
    clip-path: polygon(10% 10%, 90% 5%, 90% 95%, 10% 85%);
    transform: skew(-4deg, 4deg);
  }

  60% {
    clip-path: polygon(5% 0%, 95% 0%, 90% 100%, 5% 100%);
    transform: skew(2deg, -2deg);
  }

  80% {
    clip-path: polygon(0% 5%, 100% 10%, 100% 90%, 0% 85%);
    transform: skew(-3deg, 3deg);
  }

  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transform: skew(0deg, 0deg);
  }
}

&:focus-visible {
  outline: 0.2rem dashed #eb4545;
  transition: all 0.1s ease-out;
  outline-offset: 0.1rem;
}
 
text-transform: uppercase;
font-family: sans-serif;
position: relative;
padding: 0;
border: none;
background: none;
cursor: pointer;
perspective: 10000px;
transform-style: preserve-3d;
display: grid;
transform-origin: center center;
transition: transform .3s ease-out;
transform-origin: bottom;
span {
  border: 0.25em solid #4C00EE;
  letter-spacing: 0.05em;
  grid-area: 1 / 1;
  display: inline-block;
  padding: 0.75em 2em;
}

span:first-child {
  color: #4C00EE;
  transform-origin: bottom;
  transform: translateY(-100%) rotateX(90deg);
}

span:last-child {
  color: #fff;
  background: #4C00EE;
}

&:hover {
  transform: rotateX(-90deg);
}

&:focus-visible {
  outline: 0.3rem solid #ffc0cb;
  box-shadow: 0 0 2rem #ffc0cb;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: .75em 1.5em;
background: #00bfa5;
color: #fff;
border: none;
cursor: pointer;
border-radius: 0.5em;
transition: background-color 0.3s ease-out, border-radius 0.3s ease-out;
&:hover {
  background-color: #ffab00;
  border-radius: 1.5em;
}

&:active {
  background-color: #ff6d00;
  border-radius: 50%;
}

&:focus-visible {
  outline: .15rem dashed #e45213;
  outline-offset: 0.2rem;
  transition: all 0.1s ease-out;
}

Border

 
font-size: 1rem;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
padding: 0.666em 1.333em;
background: transparent;
color: #ff0000;
border: 0.222em solid;
border-image: linear-gradient(45deg, #ff6b6b, #f9d423) 1;
transition: color 0.3s ease-out;
&:hover {
  background: linear-gradient(45deg, #ff6b6b, #f9d423);
  color: #000;
}

&:active {
  background: linear-gradient(45deg, #f9d423, #ff6b6b);
  color: #ffffff;
}

&:focus-visible {
  outline: 0.15rem dashed #ff0000;
  outline-offset: 0.2rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
text-transform: uppercase;
padding: 0.625em 1.25em;
transition: background 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out;
background: #fff;
color: #333;
border: 0.125em dashed #333;
cursor: pointer;
transition: border-color 0.3s, color 0.3s;
&:hover {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

&:active {
  color: #f9d423;
  transition: none;
}

&:focus-visible {
  outline: 0.1rem solid #ff6b6b;
  outline-offset: 0.15rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: 900;
padding: 0.75em 1.5em;
transition: background 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out;
background: none;
color: #EB222A;
padding: 12px 24px;
border: 0.5em solid;
border-image: url('/images/PyCmbDRJTdmtnFPcOSgAPQ/90.webp') round 32;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.3s;
&:hover {
  animation: button-border-flicker 1s infinite alternate ease-in-out;;
  transform: scale(1.05);
}

&:active {
  transform: scale(0.95);
  transition: none;
}

@keyframes button-border-flicker {
  50% {
    border-image-source: url('/images/jI_Zga5GQG-b7tbtw1KZMg/90.webp');
  }
}

&:focus-visible {
  outline: 0.2rem solid #2FE7EB;
  outline-offset: 0.2rem;
  transition: all 0.1s ease-out;
  border-radius: 0.5rem;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
padding: 0.75em 1.5em;
background: #fff;
color: #888;
border: 0.25em solid currentColor;
transition: color 0.3s ease-out, transform 0.3s ease-out;
&:hover {
  animation: button-border-fade 1s infinite alternate;
  color: #ff6b6b;
  transform: scale(1.05);
}

&:active {
  background: initial;
  color: #fee45f;
  transform: scale(0.95);
  transition: none;
  animation: none;
}

@keyframes button-border-fade {
  0%, 100% {
    color: #f9d423;
  }

  50% {
    color: #ff6b6b;
  }
}

&:focus-visible {
  outline: 0.5rem groove #178DE8;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
padding: 1em 1.75em;
position: relative;
background: #ffffff;
color: #111;
border: none;
cursor: pointer;
transition: transform 0.2s ease-in-out;
&::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid;
  border-image-source: linear-gradient(45deg, #ff5733, #ffbd69, #ff5733);
  border-image-slice: 1;
}

&:hover::before {
  animation: button-pulse-border 1s infinite linear;
}

&:active {
  background: initial;
  transform: scale(0.80);
  transition: none;
  animation: none;
}

@keyframes button-pulse-border {
  70% {
    opacity: 0;
    transform: scale(2);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }
}

&:focus-visible {
  outline: 0.2rem solid #fe2600;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: bold;
padding: 0.75em 1.5em;
cursor: pointer;
background: red;
color: #fff;
border: 1em solid;
border-image-source: repeating-radial-gradient(circle, red 15px, blue 30px);
border-image-slice: 15;
transition: border-image-source .5s ease-in-out, transform 0.2s ease-in-out, color 0.3s ease-out;
&:hover {
  border-image-source: repeating-radial-gradient(circle, red 5px, blue 15px);
  transform: scale(1.05);
}

&:active {
  background-color: blue;
  border-image-source: repeating-radial-gradient(circle, red 15px, blue 30px);
  transform: scale(0.95);
  transition: none;
}

&:focus-visible {
  outline: 0.2rem solid #16c54d;
  transition: all 0.1s ease-out;
  outline-offset: 0.2rem;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: bold;
padding:  .75em;
aspect-ratio: 1;
color: rgb(255, 0, 68);
cursor: pointer;
border: 0.25em solid transparent;
border-radius: 50%;
animation: button-hue-shift 6s linear infinite;
transition: transform 0.2s ease-in-out;
background: linear-gradient(white, white) padding-box, conic-gradient(red, orange, yellow, green, blue, indigo, violet, red) border-box;
&:hover {
  transform: scale(1.05);
  animation-duration: 2s;
}

&:active {
  transform: scale(0.9);
  animation-duration: 1s;
}

@keyframes button-hue-shift {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

&:focus-visible {
  outline: 0.2rem solid #6495ed;
  outline-offset: 0.2rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: bold;
cursor: pointer;
padding: 0.75em 1.5em;
transition: background 1s ease-out;
color: #fff;
background: linear-gradient(45deg, blue, green) padding-box;
border-radius: 30px;
position: relative;
border: none;
&::before {
  transform: translate(-24%,-28%);
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid blue;
  border-radius: 30px;
  box-sizing: border-box;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 1.5s ease;
}

&:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 200%);
}

&:active {
  background: linear-gradient(45deg, red, blue);
}

&:focus-visible {
  outline: 0.2rem solid #ff8200;
  box-shadow: 0 0 1rem #ff8200;
  outline-offset: 0.2rem;
}
 
font-size: 1rem;
font-family: inherit;
font-weight: normal;
cursor: pointer;
padding: 0.5em 1.25em;
background: #333;
border: 2px solid #333;
color: white;
background-image: linear-gradient(90deg, #7af96c 50%, transparent 50%), linear-gradient(90deg, #7af96c 50%, transparent 50%), linear-gradient(0deg, #7af96c 50%, transparent 50%), linear-gradient(0deg, #7af96c 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
background-position: left top, right bottom, left bottom, right top;
transition: background 0.3s ease-out, color 0.3s ease-out;
&:hover {
  animation: button-border-move 1s infinite linear;
}

&:active {
  background: #7af96c;
  border: 2px solid #7af96c;
  color: #333;
  transition: none;
}

@keyframes button-border-move {
  0% {
    background-position: left top, right bottom, left bottom, right top;
  }

  100% {
    background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px;
  }
}

&:focus-visible {
  outline: 0.1rem solid #A917E8;
  outline-offset: 0.1rem;
  transition: all 0.1s ease-out;
  box-shadow: 0 0 1rem #A917E8;
}
 
font-size: 1rem;
font-weight: normal;
position: relative;
display: inline-block;
padding: 0.7rem 2rem;
background: transparent;
color: #fff;
border: none;
border-radius: 999px;
cursor: pointer;
z-index: 1;
overflow: hidden;
&::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient( from 0deg,#ff00cc,transparent 20%);
  border-radius: inherit;
  animation: btn-spin 2s linear infinite;
  z-index: -2;
}

&::after {
  content: "";
  position: absolute;
  inset: .1rem;
  background: #212534;
  border-radius: inherit;
  z-index: -1;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

&:hover {
  transform: scale(1.1);
  transition: all 0.1s ease-out;
}

&:hover::before {
  filter: hue-rotate(90deg);
}

&:active {
  transform: scale(0.8);
}

&:active::after {
  background: rgb(22.4% 24.7% 34.1%);
}

&:focus-visible {
  outline: 0.1rem solid #6495ed;
  outline-offset: 0.3rem;
  transition: all 0.1s ease-out;
}
 
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
position: relative;
display: inline-block;
padding: 1rem 2.5rem;
background: transparent;
color: #545151;
border: none;
cursor: pointer;
z-index: 1;
overflow: hidden;
&::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient( from 0deg,#66efe6 0deg,#66efe6 90deg, #5fa7ff 90deg,#5fa7ff 180deg, #7f56ba 180deg, #7f56ba 270deg, #d9ffa0 270deg );
  border-radius: inherit;
  animation: btn-spin-grow 3.5s linear infinite;
  z-index: -2;
}

&::after {
  content: "";
  position: absolute;
  inset: .2rem;
  border-radius: inherit;
  z-index: -1;
  animation: btn-fade 6s linear infinite;
}

@keyframes btn-spin-grow {
  to {
    transform: rotate(360deg);
  }
}

&:hover {
  transform: scale(1.1);
  transition: all 0.1s ease-out;
}

&:hover::before {
  filter: hue-rotate(90deg);
}

&:active {
  transform: scale(0.8);
}

&:active::after {
  background: rgb(22.4% 24.7% 34.1%);
}

&:focus-visible {
  outline: 0.2rem solid #ff6a00;
  outline-offset: 0.3rem;
  transition: all 0.1s ease-out;
}

@keyframes btn-fade {
  50% {
    background: rgba(255,255,255,0.1);
  }

  100%, 0% {
    background: rgba(255,255,255,1);
  }
}