CSS实现圆形按钮悬停时钟式填充效果及::before溢出问题咨询

溢出问题修复 #

直接给button选择器添加overflow: hidden属性即可，该属性会自动裁剪所有超出按钮边界的内容，包括绝对定位的::before伪元素，从根源解决溢出问题。

挂钟分针扫动填充效果优化 #

你原有代码的变换逻辑无法实现分针旋转填充的效果，调整相关属性即可达到需求，完整修正代码如下：

修正后CSS代码 #

body {
  background-color: rgb(183, 216, 188);
}

button {
  /* 圆形按钮需要宽高相等 */
  width: 140px;
  height: 140px;
  font-size: 23px;
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent;
  color: rgb(197, 150, 150);
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  position: absolute;
  transition: all 0.5s;
  z-index: 1;
  /* 圆形按钮圆角设置 */
  border-radius: 50%;
  /* 核心：裁剪溢出内容，解决伪元素溢出问题 */
  overflow: hidden;
}

button::before {
  content: "";
  position: absolute;
  top: 0;
  /* 初始状态把伪元素藏在按钮左侧外 */
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgb(235, 188, 188);
  z-index: -1;
  transition: all 0.5s ease-in-out;
  /* 初始旋转角度为0 */
  transform: rotate(0deg);
  /* 原点设为按钮中心，对应挂钟的中心轴 */
  transform-origin: 100% 50%;
}

button:hover::before {
  /* hover时伪元素移入按钮，同时旋转360度，实现分针扫动效果 */
  left: 0;
  transform: rotate(360deg);
}

button:hover {
  color: rgb(194, 26, 26);
}

button:active::before {
  background: #170bbb;
}

修正后HTML代码 #

<button> Button </button>

关键修改说明 #

• 新增overflow: hidden到button样式，直接解决伪元素溢出问题
• 调整按钮宽高相等、border-radius设为50%，实现圆形按钮的需求
• 调整伪元素的初始位置和变换规则，实现以中心为原点的分针扫动填充效果

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