[分享]css3按钮点击线性特效

CSS3中提供了丰富的特效，如边框、阴影、渐变、动画等。其中，按钮点击的线性特效可以让网页设计更具交互性和美感。.btn { width: 150px; height: 50px; border: n...

CSS3中提供了丰富的特效，如边框、阴影、渐变、动画等。其中，按钮点击的线性特效可以让网页设计更具交互性和美感。

.btn {
  width: 150px;
  height: 50px;
  border: none;
  outline: none;
  color: white;
  background: linear-gradient(to right, #667eea, #764ba2);
  position: relative;
  z-index: 0;
  cursor: pointer;
}

.btn:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #667eea, #764ba2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-in-out;
}

.btn:hover:after {
  transform: scaleX(1);
  transform-origin: right;
} 

上述代码中，首先定义了按钮的基本样式，包括宽高、颜色、背景等。然后通过伪类`:after`定义按钮被点击后的效果，即添加一个与按钮颜色相同的线性渐变背景，初始状态下覆盖整个按钮，但是z-index设为-1隐藏在按钮后面。当鼠标悬浮在按钮上时，将`transform`属性的值设为`scaleX(1)`，即沿X轴方向放大，从而达到类似按钮被点击的效果，同时通过`transition`属性将变化过程变为平滑的过渡，提升用户体验。