css发光按钮源代码

本文分享一段简单的CSS代码，可以让按钮产生发光的效果。

button {
  background-color: #4CAF50;  /* 设置按钮背景色 */
  border: none;  /* 去除按钮边框 */
  color: white;  /* 设置按钮文字颜色为白色 */
  padding: 15px 32px;  /* 设置按钮内边距 */
  text-align: center;  /* 设置文字居中显示 */
  text-decoration: none;  /* 去除文字下划线 */
  display: inline-block;  /* 设置为行内块元素，以便添加边框投影效果 */
  font-size: 16px;  /* 设置文字大小 */
  margin: 4px 2px;  /* 设置按钮间距 */
  cursor: pointer;  /* 鼠标放到按钮上时的指针样式 */
  position: relative;  /* 设置定位为相对定位 */
  overflow: hidden;  /* 超出部分隐藏 */
}

button::before {
  content: '';  /* 伪元素，没有任何内容 */
  position: absolute;  /* 设置定位为绝对定位 */
  top: 0;  /* 设置离顶部的距离为0 */
  left: 0;  /* 设置离左边的距离为0 */
  width: 100%;  /* 设置宽度为100% */
  height: 100%;  /* 设置高度为100% */
  background-color: rgba(255,255,0.2);  /* 设置背景颜色为白色，透明度为0.2 */
  border-radius: 50%;  /* 设置为圆形 */
  transform: scale(0);  /* 设置缩放比例为0 */
  transition: transform 0.5s ease-in-out;  /* 设置过渡时间为0.5秒，缓和动画效果 */
  z-index: 1;  /* 设置z轴的值为1，让伪元素显示在按钮上层 */
}

button:hover::before {
  transform: scale(2);  /* 缩放比例为2：1 */
}

css发光按钮源代码

解释一下这段代码的作用：

第一段代码设置了按钮的样式，包括颜色、大小、字体、边距等，这里不赘述。
第二段代码使用伪元素before创建了一个背景，该背景在按钮的正上方，宽度、高度都为100%。该背景在初始状态下是隐藏的，透明度为0.2，是为了保证获取到按钮的颜色。
第三段代码设置了一个hover效果。当鼠标移动到按钮上方时，背景伪元素before会缓慢地放大。同时，透明度会保持0.2不变，即是背景保持半透明状态。通过这个过渡，按钮会看起来像闪闪发亮。

通过使用上述CSS代码，我们可以轻易地为按钮添加发光效果，增强按钮的视觉效果，提高用户体验。

css发光按钮源代码

相关文章