css质感开关checkbox美化效果代码-html代码-BFW代码库

css质感开关checkbox美化效果代码

代码语言：html

代码描述：css质感开关checkbox美化效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
        	text-align:center;
        	background-color:#dcdfe5
        }
        p {
        	text-shadow:0 1px 0 rgba(255,255,255,.7),0 -1px 0 rgba(0,0,0,.5);
        	font-size:28px;
        	color:#777
        }
        .btn-bg {
        	position:relative;
        	z-index:1;
        	width:160px;
        	height:80px;
        	margin:0 auto;
        	border-top:1px solid #a5a7ac;
        	border-bottom:1px solid #fff;
        	border-radius:60px;
        	background:#ccc;
        	background:#bdbfc1;
        	background:linear-gradient(to bottom,#bbbdbf 15%,#f8fafd 100%);
        	overflow:hidden
        }
        .btn-in {
        	position:relative;
        	top:11px;
        	left:15px;
        	width:130px;
        	height:55px;
        	border-left:1px solid #B4B4B4;
        	border-top:1px solid #919191;
        	border-bottom:1px solid #919191;
        	border-right:1px solid #919191;
        	border-radius:60px;
        	background:#c8c8c8;
        	background:linear-gradient(to right,#fff 50%,#c8c8c8 100%);
        	box-shadow:inset -2px 0 8px rgba(126,126,126,0.6),inset 2px 1px 1px rgba(255,255,255,.5);
        	transition:all .2s linear
        }
        .btn-in:before,.btn-in:after {
        	content:'';
        	z-index:-1;
        	position:absolute;
        	bottom:25px;
        	left:10px;
        	width:75px;
        	height:35px;
        	box-shadow:0 15px 18px rgba(0,0,0,0.9);
        	border-radius:60px;
        	transform:skew(-21deg)rotate(-12deg);
        	transition:all .2s linear
        }
        input:checked ~ .btn-in:before,input:checked ~ .btn-in:after {
        	content:'';
        	z-index:-1;
        	position:absol.........完整代码请登录后点击上方下载按钮下载查看