.button {
  width: 120px;
  height: 50px;
  background: transparent;
  border-radius: 10px;
  border: 2px solid gainsboro;
  position: relative; /* Establish positioning context */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; /* Change cursor on hover */
}

.button::before,
.button::after {
  position: absolute; /* Position absolutely */
  content: "Hover me!";
  width: 100%; /* Use 100% to match the button's width */
  height: 100%; /* Use 100% to match the button's height */
  border-radius: 10px;
  transition: background 0.3s; /* Smooth transition */
  z-index: -1; /* Place behind the button text */
  display: flex;
  justify-content: center;
  align-items: center;
}

.button::before {
  background: lightblue; /* Background for ::before */
  border: 1px solid lightblue;
}

.button::after {
  background: lightgreen; /* Background for ::after */
  border: 1px solid lightgreen;
}

/* Text styles */
.text {
  position: relative;
  z-index: -1; /* Ensure text is above pseudo-elements */
  color: rgb(204, 204, 204);
}

/* Optional: Additional hover effects */
.button:hover {
  animation: fold 0.3s linear forwards;
}
.button:not(:hover) {
  animation: idleState 0.3s linear forwards;
}
@keyframes idleState {
  from {
    transform: rotateX(45deg) rotateZ(25deg) scale(2);
  }
  to {
    transform: rotateX(0deg) rotateZ(0deg) scale(1);
  }
}
.button:hover::before {
  animation: fold1 0.3s linear forwards;
}
.button:not(:hover)::before {
  animation: unfold1 0.3s linear forwards;
}
.button:hover::after {
  animation: fold2 0.3s linear forwards;
}
.button:not(:hover)::after {
  animation: unfold2 0.3s linear forwards;
}
@keyframes fold {
  from {
    transform: rotateX(0deg) rotateZ(0deg) scale(1);
  }
  to {
    transform: rotateX(45deg) rotateZ(25deg) scale(2);
  }
}
@keyframes fold1 {
  0% {
    transform: rotateX(0deg) rotateZ(0deg) translate(0px, 0px) scale(1);
  }
  50% {
    transform: rotateX(0deg) rotateZ(0deg) translate(1px, -51px) scale(0.5);
  }
  100% {
    transform: rotateX(0deg) rotateZ(0deg) translate(1px, -51px) scale(0.3);
  }
}
@keyframes unfold1 {
  0% {
    transform: rotateX(0deg) rotateZ(0deg) translate(1px, -51px) scale(0.3);
  }
  50% {
    transform: rotateX(0deg) rotateZ(0deg) translate(1px, -51px) scale(0.5);
  }
  100% {
    transform: rotateX(0deg) rotateZ(0deg) translate(0px, 0px) scale(1);
  }
}

@keyframes fold2 {
  0% {
    transform: rotateX(0deg) rotateZ(0deg) translate(0px, 0px) scale(1);
  }
  50% {
    transform: rotateX(0deg) rotateZ(0deg) translate(-1px, 49px) scale(0.5);
  }
  100% {
    transform: rotateX(0deg) rotateZ(0deg) translate(-1px, 49px) scale(0.3);
  }
}
@keyframes unfold2 {
  0% {
    transform: rotateX(0deg) rotateZ(0deg) translate(-1px, 49px) scale(0.3);
  }
  50% {
    transform: rotateX(0deg) rotateZ(0deg) translate(-1px, 49px) scale(0.5);
  }
  100% {
    transform: rotateX(0deg) rotateZ(0deg) translate(0px, 0px) scale(1);
  }
}