TikTok Tutorial #55- How to create Toggles in CSS

Learn with us how to create Toggles in CSS!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim Are you tired of reading your horoscope daily? Then check the link in bio to read the code of How to #55 👨‍💻 #webdev #code #uiux #css #toggles #programming ♬ original sound - Creative Tim

1. HTML Code

.toggle-wrapper
	.toggle.normal
		input#normal(type="checkbox")
		label.toggle-item(for="normal")
	.name Normal

.toggle-wrapper
	.toggle.transparent
		input#transparent(type="checkbox")
		label.toggle-item(for="transparent")
	.name Transparent

.toggle-wrapper
	.toggle.checkcross
		input#checkcross(type="checkbox")
		label.toggle-item(for="checkcross")
			.check
	.name Yes & No

.toggle-wrapper
	.toggle
		input#gravity(type="checkbox")
		label.toggle-item(for="gravity")
	.name Gravity

.toggle-wrapper
	.toggle.pancake-stack
		input#pancake(type="checkbox")
		label.toggle-item(for="pancake")
			.pancakes
				.pancake
				.pancake
				.pancake
				.butter
	.name Pancake Stacks
			
.toggle-wrapper
	.toggle.dog-rollover
		input#doggo(type="checkbox")
		label.toggle-item(for="doggo")
			.dog
				.ear
				.ear.right
				.face
					.eyes
					.mouth
	.name Doggo Wants a Treat
					
.toggle-wrapper
	.toggle.basketball-hoop
		input#hoop(type="checkbox")
		label.toggle-item(for="hoop")
			.ball__wrapper
				.ball
			.hoop
	.name Kobe Bryant Tribute

.toggle-wrapper
	.toggle.beer-pong
		input#beer-pong(type="checkbox")
		label.toggle-item(for="beer-pong")
		.cup
			.lid
	.name Beer Pong



.footer
	.explanation
		| Part of the 
		a(href="https://codepen.io/collection/XJNKLz/" target="_blank") CSS Animations collection here
		|. 
		br
		| See the 
		a(href="https://codepen.io/oliviale/full/vPvvyr" target="_blank") Buttons version here
		|.

		footer
			a(href="https://twitter.com/meowlivia_" target="_blank")
				i.icon-social-twitter.icons
			a(href="https://github.com/oliviale" target="_blank")
				i.icon-social-github.icons
			a(href="https://dribbble.com/oliviale" target="_blank")
				i.icon-social-dribbble.icons

2. CSS Code

body {
  background: #2e394d;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

* {
	box-sizing: border-box;
	&:before, &:after {
		content: '';
		position: absolute;
	}
}

input {
	height: 40px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 40px;
}

.toggle-wrapper {
	flex: 1 1 calc(100% / 3);
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	@media (max-width: 960px) {
		flex: 1 1 calc(100% / 2);
	}
	@media (max-width: 700px) {
		flex: 1 1 100%;
	}
	&:nth-child(1) {
		background: #dec387;
	}
	&:nth-child(2) {
		background: #de8797;
	}
	&:nth-child(3) {
		background: #87aade;
	}
	&:nth-child(4) {
		background: #c5de87;
	}
	&:nth-child(5) {
		background: #87ded2;
	}
	&:nth-child(6) {
		background: #c487de;
	}
	&:nth-child(7) {
		background: #de8787;
		.toggle {
			transform: translate(-40px, 40px);
		}
	}
	&:nth-child(8) {
		background: #decf87;
		.toggle {
			transform: translate(-40px, 40px);
		}
	}
}

.name {
	width: 80%;
	position: absolute;
	font: 500 14px 'Rubik', sans-serif;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
	bottom: 15px;
	right: 15px;
	text-align: right;
}

.toggle {
	position: relative;
	display: inline-block;
}

label.toggle-item {
	width: 7em;
	background: #2e394d;
	height: 3em;
	display: inline-block;
	border-radius: 50px;
	margin: 40px;
	position: relative;
	transition: all .3s ease;
	transform-origin: 20% center;
	cursor: pointer;
	&:before {
		display: block;
		transition: all .2s ease;
		width: 2.3em;
    height: 2.3em;
		top: .25em;
		left: .25em;
    border-radius: 2em;
    border: 2px solid #88cf8f;
		transition: .3s ease;
	}
}

.normal {
	label {
		background: #af4c4c;
    border: .5px solid rgba(117, 117, 117, 0.31);
    box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.2), 0 -3px 4px rgba(0,0,0,0.15);
		&:before {
			border: none;
			width: 2.5em;
			height: 2.5em;
			box-shadow: inset 0.5px -1px 1px rgba(0, 0, 0, 0.35);
			background: #fff;
			transform: rotate(-25deg);
		}
		&:after {
			background: transparent;
			height: calc(100% + 8px);
			border-radius: 30px;
			top: -5px;
			width: calc(100% + 8px);
			left: -4px;
			z-index: 0;
			box-shadow: inset 0px 2px 4px -2px rgba(0,0,0,0.2), 0px 1px 2px 0px rgba(151, 151, 151, 0.2);
		}
	}
}

