如何在HTML和CSS中实现按钮蓝紫切换渐变及左右蓝紫渐变背景？

有两种常见实现方式，适配不同场景：

方式1：鼠标悬停时切换颜色（带平滑过渡） #

给按钮加过渡效果，鼠标移上去切换背景色，离开时恢复，过程平滑自然：

<style>
  .color-switch-btn {
    background-color: purple;
    /* 控制颜色切换的过渡动画 */
    transition: background-color 0.3s ease;
    /* 可选：优化按钮样式 */
    border: none;
    padding: 8px 16px;
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }
  .color-switch-btn:hover {
    background-color: blue;
  }
</style>

<button class="color-switch-btn">Shop</button>

关键点：transition属性定义了过渡的时长和缓动曲线，这里0.3秒完成颜色切换，ease让变化更流畅不生硬。

方式2：自动循环渐变切换颜色 #

如果需要按钮自动在紫蓝之间循环变色，用CSS动画实现：

<style>
  .auto-switch-btn {
    background-color: purple;
    /* 绑定动画：名称、单次时长、无限循环并反向播放 */
    animation: colorCycle 2s infinite alternate;
    /* 可选：优化按钮样式 */
    border: none;
    padding: 8px 16px;
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }
  /* 定义动画关键帧 */
  @keyframes colorCycle {
    from {
      background-color: purple;
    }
    to {
      background-color: blue;
    }
  }
</style>

<button class="auto-switch-btn">Shop</button>

关键点：infinite alternate让动画无限循环，且每次完成后反向播放，实现紫→蓝→紫的循环效果，2s是单次动画的时长。

用CSS的linear-gradient属性直接设置渐变背景，指定方向为to left（从右往左），颜色顺序为蓝色在前、紫色在后：

<style>
  .gradient-btn {
    /* 从右到左的蓝紫渐变背景 */
    background: linear-gradient(to left, blue, purple);
    /* 可选：优化按钮样式 */
    border: none;
    padding: 8px 16px;
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

<button class="gradient-btn">Shop</button>

关键点：linear-gradient(to left, blue, purple)表示渐变方向从右向左，右侧起始色为蓝色，左侧结束色为紫色。如果要调整渐变比例，可在颜色后加百分比，比如linear-gradient(to left, blue 30%, purple 70%)。

内容的提问来源于stack exchange，提问作者Skech12