请求协助实现基于HTML和CSS的渐变发光按钮

你的代码存在两个核心问题：

1. HTML 里的 <button> 未添加定义好的 .button 类，导致 CSS 样式无法生效
2. 原 CSS 缺少渐变背景和发光效果的相关属性

以下是修改后的完整代码，既保留了你原本的圆角、字体等样式，又实现了渐变发光的交互效果：

修改后的 CSS #

.button {
  /* 渐变背景 */
  background-image: linear-gradient(135deg, #1c87c9, #00bfff);
  -webkit-border-radius: 60px;
  border-radius: 60px;
  border: none;
  color: #eeeeee;
  cursor: pointer;
  display: inline-block;
  font-family: sans-serif;
  font-size: 20px;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  /* 默认弱发光效果 */
  box-shadow: 0 0 5px rgba(28, 135, 201, 0.5);
  /* 平滑过渡动画 */
  transition: all 0.3s ease;
}

/* 鼠标悬停时增强发光 */
.button:hover {
  background-image: linear-gradient(135deg, #00bfff, #1c87c9);
  box-shadow: 0 0 15px rgba(28, 135, 201, 0.8), 0 0 25px rgba(0, 191, 255, 0.5);
  transform: translateY(-2px);
}

/* 点击时的按压反馈 */
.button:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(28, 135, 201, 0.6);
}

修改后的 HTML #

<button class="button"> Hello World! </button>

关键属性说明 #

• background-image: linear-gradient()：通过线性渐变实现按钮的色彩过渡，可自行调整颜色值和角度定制效果
• box-shadow：利用多层半透明阴影模拟发光效果，透明度参数让发光更自然柔和
• transition：让悬停、点击时的样式变化平滑过渡，提升交互质感
• transform：配合状态变化实现轻微位移，强化按钮的交互反馈

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