html CheckboxначистомCSS3

Posted 2021-05-11

body {
	padding: 40px;
	font-size: 50px;
	font-family: "Arial";
	background-color: #fefefe;
	color:#3E4651;
}

label {
	margin-bottom: 50px;
}

.checkbox-1 {
	cursor:pointer;
	display: block;
	
	input {
		display: none;
		
		& + span:before {
			content:'off';
			font-size: 25px;
			height: 50px;
			width: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			float: left;
			background-color: #E76B6B;
			color:#FEFEFE;
			border-radius:5px;
			margin-right: 20px;
			transition: all 0.3s ease-in-out;
			text-shadow:0 0 15px rgba(0,0,0,0.5);
			box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.5);
		}
		
		&:checked + span:before {
			content:'on';
			background-color: #249991;
		}
	}//input
}//checkbox-1

//EXAMPLE_2
.checkbox-2 {
	cursor:pointer;
	display: block;
	
	input {
		display: none;
		
		& + span {
			display: block;
			position: relative;
			float: left;
			width: 100px;
			height: 50px;
			margin-right: 20px;			
			background-color: #E76B6B;
			border-radius:50px;
			transition:all 0.2s ease-in-out;
			box-shadow:inset 0 0 10px rgba(0,0,0,.6);
		}
		
		&:checked + span {
			background-color: #249991;
		}
		& + span:before {
			content:'';
			position: absolute;
			top: 2%;
			left: 2px;
			height: 96%;
			width: 50px;
			background-color: #fefefe;
			border-radius:50px;
			transition:all 0.2s ease-in-out;
			box-shadow:inset 5px -5px 10px 5px rgba(0,0,0,.2),
						  0 0 4px 0 rgba(0,0,0,.7);
		}
		
		&:checked + span:before {
			left: 48px;
		}
	}//input
}//checkbox-2

<label class="checkbox-1">
	<input type="checkbox">
	<span>checkbox-1</span>
</label>

<label class="checkbox-1">
	<input type="checkbox" checked>
	<span>checkbox-1</span>
</label>

<label class="checkbox-2">
	<input type="checkbox">
	<span></span>
	checkbox-2
</label>

<label class="checkbox-2">
	<input type="checkbox" checked>
	<span></span>
	checkbox-2
</label>