div+css实现立体开机关机开关按钮效果代码-html代码-BFW代码库

div+css实现立体开机关机开关按钮效果代码

代码语言：html

代码描述：div+css实现立体开机关机开关按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
body{
    background: black;
    padding: 100px;
}
    .container {
        width: 150px;
        height: 130px;
        padding-top: 20px;
        margin: 50px auto
    }

    #power {
        position: absolute;
        left: -9999px
    }

    label {
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: relative;
        margin: auto;
        border: 4px solid #636679;
        background: -webkit-radial-gradient(center,ellipse cover,#efefef 0,#eee 80%,#fff 100%);
        background: -moz-radial-gradient(center,ellipse cover,#efefef 0,#eee 80%,#fff 100%);
        background: radial-gradient(center,ellipse cover,#fefefe 0,#eee 80%,#fff 100%);
        box-shadow: inset 0 -5px 10px 0 #d0d5eb,inset 0 5px 10px 0 #fff,0 0 0 1px #333;
        cursor: pointer;
        text-align: center;
        font-size: 40px;
        color: #0f0;
        line-height: 100px;
        text-shadow: -1px -1px 0 #fff,1px 1px 0 #fff;
        transition: all .1s ease-in-out
    }

    label:after,label:before {
        display: block;
        content: "";
        position: absolute
    }

    label:before {
        width: 150px;
        height: 150px;
        border-radius: 20px;
        background: -webkit-linear-gradient(top,#fefefe 0,#eee 30%,#ddd 82%,#ddd 100%);
        background: -moz-linear-gradient(top,#fefefe 0,#eee 30%,#ddd 82%,#ddd 100%);
        background: linear-gradient(top,#fefefe 0,#eee 30%,#ddd 82%,#ddd 100%);
        box-shadow: 0 10px 30px 0 #000;
        top: -25px;
        left: -25px;
        z-index: -2
    }

    label:after {
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: #fff;
        top: -15px;
        left: -15px;
        z-index: -1;
        box-shadow: 0 -2px 5px 0 #fefefe,0 2px 5px 0 #ccc;
        background: #d2d7ed;
        background: -webkit-linear-gradient(top,#ddd 0,#ddd 30%,#eee 82%,#efefef 100%);
        background: -moz-linear-gradient(top,#ddd 0,#ddd 30%,#eee 82%,#efefef 100%);
        background: linear-gradient(top,#ddd 0,#ddd 30%,#eee 82%,#efefef 100%)
    }

    .light {
        display: block;
        width: 12px;
        height: 12px;
        position: absolute;
        top: -12px;
        right: -12px;
        background: -webkit-radial-gradient(center,ellipse cover,#fff 0,#d6f804 80%,#bade32 100%);
        background: -moz-radial-gradient(center,ellipse cover,#fff 0,#d6f804 80%,#bade32 100%);
        background: radial-gradient(center,ellipse cover,#fff 0,#d6f804 80%,#bade32 100%);
        box-shadow: inset 0 1px 1px 0 #333,inset 0 -1px 1px 0 #333,0 0 5px 1px #bade32;
        border-ra.........完整代码请登录后点击上方下载按钮下载查看