Html
    Css
    Js

    
                        
 .box {
	/* width:1000px;
	*/
            margin:0 auto;
	text-align:center;
}
header {
	max-width:768px;
	color:#111111;
}
.phone {
	width:100%;
	text-align:center;
}
.btn {
	display:block;
	width:50px;
	height:23px;
	border-radius:15px;
	margin:40px auto;
	position:relative;
}
.btn0 {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	margin:0;
	opacity:0;
}
.btn:before {
	content:' ';
	position:absolute;
	top:1px;
	bottom:0;
	width:21px;
	height:21px;
	border-radius:50%;
	box-shadow:0 0 2px #444444;
}
.btnActive {
	background-color:#65da65;
	border:2px solid #65da65;
}
.btnActive::before {
	background-color:#ffffff;
	right:1px;
}
.btnunActive {
	background-color:#ffffff;
	border:2px solid #eeeeee;
}
.btnunActive::before {
	background-color:#65da65;
	left:0;
	top:0;
	width:23px;
	height:23px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

IOS风格按钮切换效果

更新时间:2020-04-22 20:36:10

ios风格的切换按钮(input),通过jquery的点击事件改变input的状态。

0