角落展开按钮（背景四角扇形涂抹展开动画源码）

效果演示（真实可交互）

伪元素从角落斜向放大铺满，按下时回缩

完整代码

HTML 结构：

<button class="ce-btn ce-bl">左下角展开</button>
<button class="ce-btn ce-tr">右上角展开</button>
<button class="ce-btn ce-br">右下角展开</button>

CSS 核心代码（以左下角为例）：

.ce-btn {
  position: relative; padding: 13px 32px;
  border: 1.5px solid #4d96ff; color: #7db2ff;
  background: transparent; overflow: hidden; z-index: 1;
  transition: color .3s ease;
}
.ce-btn::before {
  content: ''; position: absolute;
  left: -25%; bottom: -150%;          /* 定位到角落外 */
  width: 150%; height: 300%;          /* 足够大，旋转也不露底 */
  background: linear-gradient(135deg, #4d96ff, #7c5cff);
  transform: scale(0);
  transform-origin: left bottom;      /* 从角落开始生长 */
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  z-index: -1; border-radius: 40%;
}
.ce-btn:hover { color: #fff; }
.ce-btn:hover::before { transform: scale(1); }

右上/右下角只需改 right/top 定位与 transform-origin 即可。

参数说明

兼容性与性能

• 全程只有 transform: scale 动画，GPU 合成，零重排，性能极佳
• 依赖 transform-origin + overflow: hidden，兼容所有现代浏览器；IE 不支持 transform 过渡但 hover 可瞬间切换
• 伪元素放在 z-index: -1 且按钮 isolation/z-index 隔离，避免盖住相邻元素
• 纯 CSS 零 JS 零依赖，颜色、圆角、展开方向均可一键修改

常见问题

Q: 展开时为什么会出现白色小三角？ 伪元素缩放中会短暂小于按钮尺寸，角落方向出现空隙；把伪元素做得足够大（150%×300%）并定位到角落外侧即可避免。

Q: 可以做成从左上角展开吗？ 可以，把定位改为 left: -25%; top: -150%，transform-origin: left top，其余不变。

Q: 想要更快或带弹性的展开？ 弹性可用 cubic-bezier(.34,1.56,.64,1) 或加 keyframes 在 1.0 处回弹到 1.08 再落回 1.0。

Q: 触屏上没 hover 怎么办？ 把 :hover 选择器换成 :active 或点击加类名，也可同时保留两种，桌面悬停、移动端点按。

Q: 多个角落展开按钮叠在一起会互相遮挡吗？ 每个伪元素都在各自按钮内部且 overflow: hidden，不会溢出；若按钮间间距过小，给伪元素加 border-radius: 40% 让展开边缘呈弧线，视觉更柔和。