css实现拟物化checkbox开关按钮效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现拟物化checkbox开关按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html class=''>
<head>
<meta charset='UTF-8'>
<title></title>
<style class="cp-pen-styles">
@import url(http://fonts.useso.com/css?family=Open+Sans:800);
*,
*:before,
*:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #2c3e50;
}
.button {
display: block;
position: absolute;
width: 240px;
height: 80px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: -webkit-linear-gradient(top, #11181f 0%, #161f29 100%);
background: linear-gradient(to bottom, #11181f 0%, #161f29 100%);
border-radius: 40px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
position: absolute;
display: block;
}
.button span:first-of-type {
z-index: 100;
top: 4px;
right: 4px;
width: 160px;
height: 72px;
background: -webkit-linear-gradient(top, #2c3e50 0%, #1e2a36 100%);
background: linear-gradient(to bottom, #2c3e50 0%, #1e2a36 100%);
box-shadow: 0 6px 4px r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0