#normal:checked + label {
	background: #4caf50;
	&:before {
		left: 67px;
	}
}

.transparent {
	label {
		background: transparent;
		border: 3px solid #fff;
		height: 3.35em;
		&:before {
			border: 3px solid #fff;
			width: 2em;
			height: 2em;
			top: .3em;
			left: .3em;
			background: #fff;
		}
	}
}

#transparent:checked + label {
	&:before {
		transform: translateX(59px);
	}
}

.checkcross {
	label:before {
		content: none;
	}
	.check {
		border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    position: absolute;
    background: #8BC34A;
    transition: .4s ease;
    top: 4.5px;
    left: 4.5px;
		&:before, &:after {
			height: 4px;
			border-radius: 10px;
			background: #fff;
			transition: .4s ease;
		}
		&:before {
			width: 25px;
			transform: rotate(-45deg) translate(-6px, 20px);
		}
		&:after {
			width: 10px;
			transform: rotate(45deg) translate(20px, 11px);
		}
	}
}

#checkcross:checked + label {
	.check {
		left: 68px;
		transform: rotate(360deg);
		background: #c34a4a;
		&:before {
			width: 27px;
			transform: rotate(-45deg) translate(-8px, 18px);
    
		}
		&:after {
			width: 27px;
    	transform: rotate(45deg) translate(18px, 8px);
		}
	}
}

#gravity:checked + label {
	transform: rotate(90deg);
	&:before {
		transform: translateX(67px);
		transition-delay: .2s;
		transition: 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) .2s; 
	}
}

.beer-pong {
	label:before {
		background: #f9f9f9;
    box-shadow: inset 0 -3px 0 0 #c6c5c5;
    border: none;
    width: 2.5em;
    height: 2.5em;
    top: .25em;
    left: .25em;
	}
	.cup {
		top: -3%;
		right: -118px;
		border-top: 90px solid #f44336;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		height: 3px;
		position: absolute;
		width: 80px;
    transform-origin: bottom right;
    transition: .2s cubic-bezier(0.42, 0.5, 0.58, 1);
		&:before {
			box-shadow: 0 -10px 0 0px rgba(39, 39, 39, 0.1), 0px -20px 0 0px rgba(39, 39, 39, 0.1);
			border-radius: 3px;
			overflow: hidden;
			background: rgba(39, 39, 39, 0.1);
			width: 120%;
			left: -5px;
			height: 4px;
			top: -40px;
		}
		.lid {
			position: absolute;
			width: 95px;
			height: 8px;
			border-radius: 20px;
			background: #efefef;
			bottom: 86px;
			left: -23px;
			&:after {
				background: #efefef;
				width: 48px;
				height: 5px;
				left: 50%;
				margin-left: -24px;
				top: 94px;
				border-radius: 0 0 3px 3px;
			}
		}
	}
}

#beer-pong:checked  {
	~ .cup {
		animation: .2s linear cup 1s forwards;
	}
	+ label:before {
		animation: 2s linear bounce-off forwards;
	}
}

@keyframes cup {
	0% { transform: none; }
	50% { transform: rotate(75deg) translate(10px,15px); }
	90% { transform: rotate(70deg) translate(10px,15px); }
	100% { transform: rotate(75deg) translate(10px,15px); }
}

