如何用CSS实现带轮廓但无填充的box-shadow，打造可点击按钮

核心实现思路 #

通过嵌套元素分层处理视觉效果与交互逻辑：

• 外层容器承载浅蓝背景区域，设置为不可点击
• 内层用<a>标签作为可点击按钮，借助伪元素实现内侧偏移的白色边框，自身保留青蓝色边框，同时保证按钮能随视口自适应缩放

完整代码示例 #

HTML结构 #

<div class="outer-bg">
  <a href="#" class="action-btn">按钮文本</a>
</div>

CSS样式 #

/* 外层浅蓝背景区域：仅承载视觉效果，禁止点击 */
.outer-bg {
  padding: 2rem;
  background-color: #cceeff;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  width: 100%;
  box-sizing: border-box;
}

/* 内层可点击按钮：负责交互与核心边框效果 */
.action-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  background-color: #ffffff;
  border: 2px solid #17a2b8;
  color: #333333;
  text-decoration: none;
  font-size: 1.1rem;
  position: relative;
  pointer-events: auto; /* 恢复点击能力 */
}

/* 伪元素实现内侧偏移的白色边框 */
.action-btn::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid #ffffff;
  z-index: -1; /* 让白色边框处于青蓝边框与按钮背景之间 */
}

/* 可选：hover交互优化 */
.action-btn:hover {
  background-color: #f8f9fa;
}

关键细节说明 #

• 点击区域精准控制：外层容器通过pointer-events: none屏蔽点击，内层按钮用pointer-events: auto恢复交互，确保只有青白边框包裹的区域可点击
• 自适应缩放：外层容器设width: 100%，内层按钮使用inline-block配合相对单位的内边距，会自动随视口宽度调整尺寸，无需固定宽高
• 边框效果还原：按钮自身的青蓝色边框作为外层，伪元素通过偏移定位实现内侧白色边框，z-index的设置保证边框层级正确，完全匹配设计稿的视觉效果
• 可维护性：纯CSS实现，文本、颜色、尺寸都可通过CSS变量或直接修改属性快速调整，无需依赖图片或SVG

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