html制作3d按钮,纯CSS3 3D按钮 按钮酷似牛奶般剔透

本文作者html5tricks，转载请注明出处

接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码，总体而言，这款CSS3 3D按钮主要由HTML代码和CSS代码组成。实现原理是用两个span来替代

HTML代码：

+

–

HTML代码很简单，我们可以看出每个checkbox下面均定义了2个span，通过对这两个span样式的定义，我们就可以模拟出checkbox选中的动画效果了。

接下来是CSS代码：

.toggle {

margin: 4px;

display: inline-block;

}

.toggle {

box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25), inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);

border-radius: 8px;

background: #ccd0d4;

position: relative;

height: 140px;

width: 140px;

}

.tog