如何制作Discord中JoinVideoCallButton同款按钮及悬浮效果？

嘿，很高兴帮你解决这个问题！要实现Discord那种双选项按钮/导航栏的悬浮切换效果，完全可以不用jQuery，纯原生JS+CSS就能搞定，逻辑也不复杂。我来一步步给你拆解：

Discord这类双选项按钮的核心交互特点是：

• 按钮组整体有统一的容器样式，视觉上是一个整体
• 单个按钮悬浮时会有背景色/细节变化
• 点击切换选中状态时，激活按钮会有明显的视觉区分（比如主题色背景）
• 所有交互都带有平滑过渡动画，保持界面流畅感

下面是一套可以直接复用的代码，完全贴合你的需求，且不需要任何第三方库：

1. HTML结构 #

先搭好按钮组的基础结构，用data-action属性区分不同按钮的功能：

<div class="discord-button-group">
  <button class="btn active" data-action="video">加入视频通话</button>
  <button class="btn" data-action="voice">加入语音通话</button>
</div>

2. CSS样式 #

模拟Discord的深色主题风格，同时实现悬浮和选中态的视觉效果：

/* 按钮组容器，保证两个按钮视觉上是一个整体 */
.discord-button-group {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  background-color: #2f3136;
  border: 1px solid #202225;
}

/* 基础按钮样式 */
.btn {
  padding: 8px 16px;
  border: none;
  background-color: transparent;
  color: #dcddde;
  cursor: pointer;
  transition: all 0.2s ease; /* 平滑过渡所有属性变化 */
  font-size: 14px;
  font-family: inherit;
}

/* 悬浮效果：背景加深+细微内阴影 */
.btn:hover {
  background-color: #36393f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

/* 选中激活态：主题色背景+白色文字 */
.btn.active {
  background-color: #7289da;
  color: white;
}

/* 激活态悬浮时的颜色微调，更贴近Discord细节 */
.btn.active:hover {
  background-color: #677bc4;
}

/* 按钮之间的分隔线，强化组内区分 */
.btn:not(:last-child) {
  border-right: 1px solid #202225;
}

3. 原生JS交互逻辑 #

用原生JS处理按钮的选中切换，完全替代jQuery的功能：

// 获取按钮组内的所有按钮
const callButtons = document.querySelectorAll('.discord-button-group .btn');

// 给每个按钮绑定点击事件
callButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 先移除所有按钮的激活状态
    callButtons.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加激活状态
    button.classList.add('active');
    
    // 这里可以添加你的业务逻辑，比如触发对应通话功能
    const actionType = button.dataset.action;
    if (actionType === 'video') {
      console.log('执行视频通话逻辑');
      // 这里写你的视频通话初始化代码
    } else if (actionType === 'voice') {
      console.log('执行语音通话逻辑');
      // 这里写你的语音通话初始化代码
    }
  });
});

• 用CSS的transition属性实现0.2秒的平滑动画，和Discord的交互节奏一致
• 原生JS的querySelectorAll和classListAPI完全可以替代jQuery的选择器和类操作，无需引入额外库
• 通过data-action属性解耦按钮功能和JS逻辑，后续扩展更多按钮也很方便

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