今天，分享一个用纯CSS实现的3D按钮。

CSS巧妙地利用方块阴影来实现三维物体的立体感，然后在按下按钮时修改方块阴影和顶部值。

感觉有一种按钮被按下的感觉。CSS代码非常小，如下所示

a.css-3d-btn {
职位：相对；
颜色：RGBA（255, 255, 255，1）；
文字装饰：无；
背景颜色：RGBA（219, 87, 51，1）；
字体微软雅黑
字体重量：700；
字体大小：3em；
显示块；
填料：4px；
边界半径：8px；
让我们使用框阴影使按钮看起来更三维。
盒子的影子：0px 9px 0px RGBA（219, 31, 5，1），0px 9px 25px RGBA（0, 0, 0。7）；
保证金：100px汽车；
宽度：160px；
文本对齐：中心；
WebKit的过渡：all.1s缓解；
-moz过渡：all.1s缓解；
过渡：all.1s缓解；
}

现在，如果我们在单击按钮时使方块/阴影变小，它就会看起来像是按钮被推了。

a.css-3d-btn：主动{
盒子的影子：0px 3px 0px RGBA（219, 31, 5，1），0px 3px 6px RGBA（0, 0, 0。9）；
职位：相对；
上图：6px；
}



结果如下：


以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。