具有透明背景和旋转渐变边框的按钮

<button class="transparent-button">按钮</button>

.transparent-button {
  background: transparent;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 16px;
}

.transparent-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 50%;
  transform-origin: center;
  animation: rotate-gradient 4s infinite;
}

@keyframes rotate-gradient {
  0% {
    transform: rotate(0deg);
    border-color: #ff0000;
  }
  50% {
    transform: rotate(180deg);
    border-color: #00ff00;
  }
  100% {
    transform: rotate(360deg);
    border-color: #0000ff;
  }
}