<main>
<ul class="btn_wrap">
	<li class="left active">on</li>
	<li class="right">off</li>
</ul>
</main>
body,
button{
	font-family: 'Noto Sans KR', sans-serif;
	word-break: keep-all
}
body {
	font-size: 14px;
	color: #4c4c4c;
	cursor: default;
	-webkit-overflow-scrolling: touch;
  background:#e7e7e7
}
button {
	background: 0;
	border: 0;
	padding: 0;
	cursor: pointer
}

button:focus{
	outline: 0
}
header,
main{
	display: block
}
body,
div,
ul,
li{
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box
}

li {
	list-style: none
}
.btn_wrap{
	width:200px;
	height:50px;
	position: relative;
	margin:200px auto;
  background:#fff;
	border-radius: 50px;
  box-shadow:0 0.5px 6px rgba(0,0,0,0.0.5)

}
.btn_wrap li{
	float:left;
	width:50%;
	position:relative;
	line-height: 50px;
	text-align: center;
	font-size:18px;
	cursor: pointer;
}
.btn_wrap li.active{
	color:#fff;
	transition-duration: 0.3s;
}
.btn_wrap:before{
	content:'';
	width:100px;
	height: 100%;
	position:absolute;
	left:0;
	top:50%;
	transform: translateY(-50%);
	border-radius: 50px;
	background: #4c4c4c;
	box-sizing: border-box;
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.1, 0.9, 0.25, 1)
}
.btn_wrap.right:before{
	left:100px;
}
.btn_wrap.left:before{
	left:0;
}
$(document).on("click", ".btn_wrap li", function(){
		if($(this).hasClass("left")){
			$(this).parents(".btn_wrap").addClass("left");
			$(this).parents(".btn_wrap").removeClass("right");
		}else{
			$(this).parents(".btn_wrap").removeClass("left");
			$(this).parents(".btn_wrap").addClass("right");
		}
		$(this).addClass("active");
		$(this).siblings().removeClass("active");
	});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.