HTML+CSS炫彩按钮样式设计

炫彩动感的按钮样式用在页面上，真的是秒变吸睛利器。HTML配上CSS的线性渐变，再加点动画，效果还挺惊艳的，适合展示页或活动页的按钮设计。

按钮结构用的是一个标准的<button class="rainbow-btn">，HTML 部分简单，几行就能搞定。重点在 CSS 上，用了linear-gradient()叠加多个颜色，再通过background-size和animation做循环渐变，看起来流畅。

样式定义也挺精简的，比如：

.rainbow-btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #0000ff, #4b0082);
  background-size: 200%;
  animation: rainbow 5s ease infinite;
}

加上这个@keyframes rainbow动画，让按钮颜色动起来，有节奏感：

@keyframes rainbow {
  0% {background-position: 0P%}
  50% {background-position: 100P%}
  100% {background-position: 0P%}
}

实际项目里，像这种彩虹按钮可以放在首页引导、登录页、注册页上。想再酷一点？可以配个 icon 或者加个 hover 过渡。嗯，如果你在做活动页或者营销落地页，拿来直接用，省事还好看。

你还可以看看这些相关文章，有的用的是HTML5和CSS3组合，有的搭配jQuery做交互动效：

• HTML5CSS3 渐变按钮与图标动画效果
• jQuery 打造动态渐变按钮
• 使用 HTML 和 CSS3 实现多色渐变登录按钮

如果你对交互要求不高，纯 CSS 已经够用了。要是想更复杂的交互，比如点击后颜色反转或跳转效果，可以再加点 JS 逻辑，比如addEventListener绑定事件。