css3 立体感按钮

CSS3 立体感按钮的设计可以让页面看起来更加生动，访客更容易被吸引。

.button {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
  }
.button::before {
    content: ';
    position: absolute;
    width: inherit;
    height: inherit;
    top: 4px;
    left: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    transform: perspective(40px) rotateX(-10deg) rotateY(10deg);
    transition: all 0.3s;
    z-index: -1;
}
.button:hover {
    color: #fff;
}
.button:hover::before {
    transform: perspective(40px) rotateX(-5deg) rotateY(5deg);
    top: 2px;
    left: 2px;
}
    

上面的代码是一个基本的立体感按钮设计。可以看到，我们对按钮的伪元素进行了设置，使用了perspective()和rotate()属性来创建3D效果。当鼠标移入按钮时，我们使用:hover选择器改变伪元素的transform属性，让按钮立体感更加明显。

使用CSS3 立体感按钮的好处是可以让网站或应用程序更加有活力和吸引力，但是要记住，按钮的设计应该抓住用户的注意力，并且不应该让页面过于复杂。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！