@keyframes bounce-off {
	0% { transform: translateY(0); }
	10%,25% { transform: translate(-20px, -80px); }
	50% { transform: rotate(163deg); transform-origin: 100px -12px; }
	70% { transform: rotate(0) translate(-3px, -8px);  transform-origin: 100px -12px;  }
	75% { transform: translate(20px, -8px);}
	80% { transform:  translate(30px,0px) }
	85% { transform:  translate(40px, -3px) }
	87% { transform:  translate(46px, 0px) }
	90% { transform:  translate(52px, -1px) }
	95% { transform:  translate(60px, 0px) }
	100% { transform:  translate(64px,0px);}
}


.dog-rollover {
	label {
		&:before {
			content: none;
		}
		.dog {
			display: inline-block;
			position: absolute;
			width: 2.5em;
			height: 2.5em;
			top: .25em;
			left: .2em;
			transition: .6s ease;
		}
		.eyes {
			position: absolute;
			width: 8px;
			height: 8px;
			background: #222;
			border-radius: 50%;
			transform: translate(8px, 14px);
			box-shadow: 16px 0 0 #222, 22px -4px 0 12px #e4ac04;
		}
		.ear {
			width: 18px;
			height: 20px;
			position: absolute;
			left: -4px;
			bottom: 80%;
			background: #f9bb00;
			margin-bottom: -5px;
			border-radius: 50% 50% 0 0 / 100% 100% 0 0;
			box-shadow: inset 4px 0 0 0px #ffffff, inset -4px 0 0 0px #ffffff;
			transform: rotate(-40deg);
			&.right {
				transform: rotate(60deg) scaleX(-1);
				left: auto;
				transform-origin: center bottom;
				transition: .4s ease-in-out;
				right: 0px;
			}
		}
		.face {
			overflow: hidden;
			border-radius: 50%;
			width: 2.5em;
			height: 2.5em;
			position: absolute;
			background: #fff;
			z-index: 8;
		}
		.mouth {
			position: absolute;
			background: #222;
			width: 14px;
			height: 7px;
			left: 50%;
			margin-left: -7px;
			bottom: 12px;
			border-radius: 2px 2px 20px 20px;
			bottom: 8px;
			transform: scale(0);
			transition: .1s ease;
			&:before {
				width: 8px;
				height: 8px;
				background: #ec788d;
				border-radius: 0 0 50% 50%;
				transform: translate(3px, 5px);
			}
		}
		&:before {
			border-color: white;
			background: white;
		}
	}
}

#doggo:checked  {
	~ .cup {
		animation: .2s linear cup 1s forwards;
	}
	+ label {
		.dog {
			left: 68px;
			transform: rotate(360deg);
		}
		.mouth {
			transform: scale(1);
			transition-delay: .7s;
		}
		.ear.right {
			transform: scaleX(-1) rotate(-35deg);
			transition-delay: .6s;
		}
	}
}


.basketball-hoop {
	label {
		background: #fdb827;
	}
	label:before {
		content: none;
	}
	.ball {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    position: absolute;
    background: #FF9800;
    border: 2px solid black;
    transition: .4s ease;
    top: 4px;
    left: 4px;
    background-image: radial-gradient(circle at -5px 10px, transparent 15px, black 15px, black 17px, transparent 17px), radial-gradient(circle at 41px 25px, transparent 15px, black 15px, black 17px, transparent 17px), linear-gradient(110deg, transparent 22px, black 22px, black 24px, transparent 24px), linear-gradient(18deg, transparent 22px, black 22px, black 24px, transparent 24px);
		&__wrapper {
			transition: .4s ease;
			width: 195%;
			height: 200%;
			transform-origin: 50% -2%;
		}
	}
	.hoop {
		top: -50px;
    right: -84px;
    width: 50px;
    background: #f44336;
    height: 8px;
    position: absolute;
		&:before {
			position: absolute;
			right: -4px;
			width: 7px;
			height: 60px;
			background: #cd2e22;
			top: -40px;
		}
		&:after {
			width: 40px;
			height: 35px;
			background: repeating-linear-gradient(45deg, transparent, transparent 13px, white 13px, white 15px), repeating-linear-gradient(-45deg, transparent, transparent 13px, white 13px, white 15px);
			top: 8px;
			border-radius: 0 0 20% 20%/40% 40% 60% 60%;
			border: 2px solid #fff;
			border-width: 0 2px;
			left: 2px;
			z-index: 20;
		}
	}
}
	
