社交图标按钮（微信/微博/GitHub 等 5 款悬停特效源码）

效果演示（真实可交互）

悬停上浮 + 品牌色填充 + 图标放大，触屏点按生效

完整代码

HTML 结构（以微信为例）：

<a class="si-btn si-wechat" href="#" aria-label="微信">
  <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
    <!-- 微信单色路径 -->
  </svg>
  <span class="si-label">微信</span>
</a>

CSS 核心代码：

.si-btn {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: #1b1f2e; color: #aab3c5;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
    background .25s ease, color .25s ease, box-shadow .25s ease;
}
/* 悬停：上浮 + 图标放大 */
.si-btn:hover { transform: translateY(-6px); color: #fff; }
.si-btn:hover svg { transform: scale(1.15); }
/* 品牌色 */
.si-wechat:hover { background: #07c160;
  box-shadow: 0 10px 22px rgba(7,193,96,.4); }
.si-github:hover { background: #24292e; }
/* 气泡标签 */
.si-label {
  position: absolute; top: -34px; left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #262c3f; color: #fff; font-size: 12px; padding: 4px 10px;
  border-radius: 7px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.si-btn:hover .si-label { opacity: 1; transform: translateX(-50%); }

参数说明

兼容性与性能

• SVG 全部内联，无额外网络请求，fill=“currentColor” 让图标跟随文字颜色变化，主题适配零成本
• 悬停动画只动 transform / background / box-shadow，GPU 合成流畅
• 品牌色渐变（如抖音的 #25f4ee → #fe2c55）用 background 渐变即可实现，无需图片
• 建议分享链接使用 target="_blank" rel="noopener noreferrer" 防钓鱼与性能损耗；纯 CSS 零 JS

常见问题

Q: 图标模糊怎么办？ 用 viewBox 内联 SVG 而非 iconfont，矢量无限缩放不模糊；尺寸用偶数像素（22/24/28）避免半像素渲染。

Q: 如何添加更多平台？ 复制一个 .si-btn 结构，替换 SVG path 并新增品牌色类，如 .si-x:hover { background: #000 }；本站已内置 X/Twitter、抖音等常见图标可参考。

Q: 气泡标签在触屏上会误触吗？ 触屏没有 hover，气泡不会弹出；如需移动端展示平台名，可改为点击弹出或常驻文字按钮。

Q: 品牌色版权有限制吗？ 使用平台官方品牌色做交互反馈属于常见实践，但注意不得用官方 logo 仿冒平台官方账号；纯装饰性分享按钮无风险。

Q: 图标在浅色背景上看不清怎么办？ 默认底色 #1b1f2e 适合深色场景；浅色主题下改底色为 #f1f3f8、文字色为 #4a5268，品牌色填充时仍用白色图标即可保持对比度。