Html 如何在悬停时使矩形按钮上的边框变圆

发布于08月19日

我正在try 使用border-radius来圆化鼠标悬停按钮的角点.然而，当我这样做时，角落不再在可点击/悬停区域，所以当你将鼠标悬停在任何角落上时，按钮可以预见地开始闪烁.

有什么办法可以绕过这件事吗？如果可能的话，我希望避免添加另一个HTML元素，并且只使用CSS来处理.

我用的是Tailwincss，我的分数是play set up here.

推荐答案

可以使用pseudo-elements(::before/::after)使可单击区域与元素的实际形状不匹配.

我的首选是使用伪元素作为可点击区域，在本例中可以看到半透明的青色:

button {
  position: relative;
  background: transparent;
  border: 0;
  color: white;
  background: red;
  height: 64px;
  padding: 0 64px;
  border-radius: 8px;
  transition: border-radius linear 300ms;
}

button:hover {
  border-radius: 32px;
}

button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 255, 255, .125);
}

<button>Click me!</button>

但您也可以反过来使用伪元素制作border-radius的动画/过渡:

button {
  position: relative;
  background: transparent;
  border: 0;
  color: white;
  height: 64px;
  padding: 0 64px;
}

button::before {
  content: "";
  position: absolute;
  background: red;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 8px;
  transition: border-radius linear 300ms;
}

button:hover::before {
  border-radius: 32px;
}