[分享]css3按钮立体效果

CSS3已经成为网页设计中不可或缺的一环。在网页设计中，按钮是不可或缺的一部分。CSS3可以帮助我们实现各种各样的按钮效果，其中最常用的效果之一就是按钮立体效果。按钮立体效果的实现，需要用到CSS3中...

CSS3已经成为网页设计中不可或缺的一环。在网页设计中，按钮是不可或缺的一部分。CSS3可以帮助我们实现各种各样的按钮效果，其中最常用的效果之一就是按钮立体效果。

按钮立体效果的实现，需要用到CSS3中的一些新特性，如transform、box-shadow和gradient等。

.button {
  display: inline-block;
  padding: 10px 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
  background: #6258e2;
  background: linear-gradient(to bottom, #6258e2 0%,#7c67e6 100%);
  border-radius: 3px;
  transform: translate3d(0,0,0);
  transition: all 0.2s ease-in-out;
  
  &:hover {
    position: relative;
    top: 2px;
    left: 2px;
    box-shadow: 1px 1px 0px rgba(0,0,0,0.2);
    transform: translate3d(-2px,-2px,0);
  }
} 

以上代码中，我们使用了linear-gradient属性来实现渐变背景色。同时，我们还使用了box-shadow属性为按钮添加了一个阴影效果。

最重要的是transform属性，可以让按钮实现3D立体效果。我们在:hover状态下，让按钮向左上角移动2px，同时添加一个浅色的阴影，就可以实现立体效果了。

按钮立体效果可以让按钮看起来更加立体和有质感，从而增强网站的视觉效果。在实际应用中，我们可以根据需要，对按钮的立体效果做出不同的调整。