纯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;
        }

也许你还喜欢