一个简单的css+jQuery制作的开关样式

效果截图

html代码

<div class="default-btn">
  <i></i>
</div>

css代码

.default-btn{
	position: relative;
	width:52px;
	height:28px;
	border-radius:14px;
	background:#999;
}
.default-btn::after{
	content:'x';
	position: absolute;
	font-size:14px;
	line-height:28px;
	right:10px;
	color:#fff;
}
.default-btn i{
	position: absolute;
	left:1px;
	top:1px;
	display: block;
	width:26px;
	height:26px;
	border-radius:13px;
	background:#fff;
	transition:all .3s;
}
.default-btn.active{
	background:var(--maincolor);
}
.default-btn.active i{
	left:auto;
	right:1px;
}
.default-btn.active::after{
	content:'√';
	font-size:14px;
	line-height:28px;
	right:auto;
	left:10px;
	color:#fff;
}

js代码

$(function(){
	$(".default-btn").click(function(){
		$(this).toggleClass("active");
	})
})