[分享]css3按钮两边不同色

CSS3是网页设计中的一大利器，它可以实现许多令人惊叹的效果。其中之一是实现两边不同颜色的按钮。通过CSS3的伪元素和线性渐变效果，我们可以轻松地实现这种按钮样式。.btn { : relative;...

CSS3是网页设计中的一大利器，它可以实现许多令人惊叹的效果。其中之一是实现两边不同颜色的按钮。通过CSS3的伪元素和线性渐变效果，我们可以轻松地实现这种按钮样式。

.btn {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(to right, #FFBE0B, #FF0066);
  color: #fff;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;
  transition: 0.5s;
}

.btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to right, #FFBE0B, #FF0066);
  transform: translateY(-100%);
  transition: 0.5s;
}

.btn:hover:before {
  transform: translateY(0);
}

.btn:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to left, #FFBE0B, #FF0066);
  transform: translateY(100%);
  transition: 0.5s;
}

.btn:hover:after {
  transform: translateY(0);
} 

这段代码中，我们首先定义了一个.btn类，作为按钮的样式。然后使用linear-gradient函数实现渐变效果，样式中的to right和to left表示颜色渐变的方向。在按钮的:before伪元素中，我们使用translateY函数实现按钮上半部分向上移动的效果。同样的，在按钮的:after伪元素中，我们使用translateY函数实现按钮下半部分向下移动的效果。

通过这种方式，我们可以轻松地实现两边不同颜色的按钮样式。CSS3的强大效果让我们在网页设计中掌握更多的技能和套路，为用户带来更好的体验。