纯CSS3实现3D开关按钮

纯CSS3实现3D开关按钮1059
纯CSS3实现3D开机按钮是一款利用纯CSS3实现的3D开机按钮,这款按钮并没有惊人的动画效果,但是却利用了CSS3的许多特性给按钮添加了阴影以及光泽,让按钮显得非常立体。
 .wrapper        {            width: 150px;            height: 150px;            margin: 60px auto;            border-radius: 50%;            background: #b25244;            background: linear-gradient(#b25244, #5e1912);            position: relative;            cursor: pointer;            padding: 20px;            box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.13), 0 5px 8px rgba(0, 0, 0, 0.5), 0 10px 10px 4px rgba(0, 0, 0, 0.3);        }        .wrapper:after        {            content: "";            position: absolute;            left: -20px;            right: -20px;            top: -20px;            bottom: -20px;            z-index: -2;            border-radius: inherit;            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.15);        }        .wrapper:before        {            content: "";            position: absolute;            left: -10px;            right: -10px;            top: -10px;            bottom: -10px;            z-index: -1;            border-radius: inherit;            box-shadow: inset 0 10px 10px rgba(0, 0, 0, 0.13);            -webkit-filter: blur(1px);            filter: blur(1px);        }        .inner        {            position: relative;            width: 100%;            height: 100%;            border-radius: inherit;            background: linear-gradient(#8a2c20, #9e4235);            display: block;            box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.05), 0 2px 5px rgba(255, 255, 255, 0.1);        }        .inner:after        {            position: absolute;            width: 50px;            height: 50px;            background: white;            background: linear-gradient(#eaeceb, #8d8d8d);            left: 50%;            top: 50%;            content: "";            border-radius: inherit;            margin: -25px 0 0 -25px;            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);        }        .inner:before        {            position: absolute;            content: "";            width: 40px;            height: 40px;            left: 50%;            top: 50%;            border-radius: inherit;            background: inherit;            margin: -20px 0 0 -20px;            z-index: 2;            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3), 0 1px 2px white;        }        .inner span        {            display: block;            width: 20px;            height: 20px;            background: #8f3327;            position: absolute;            left: 50%;            margin-left: -10px;            top: 25px;            z-index: 3;            position: relative;        }        .inner span:before        {            content: "";            position: absolute;            width: 6px;            height: 25px;            background: linear-gradient(#ffffff, #cbcbcd);            border-radius: 10px;            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);            left: 50%;            margin-left: -3px;        }

也许你还喜欢