原来CSS可以这么酷：纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮

以下是实现这种效果的核心CSS代码：

.button {
  position: relative;
  background-color: #0096D6;
  border: none;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.5s;
}
 
.button:hover {
  background-color: #006295;
}
 
.button::before,
.button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white;
}
 
.button::before {
  width: 50px;
  height: 50px;
}
 
.button::after {
  width: 80px;
  height: 80px;
  animation: rotate 2s infinite linear;
}
 
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

这段代码创建了一个圆形按钮，其中::before伪元素是中心的白色点，而::after伪元素是旋转的光环。光环的旋转是通过CSS动画实现的，使得当鼠标悬停在按钮上时，光环可以不停旋转。