/* 背景层 */
.switch-component {
	position: relative;
	width: 50px;
	height: 25px;
	background:none;
	border-radius: 30px;
	border: none;margin-right: 10px;
	outline: none;
	-webkit-appearance: none;
	transition: all .2s ease;
	border: 1px solid #eee;
}

/* 按钮 */
.switch-component::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background-color: #fff;
	border-radius: 50%;
	transition: all .2s ease;
}

/* 选中状态时，背景色切换 */
.switch-component:checked {
	background: -webkit-gradient(linear,left top,right top,from(#f73a65),to(#7700e9));
	background: linear-gradient(90deg,#f73a65 0,#7700e9 100%);
}

/* 选中状态时，按钮的位置移动 */
.switch-component:checked::after {
	left: 50%;
}