演示图片
B2主题默认的「加载更多」按钮样式比较朴素，且自带外层容器背景、圆角边距，整体割裂感很重，不够现代化。
本篇分享一套高颜值蓝渐变悬浮按钮 CSS，附带上浮动画、柔和阴影、大圆角质感，同时彻底清除外层容器白底、多余边距，让按钮独立精致、无缝贴合页面风格。
一、美化前问题汇总
- 默认按钮纯白单调，无层次、无交互反馈
- 外层
load-more容器自带白色背景、圆角、内边距，导致按钮下方有大块白底残留 - 点击区域生硬，整体UI质感偏低，和现代化博客页面不匹配
二、最终美化效果亮点
- 蓝渐变底色：从浅蓝到亮蓝渐变，干净高级、适配绝大多数博客配色
- 悬浮上浮动画：鼠标悬浮轻微上移，交互细腻不浮夸
- 柔和投影：自带蓝色通透阴影，立体不刺眼
- 超大圆角：告别直角呆板，圆润现代化UI
- 容器彻底透明：根除底部白底、边框、阴影、多余边距，只留独立按钮
三、完整可直接使用 CSS 代码
将以下代码复制到：主题设置 → 自定义CSS 即可生效，无需改模板、无需插件。
四、代码详细讲解
1. 按钮样式部分
采用双蓝渐变，色调清爽通透，适配浅色、深色博客模板。搭配 0.3 秒全局过渡，让悬浮、复位动作丝滑自然。
悬浮时不仅会上移 -3px，同时轻微放大阴影范围，强化立体反馈，用户体验更强。
2. 容器根治白底核心
很多人只改按钮样式，却忽略 B2 加载模块外层容器：load-more box-in box。
白底、内边距、圆角、阴影全部来自外层容器，内层按钮怎么改都会留白。
本段代码直接强制透明背景、清空圆角、取消阴影、归零内边距，只保留合理上边距，实现纯按钮展示。
五、微调参数（按需自行修改）
- 圆角大小：修改
border-radius: 30px，数值越大越圆 - 按钮高低：修改
padding: 12px 40px - 悬浮幅度：修改
translateY(-3px) - 阴影深浅：修改最后面百分比
30%/35%
六、生效方式
- 粘贴至 B2 主题「自定义CSS」
- 保存设置
- 清空网站缓存 + 浏览器硬刷新
Ctrl+Shift+R
七、写在最后
博客精致度，往往体现在这些小按钮、小细节上。
默认原生样式虽然能用，但略显粗糙。通过简单 CSS 微调，就能让列表底部的加载按钮质感提升一个档次，页面整体干净、统一、高级。
