使用css写出七彩变色按钮

以下是一个例子，使用CSS3的渐变和动画属性实现七彩变色按钮：

HTML代码：

<button class="rainbow-btn">Click Me</button>

CSS代码：

.rainbow-btn {
  background: linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #8B00FF, #FF00FF);
  background-size: 150%;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.rainbow-btn:hover {
  background-position: right;
}

.rainbow-btn:active {
  transform: scale(0.95);
}

@keyframes rainbow {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 150%;
  }
}

.rainbow-btn {
  animation: rainbow 10s ease-in-out infinite;
}

解释：

首先，我们使用 linear-gradient 函数创建一个七彩渐变背景，从红色到紫色。
background-size 属性设置为 150%，以便在动画过程中背景颜色可以平滑地滑动。
color、border、border-radius 和 padding 属性用于添加按钮样式。
cursor 属性将鼠标指针设置为手形，以暗示按钮可以单击。
transition 属性在悬停和点击时添加简单的动画效果。
:hover 伪类将背景位置设置为右侧，使渐变效果更加明显。
:active 伪类在点击时缩小按钮，以模拟按钮被按下。
@keyframes 规则定义了一个名为 rainbow 的动画，它将背景位置从 0% 缓慢移动到 150%。
最后，我们将 animation 属性设置为 rainbow，并使其无限循环，使按钮背景持续变化。