如何实现macOS Tahoe原生悬停高亮弹出按钮样式？

这种按钮的核心是区分默认状态和hover状态的样式表现，下面用HTML+CSS给出原生Web环境下的实现方案：

HTML结构 #

把按钮拆分为文本和箭头两个独立元素，方便分别控制样式：

<button class="tahoe-popover-btn">
  <span class="btn-text">系统设置示例文本</span>
  <span class="btn-arrow">▼</span>
</button>

CSS实现 #

先重置按钮默认样式，再分别定义两种状态的表现：

/* 基础按钮样式重置与布局 */
.tahoe-popover-btn {
  border: none;
  background: transparent;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

/* 默认状态：仅箭头胶囊高亮 */
.btn-arrow {
  background-color: #e5e7eb;
  padding: 2px 6px;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}

/* Hover状态：整个按钮高亮，箭头同步调整 */
.tahoe-popover-btn:hover {
  background-color: #e5e7eb;
}
.tahoe-popover-btn:hover .btn-arrow {
  background-color: #d1d5db;
}

关键细节说明 #

• 拆分元素：通过文本和箭头的分离，实现默认状态仅箭头有胶囊背景的效果
• 过渡动画：添加transition属性让状态切换更贴近macOS原生的流畅感
• 系统字体：使用苹果系统默认字体栈，还原原生视觉风格
• 颜色匹配：可以根据实际需求调整#e5e7eb、#d1d5db这类颜色值，更贴近macOS Tahoe的系统配色

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