[分享]css3按钮浮雕效果

CSS3 的众多新特性中，拥有大量的按钮效果，其中浮雕效果是被广泛应用的一种。浮雕效果可以使按钮看起来有层次感，既美观又有设计感，用 CSS3 来实现浮雕效果要比使用图片的方式方便很多。.button...

CSS3 的众多新特性中，拥有大量的按钮效果，其中浮雕效果是被广泛应用的一种。浮雕效果可以使按钮看起来有层次感，既美观又有设计感，用 CSS3 来实现浮雕效果要比使用图片的方式方便很多。

.button{
    border: none;
    background: #3e64af;
    color: #fff;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
}

.button:before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    width: 120%;
    height: 120%;
    background: #fff;
    opacity: .05;
    z-index: -1;
}

.button:active{
    box-shadow: inset 0 0 20px rgba(0,0,0,0.12);
}

.button:active:before{
    opacity: .1
} 

在上方的代码中，我们使用了伪元素:before 来创建一个看起来像是浮雕的效果。这个元素是绝对定位的，而且需要设置 z-index 来将它放置在按钮的下面。选择器 :active 是用来设置点击后的效果的，让按钮看起来更加立体。

浮雕效果不仅适用于按钮，也可以用来美化其他元素。只需要在元素下面添加一个伪元素，**通过透明的设置和旋转角度来显得如有立体感并达到浮雕效果。**

在现代的网站设计中，个性化和视觉元素的表达越来越重要。按钮浮雕效果通过简单的 CSS 代码实现，使得设计师可以创造更加独特的网站界面。