如何用CSS实现指定样式的响应式按钮？代码优化咨询

需求说明 #

需要实现如图所示的按钮样式，原有实现代码逻辑复杂，响应式调整繁琐，现提供更简洁易维护的CSS方案：

原有代码问题分析 #

• 伪元素使用固定padding模拟外扩背景，响应式需单独调整padding和border-radius，适配成本高
• 按钮主体（span）与伪元素的尺寸需分别适配，易出现布局错位
• 冗余的z-index层级控制，增加代码复杂度

优化后的实现代码 #

HTML结构（简化版）

<a href="#" class="save-btn">ｓａｖｅ</a>

CSS样式

.save-btn {
  display: inline-block;
  position: relative;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background-color: #222;
  border: 1px solid #fff;
  border-radius: 32px;
  padding: 12px 24px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* 外扩背景层：通过scale实现自适应放大 */
.save-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #222;
  border-radius: inherit;
  transform: scale(1.5); /* 调整此值控制外扩幅度 */
  z-index: -1;
}

.save-btn:hover {
  color: #222;
  background-color: #fff;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .save-btn {
    font-size: 24px;
    font-weight: 700;
    padding: 15px 46px;
    border-radius: 38px;
  }
}

方案优势 #

1. 结构简化：移除多余的span标签，样式直接作用于按钮本身，代码更简洁
2. 自适应外扩：伪元素通过scale()实现外扩效果，无需手动设置固定尺寸，响应式调整时仅需修改按钮基础样式，伪元素自动跟随适配
3. 易维护：统一的过渡动画、继承式圆角设置，减少重复代码，降低维护成本
4. 层级清晰：伪元素设置z-index:-1自然处于按钮下方，无需额外层级控制

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