BUTTON
第三方登录按钮Social Login Button
白底描边的一排登录方式，品牌色只留在左侧图标槽里。
效果预览
适合用在哪
登录注册页、结账前的快捷登录、需要降低注册摩擦的入口。
容易踩的坑
- 每颗按钮整颗涂成品牌色，一排五个颜色互相打架，页面像广告条。
- 一次展开五六个登录方式，主路径被淹没，注册摩擦不降反升。
- 只有图标能点，文字区域没有命中，移动端很难点中。
设计提示词 · Prompt
第三方登录按钮（Social Login Button）：一排等高按钮（44-48px），左边 22px 图标槽、右边服务名，间距 8px，整行可点。按钮本体白底 + 1px 中性描边 + 深色字，品牌色只出现在图标上，不要整颗涂成微信绿或 GitHub 黑，否则一排颜色互相打架。顺序按目标用户的常用程度排，展开不超过 3 个，其余收进「更多方式」。图标用接近官方标识的简化形。悬停只加深描边和浅灰底，不要放大。
Social Login Button: a row of equal-height buttons (44-48px) with a 22px icon slot on the left and the service name on the right, 8px gap, and the whole row is clickable. The body stays white with a 1px neutral border and dark text; brand color lives only in the icon. Don't paint the entire button WeChat green or GitHub black, or a row of them fights itself. Order them by what this audience actually uses, show at most 3, and fold the rest into "More ways". Use a simplified mark close to the official one. Hover only darkens the border and adds a light gray fill — don't scale the button up.
常见搭配
同一页面里经常和「第三方登录按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-socialrow"> <button class="d-socialbtn" type="button"><span class="d-socialbtn__mark d-socialbtn__mark--wx" aria-hidden="true">微</span>微信登录</button> <button class="d-socialbtn" type="button"><span class="d-socialbtn__mark" aria-hidden="true">GH</span>GitHub</button> </div>