/* button */
.btn {
  cursor: pointer;
  font-size: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3ex 1ex;
  border: 3px solid transparent;
  border-radius: 50px;
  position: relative;

  user-select: none;

  background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(#ffffff 50%, #ffffff00) border-box,
    linear-gradient(
        var(--angle),
        #9a8dfd,
        #526cff,
        #c7d2fe,
        #fe5f92,
        #526cff,
        #b2a8fd,
        #8678f9
      )
      border-box;
}

.btn:hover::before {
  content: "";
  position: absolute;
  bottom: -5%;
  z-index: -5;
  width: 90%;
  height: 30%;

  background: linear-gradient(
    var(--angle),
    #9a8dfd,
    #526cff,
    #c7d2fe,
    #fe5f92,
    #526cff,
    #b2a8fd,
    #8678f9
  );
  filter: blur(10px);
  animation: 2s rotate linear infinite, 0.2s ease-glow linear;
}

.btn:hover {
  animation: 2s rotate linear infinite;
}

@keyframes ease-glow {
  from {
    bottom: 40%;
  }
  to {
    bottom: -5%;
  }
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}