button.css

body{
	background-color: #0d0d0d;
	padding: 0;
	margin: 0;
}

.check{
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, 50%);
}

input[type="checkbox"]{
	-webkit-appearance: none;
	width: 300px;
	height: 180px;
	background-color: #262626;
	border-radius: 200px;
	border: 5px solid #333333;
	outline: none;
	transition: .5s;
}

input:checked[type="checkbox"]{
	background-color: 	#FFFF00;
	border: 5px solid #CD5C5C;
}

input[type="checkbox"]:before{
	content: "";
	position: absolute;
	top: 8px;
	left: 10px;
	border-radius: 50%;
	width: 170px;
	height: 170px;
	background-color: #000;
	transition: .5s;
}

input:checked[type="checkbox"]:before{
	left: 130px;
}

input[type="checkbox"]:after{
	content: "";
	position: absolute;
	top: 75px;
	left: 75px;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	border: 5px solid white;
	transition: .5s;
}

input:checked[type="checkbox"]:after{
	left: 215px;
	width: 0;
	border-radius: 0;
}