#hoop:checked  {
	+ label {
		background: #542583;
		transition-delay: 1.35s;
		.ball__wrapper {
			animation: 1.5s linear ball-wrapper forwards;
		}
		.ball {
			animation: 1.5s linear ball forwards;
		}
	} 
}

@keyframes ball {
	0% { transform: none; }
	40% { transform: rotate(-150deg) }
	48% { transform: rotate(-150deg) translateY(92px) }
	52% { transform: rotate(-150deg) translate(-10px, 80px) }
	56% { transform: rotate(-150deg) translate(-25px, 91px) }
	60% { transform: rotate(-150deg) translate(-35px, 86px) }
	65% { transform: rotate(-150deg) translate(-45px, 91px) }
	70% { transform: rotate(-150deg) translate(-50px, 87px) }
	75% { transform: rotate(-150deg) translate(-60px, 91px) }
	80% { transform: rotate(-150deg) translate(-65px, 88px) }
	85% { transform: rotate(-150deg) translate(-70px, 91px) }
	90% { transform: rotate(-150deg) translate(-75px, 90px) }
	95% { transform: rotate(-150deg) translate(-80px, 90px) }
	100% { transform: rotate(-150deg) translate(-82px,91px) }
}

@keyframes ball-wrapper {
	0% { transform: none; }
	40%, 100% { transform: rotate(150deg); }
}

.pancake-stack {
	label:before {
		content: none;
	}
	.pancakes {
		transition: .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
	.pancake {
		background: #e27c31;
		border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    position: absolute;
		transition: .4s ease;
		top: 2px;
		left: 4px;
		box-shadow: 0 2px 0 2px #fbbe7c;
		&:nth-child(2) {
			left: 0;
			top: -3px;
			transform: scale(0);
			transition: .2s ease .2s;
		}
		&:nth-child(3) {
			top: -8px;
			transform: scale(0);
			transition: .2s ease .2s;
			&:before, &:after {
				background: #ef8927;
				border-radius: 20px;
				width: 50%;
				height: 20%;
			}
			&:before {
				top: 20px;
				left: 5px;
			}
			&:after {
				top: 22px;
				right: 5px;
			}
		}
	}
	.butter {
		width: 12px;
    height: 11px;
    background: #fbdb60;
    top: 6px;
    left: 20px;
    position: absolute;
    border-radius: 4px;
    box-shadow: 0 1px 0 1px #d67823;
		transform: scale(0);
		transition: .2s ease;
	}
}

#pancake:checked  {
	+ label {
		.pancakes {
			transform: translateX(70px);
		}
		.pancake {
			&:nth-child(2) {
				transform: scale(1);
				transition-delay: .2s;
			}
			&:nth-child(3) {
				transform: scale(1);
				transition-delay: .4s;
			}
		}
		.butter {
			transform: scale(1);
			transition-delay: .6s;
		}
	} 
}

.footer {
	flex-wrap: wrap;
	padding: 5rem 5rem 3rem;
	text-align: center;
	min-height: 20vh;
	display: flex;
	font: 14px/1.7 'Rubik';
	color: #fff;
	align-items: center;
	justify-content: center;
	a {
		text-decoration: none;
		color: #fff;
		padding: 3px 0;
		border-bottom: 1px dashed;
		&:hover {
			border-bottom: 1px solid;
		}
	}
}

footer {
	margin-top: 1.5rem;
	a {
		text-decoration: none;
		display: inline-block;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: transparent;
		border: 1px dashed #fff;
		color: #fff;
		margin: 5px;
		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}
		.icons {
			margin-top: 8px;
			display: inline-block;
			font-size: 20px;
			&:before {
				position: relative;
			}
		}
	}
}

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

• TikTok
• Instagram
• Twitter
• Facebook
• Blog

Other useful resources:

• Free Resources (UI Kits, Admin, and Mobile Templates)
• UI/UX Design Book
• Tailwind CSS UI/UX Design Course - Code Included
• The Ultimate UI/UX Design Course