[分享]css中怎么实现水晶按钮

CSS中如何实现水晶按钮

button {
  /* 设置按钮的大小、颜色等样式 */
  width: 120px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #f2f2f2;
}

button:before,
button:after {
  /* 给按钮添加伪元素 */
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -1;
}

button:after {
  /* 给按钮添加阴影效果 */
  filter: blur(20px);
}

button:hover {
  /* 设置按钮鼠标悬停时的效果 */
  background-color: #6bb9f0;
}

button:hover:before {
  /* 给按钮伪元素添加渐变效果 */
  background: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.5) 100%
  );
  animation: btn-shine 2s infinite;
}

@keyframes btn-shine {
  /* 给按钮伪元素添加闪烁效果 */
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
} 

通过上述代码，我们可以实现一个水晶样式的按钮，其中通过伪元素实现了按钮周围的白色透明效果，同时通过动画实现了闪烁和渐变效果，提升了按钮的视觉效果和用户体验。使用水晶按钮不仅可以提高网页的美观程度，同时也可以带来更好的响应效果，方便用户进行交互操作。