如何用CSS实现指定渐变色彩按钮并添加hover交互效果？

你需要制作的按钮可以通过CSS线性渐变、阴影属性实现，配合过渡动画完成hover交互，以下是完整实现方案：

用到的颜色值 #

• 酸橙绿：hsl(136, 65%, 51%)
• 亮青色：hsl(192, 70%, 51%)

完整代码实现 #

HTML结构 #

<button class="gradient-btn">Get Started</button>

CSS样式 #

.gradient-btn {
  /* 基础布局样式 */
  padding: 12px 32px;
  border: none;
  border-radius: 999px; /* 实现全圆角效果 */
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  
  /* 线性渐变背景：从左到右的双色过渡 */
  background-image: linear-gradient(to right, hsl(136, 65%, 51%), hsl(192, 70%, 51%));
  
  /* 阴影组合：外阴影增强立体感，内阴影提亮边缘提升质感 */
  box-shadow: 
    0 4px 12px rgba(14, 185, 129, 0.3), /* 酸橙绿系半透明外阴影 */
    inset 0 1px 0 rgba(255, 255, 255, 0.2); /* 白色内阴影弱化生硬感 */
  
  /* 过渡动画：让hover变化更平滑 */
  transition: all 0.3s ease;
}

/* Hover交互效果 */
.gradient-btn:hover {
  /* 反转渐变方向，增加动态视觉变化 */
  background-image: linear-gradient(to left, hsl(136, 65%, 51%), hsl(192, 70%, 51%));
  
  /* 增强阴影范围，强化悬浮感 */
  box-shadow: 
    0 6px 16px rgba(14, 185, 129, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  
  /* 轻微上移按钮，模拟按压前的抬起效果 */
  transform: translateY(-2px);
}

/* 可选：点击状态样式 */
.gradient-btn:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 8px rgba(14, 185, 129, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

关键属性说明 #

1. 线性渐变：通过linear-gradient(to right, 颜色1, 颜色2)实现左右方向的双色过渡，你也可以调整to right为to bottom等改变渐变方向。
2. 阴影组合：外阴影用渐变相关的半透明颜色，让阴影与按钮色调统一；内阴影用浅色提亮边缘，避免按钮过于暗沉。
3. Hover过渡：通过transition属性让所有变化在0.3秒内平滑完成，反转渐变方向+阴影放大+轻微位移的组合，能让交互反馈更明显。

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