.button {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  outline: none;
  padding: 0 10px;
  cursor: pointer;
}

.gradient-button {
  background: linear-gradient(135deg, #ffc000 0%, #ff9000 100%);
  border-radius: 50px;
  color: #fff;
  border: none;
  border: 2px solid transparent;
}

.gradient-button:hover {
  background: linear-gradient(135deg, transparent 0%, transparent 100%);
  border: 2px solid #db8009;
}
.gradient-button:hover svg {
  transform: rotate(45deg);
}

.transparent-gradient-button {
  position: relative;
  border-radius: 50px;
  background: linear-gradient(135deg, #ffc000, #ff9000);
}
.transparent-gradient-button:hover svg {
  transform: rotate(45deg);
}

.transparent-gradient-button:hover::before,
.transparent-gradient-button {
  background: #db8009;
  background: linear-gradient(135deg, #ffc000 0%, #ff9000 100%);
}

.transparent-gradient-button::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50px;
  background: #111;
  transition: 0.3s;
}

.transparent-gradient-button div {
  position: relative;
  z-index: 1;
  color: #fff;
}