如何用css制作滑块按钮

html：
<input type="checkbox" class="switch"/>

css：
*{
			  outline: none;
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;			
		}
	input{
				 position:relative;
				width: 2.8rem;
				height: 1.4rem;
				background-color:#e6e6e6;
				border-radius: 1rem;
				border: 1px solid #ccc;

			}
			input[type="checkbox"]:after{
				content: '';
				display: inline-block;
				width: 1.2rem;
				height: 1.2rem;
				background-color: #ffffff;
				border-radius: 50%;
				position: absolute;
				top:0.5px;
				left: 0px;
				transition-duration:1.2s;
				
			}
	input[type="checkbox"]:checked{
		background-color:#01b4e1;
	}
	input[type="checkbox"]:checked:after{
		position: absolute;
		left: 1.45rem;
	}	

点击后样式

点击前样式