« Un code » par sahrawilouay

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 June 2025

:root {
	/* Define size, transition properties, and color variables */
	--sz: 10vmin;
	--tr: all 0.5s ease 0s;
	--c-on-1: #fed501;
	--c-on-2: #e4bf00;
	--c-off-1: #224056;
	--c-off-2: #172c3c;
	--c-wht-1: #edecf5;
	--c-wht-2: #eaedef;
	--c-wht-3: #ccd2d5;
}

* {
	/* Set global box-sizing and transition */
	box-sizing: border-box;
	transition: var(--tr);
}

body {
	/* Full screen layout with background gradient */
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--c-wht-1), var(--c-wht-2), var(--c-wht-3));
}

.toggle {
	/* Toggle switch container */
	position: relative;
	width: calc(var(--sz) * 4);
	height: calc(var(--sz) * 2);
	display: flex;
	align-items: center;
	justify-content: center;
}

input {
	/* Hide checkbox input */
	display: none;
}

label[for=btn] {
	/* Style for the toggle background */
	position: absolute;
	width: calc(var(--sz) * 4);
	height: calc(var(--sz) * 2);
	background: var(--c-off-1);
	border-radius: var(--sz);
	box-shadow: 0 0 0 calc(var(--sz) / 7) var(--c-off-2);
}

#btn:checked + label {
	/* Change background and shadow when toggled ON */
	background: var(--c-on-1);  
	box-shadow: 0 0 0 calc(var(--sz) / 7) var(--c-on-2);
}

label[for=btn]:before,
label[for=btn]:after {
	/* Display ON/OFF text */
	content: "OFF";
	position: absolute;
	color: var(--c-off-2);
	left: calc(var(--sz)* -2);
	top: calc(var(--sz)* 0.55);
	font-family: Arial, Helvetica, sans-serif;
	font-size: calc(var(--sz)* 0.7);
	text-shadow: 0 calc(var(--sz) * -0.025) calc(var(--sz) * 0.025) #0008, 0 calc(var(--sz) * 0.025) calc(var(--sz) * 0.025) #fff9;
}

label[for=btn]:after {
	/* ON text styling */
	content: "ON";
	color: var(--c-wht-3);
	position: absolute;
	left: calc(var(--sz) * 4.65);
}

#btn:checked + label[for=btn]:before {
	/* Change OFF text color when checked */
	color: var(--c-wht-3);
	text-shadow: 0 calc(var(--sz) * -0.025) calc(var(--sz) * 0.025) #0008, 0 calc(var(--sz) * 0.025) calc(var(--sz) * 0.025) #fff9;
}

#btn:checked + label[for=btn]:after {
	/* Change ON text color and shadow when checked */
	color: var(--c-on-2);
	text-shadow: 0 0 calc(var(--sz) * 0.5) var(--c-on-1), 0 calc(var(--sz) * -0.025) calc(var(--sz) * 0.025) #0008, 0 calc(var(--sz) * 0.025) calc(var(--sz) * 0.025) #fff9;
}

.thumb {
	/* Circular thumb for toggle switch */
	position: absolute;
	width: calc(var(--sz)* 2);
	height: calc(var(--sz)* 2);
	top: calc(var(--sz)* 0);
	left: calc(var(--sz)* 0);
	background: #fff;
	border-radius: var(--sz);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	overflow: hidden;
	box-shadow: 0 0 0 calc(var(--sz) / 7) var(--c-wht-1) inset;
	animation: go-back 1s ease 0s 1;
}

@keyframes go-back {
	/* Keyframe animation to move thumb left */
	0% { left: calc(100% - ((var(--sz) * 2))); }
	100% { left: calc(var(--sz)* 0); }
}

#btn:checked + label .thumb {
	/* Move thumb to the right when checked */
	transition: var(--tr);
	left: calc(100% - ((var(--sz) * 2)));
}

.thumb:before {
	content: "";
	position: absolute;
	width: calc(var(--sz) / 1.75);
	height: calc(var(--sz) / 1.75);
	background: radial-gradient(circle at 25% 50%, #fff 0 calc(var(--sz) * 0.05), #000 calc((var(--sz) * 0.05) + 1px) 100%);
	border-radius: 100%;
	left: calc(var(--sz) / 3);
	top: calc(var(--sz) / 1.25); 
	transition: var(--tr);
	animation: ojo 1s ease 0s;
}

@keyframes ojo {
	/* Eye animation for thumb */
	0% { 
		left: calc(var(--sz) / 3.5);
		top: calc(var(--sz) / 2.5);  
	}
	100% { 
		left: calc(var(--sz) / 3);
		top: calc(var(--sz) / 1.25);  
	}
}

#btn:checked + label .thumb:before {
	/* Move eye to a different position when checked */
	left: calc(var(--sz) / 3.5);
	top: calc(var(--sz) / 2.5); 
}

.thumb:after {
	/* Eyelid detail for thumb */
	content: "";
	position: absolute;
	width: calc(var(--sz) / 0.5);
	height: calc(var(--sz) / 0.5);
	background: linear-gradient(188deg, var(--c-wht-1) 0 calc(var(--sz) * 1.25), #fff0 calc((var(--sz) * 1.25) + 1px) 100%);
	background-size: 100% 200%;
	background-position: 50% 0%;
	transition: var(--tr);
	animation: parpado 1s ease 0s;
}

@keyframes parpado {
	/* Eyelid animation */
	0% { background-position: 50% 50%; }
	50% { background-position: 50% -5%; }
	75% { background-position: 50% 40%; }
	100% { background-position: 50% 0%; }
}

#btn:checked + label .thumb:after {
	/* Adjust eyelid position when checked */
	background-position: 50% 50%;
}

« Un code » par sahrawilouay

Recommandé

Un code par alejandrokundrah

Un code par anhtuanle2004thl

Un code par securearray494

HTML

CSS

JS

Recommandé

Un code par alejandrokundrah

Un code par anhtuanle2004thl

Un code par securearray494

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS