.magic-btn {
  position: relative;
  background: cornflowerblue;
  color: white;
  padding: 10px 30px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  overflow: hidden;
  transition: all 0.3s ease;
}

.magic-btn::before,
.magic-btn::after {
  content: '➤';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0; 
  transition: all 0.3s ease;
  font-size: 16px;
  color: white;
}

.magic-btn::before {
  content: '➤';
  left: 10px;
  transform: translate(-10px, -50%);
  opacity: 0;
  transition: all 0.3s ease;
}

.magic-btn::after {
  content: '➤';
  right: 10px;
  transform: translate(10px, -50%) rotate(180deg);
  opacity: 0;
  transition: all 0.3s ease;
}

.magic-btn:hover::before {
  opacity: 1;
  transform: translate(0, -50%);
}

.magic-btn:hover::after {
  opacity: 1;
  transform: translate(0, -50%) rotate(180deg);
}

.magic-btn:hover {
  transform: scale(1.05);
}
/* chaos*/
.btn-chaos {
  background: linear-gradient(45deg, hotpink, cyan, lime, yellow);
  color: black;
  font-family: "Comic Sans MS", cursive;
  border: 4px dashed purple;
}

.btn-chaos:hover {
  transform: rotate(8deg) scale(1.2);
}
/* radioactive */

.btn-radioactive {
  background: repeating-linear-gradient(
    45deg,
    yellow,
    yellow 5px,
    black 5px,
    black 10px
  );
  color: red;
  border: 5px solid red;
}

.btn-radioactive:hover {
  box-shadow: 0 0 20px lime;
}

/* melt */

.btn-melt {
  background: brown;
  border-radius: 50px 10px 80px 20px;
  transform: skewX(-5deg);
}

.btn-melt:hover {
  transform: skewX(5deg) scaleY(0.8);
}

/* circus */

.btn-circus {
  background: repeating-linear-gradient(
    90deg,
    red,
    red 10px,
    white 10px,
    white 20px
  );
  color: blue;
  font-size: 18px;
  letter-spacing: 4px;
}

.btn-circus:hover {
  transform: scale(1.1) rotate(-5deg);
}

/* glitch */
.btn-glitch {
  background: black;
  color: lime;
  text-shadow: 
    2px 0 red,
    -2px 0 cyan;
}

.btn-glitch:hover {
  letter-spacing: 6px;
  transform: scale(1.15);
}

/* gremlin */

.btn-gremlin {
  background: darkgreen;
  border: 6px ridge orange;
  border-radius: 0;
}

.btn-gremlin:hover {
  border-style: dotted;
  background: purple;
}

/* warning */
.btn-warning {
  background: orange;
  color: black;
  font-weight: 900;
  border: 8px double red;
}

.btn-warning:hover {
  animation: shake 0.2s infinite alternate;
}

@keyframes shake {
  from { transform: translateX(-3px); }
  to { transform: translateX(3px); }
}

/* invert */

.btn-invert {
  background: white;
  color: black;
  border: 3px solid black;
}

.btn-invert:hover {
  filter: invert(1);
  transform: scale(1.3);
}