如何实现按钮Hover时从左到右填充且右侧带圆角的效果？

问题分析 #

你当前用radial-gradient实现的左到右背景填充，没法让填充区域右侧自然呈现圆角。要达成目标效果，推荐用伪元素作为独立填充层——伪元素可单独设置圆角属性，配合过渡动画就能完美实现需求。

修改后的代码 #

HTML（保持不变） #

<a href="#" class="button">Mehr erfahren</a>

CSS（核心修改） #

body {
  background-color: #f6f6f6;
}

a {
  text-decoration: none;
  color: black;
}

.button {
  font-size: 20px;
  color: black;
  background-color: white;
  padding: 20px;
  border-radius: 50px;
  display: inline-block;
  position: relative; /* 为伪元素提供定位基准 */
  z-index: 1; /* 确保文字在填充层上方 */
  transition: color 0.4s;
}

.button::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%; /* 简化圆角写法 */
  background-color: white;
  border: 1px solid black;
  margin-right: 15px;
  position: relative;
  z-index: 2; /* 让小圆点不被填充层覆盖 */
}

/* 新增填充背景的伪元素 */
.button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: black;
  border-radius: 50px; /* 和按钮保持一致的圆角 */
  transition: width 0.4s ease;
  z-index: 0; /* 放在文字下方 */
}

.button:hover {
  color: white;
}

.button:hover::after {
  width: 100%;
}

实现思路 #

1. 给按钮设置position: relative，让伪元素能相对按钮定位
2. 用::after伪元素创建黑色填充层，初始宽度为0，设置和按钮完全一致的border-radius
3. hover时通过过渡动画将伪元素宽度从0变为100%，填充过程中右侧会自然保留圆角
4. 通过z-index控制层级，确保文字和左侧的小圆点始终在填充层上方
5. 简化原代码中的冗余样式，让结构更清晰

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