Close Menu
    HTML & CSS

    How to make Minion Eye Toggle using HTML & CSS

    Coding StellaBy No Comments6 Mins Read

    Let’s create a Minion Eye Toggle using HTML and CSS. This project will feature a toggle switch styled like a Minion’s eye that changes its state when clicked, making it a fun and interactive element.

    We’ll use HTML to structure the toggle and CSS to style it, creating the Minion’s eye effect with animations for the toggle action.

    Let’s dive into building the Minion Eye Toggle. Whether you’re a beginner or an experienced developer, this project offers a playful way to enhance your web design skills while adding a creative and engaging element to your projects. Let’s bring the Minion fun to web design!

    HTML :

    This HTML code creates a simple toggle switch (styled to look like a Minion’s eye) using a checkbox. The toggle switch is placed inside a div element with a class of “toggle.” The input is a checkbox with an ID of “btn,” and a label is associated with it to create a clickable area. The span element inside the label represents the “thumb” or the part of the toggle that moves when clicked. The actual appearance of the toggle switch is controlled by the linked style.css file.

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Minion Eye Toggle</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
	<div class="toggle">
		<input type="checkbox" id="btn">
		<label for="btn">
			<span class="thumb"></span>
		</label>
	</div>
</body>
</html>

    CSS :

    This CSS defines the styles for a toggle switch, designed to look like a Minion’s eye, and includes animations. The variables (--sz, --tr, etc.) control size, transitions, and colors for different states. The body has a gradient background and centers the switch on the screen. The toggle switch consists of a hidden checkbox (input) and a clickable label that serves as the toggle background. When the checkbox is checked, the label’s background and text colors change from “OFF” to “ON,” and the circular “thumb” (representing the eye) slides across the switch. Animations are used to make the eye blink and move smoothly when toggled.

    :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 {
	/* Eye detail for thumb */
	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%;
}

    In conclusion, creating the Minion Eye Toggle using HTML and CSS has been an enjoyable and engaging project. By combining HTML for structure and CSS for styling and animations, we’ve designed a fun, interactive toggle switch that resembles a Minion’s eye.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply