求助：如何使用HTML和CSS设计下图所示的按钮

下面是匹配图中样式的HTML和CSS代码：

HTML 代码 #

<button class="custom-btn">按钮文本</button>

CSS 代码 #

.custom-btn {
  /* 基础布局样式 */
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  /* 渐变背景 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* 阴影增强立体感 */
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  /* 过渡动画让交互更平滑 */
  transition: all 0.3s ease;
}

/* 鼠标悬停效果 */
.custom-btn:hover {
  background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
  transform: translateY(-2px);
}

/* 点击激活效果 */
.custom-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
}

关键样式说明 #

• 用linear-gradient实现图中的蓝紫色渐变背景
• border-radius: 8px设置圆角，贴合按钮的圆润外观
• box-shadow添加柔和阴影，增强按钮的立体感
• 悬停时调整渐变色彩、加深阴影并轻微上移，提升交互反馈
• 点击激活时恢复位置并弱化阴影，模拟真实按压的视觉效果

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