css实现逼真质感按钮checkbox开关效果代码-html代码-BFW代码库

css实现逼真质感按钮checkbox开关效果代码

代码语言：html

代码描述：css实现逼真质感按钮checkbox开关效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
input {
	display:none
}
body {
	background-color:#555;
	background-size:20px 20px;
	color:white;
	font-family:sans-serif;
	font-size:27px
}
.on,.off {
	position:absolute;
	text-align:center;
	-webkit-text-shadow:inset 1px 1px 1px black;
	width:100%
}
.on {
	color:#bbb;
	top:10px;
	-webkit-transition:all .1s;
	font-family:sans-serif
}
.off {
	bottom:5px;
	-webkit-transition:all .1s;
	transform:scaleY(0.85)
}
.but {
	background-color:#272727;
	border-radius:400px 400px 400px 400px / 400px 400px 300px 300px;
	border-bottom-width:0;
	box-shadow:inset 8px 6px 5px -7px rgba(0,0,0,1),inset -8px 6px 5px -7px rgba(0,0,0,1),inset 0 -3px 2px -2px rgba(200,200,200,.5),0 3px 3px -2px rgba(0,0,0,1),inset 0 -230px 60px -200px rgba(255,255,255,.2),inset 0 220px 40px -200px rgba(0,0,0,.3);
	display:block;
	font-size:27px;
	height:178px;
	position:relative;
	-webkit-transition:all .2s;
	width:200px
}
.back {
	background-color:black;
	background-image:-webkit-linear-gradient(0deg,transparent 30%,.........完整代码请登录后点击上方下载按钮下载查看