Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal Toggles</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container c-1">
<div>
<input type="checkbox" id="checkbox-1" hidden>
<label for="checkbox-1" class="checkbox">
<span class="check-yeah"></span>
<span class="check-nope"></span>
</label>
</div>
<div>
<input type="checkbox" id="checkbox-2" hidden checked>
<label for="checkbox-2" class="checkbox style-2">
<span class="check-yeah"></span>
<span class="check-nope"></span>
</label>
</div>
</div>
<div class="container c-2">
<div>
<input type="checkbox" id="checkbox-3" hidden>
<label for="checkbox-3" class="checkbox style-3">
<span class="check-yeah"></span>
<span class="check-nope"></span>
</label>
</div>
<div>
<input type="checkbox" id="checkbox-4" hidden checked>
<label for="checkbox-4" class="checkbox style-4">
<span class="check-yeah"></span>
<span class="check-nope"></span>
</label>
</div>
</div>
<div class="container c-3">
<div>
<input type="checkbox" id="checkbox-5" hidden>
<label for="checkbox-5" class="checkbox style-5">
<span class="check-yeah"></span>
<span class="check-nope"></span>
</label>
</div>
<div>
<input type="checkbox" id="checkbox-6" hidden checked>
<label for="checkbox-6" class="checkbox style-5 style-6">
<span class="check-yeah yeah"></span>
<span class="check-nope nope yeah"></span>
</label>
</div>
</div>
</body>
</html>Below is the css code for this video.
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
background: radial-gradient(#338b2240, #92272440);
text-align: center;
font-size: 16px;
font-family: sans-serif;
}
.container {
position: absolute;
left: 50%;
display: flex;
width: 100%;
justify-content: space-evenly;
}
.c-1 {
top: 25%;
transform: translate(-50%, -25%);
}
.c-2 {
top: 50%;
transform: translate(-50%, -50%);
}
.c-3 {
top: 75%;
transform: translate(-50%, -75%);
}
.checkbox {
position: relative;
display: inline-block;
height: 96px;
width: 192px;
background: #ffffff;
font-size: 24px;
line-height: 96px;
cursor: pointer;
perspective: 300px;
}
.checkbox::before {
content: "---";
position: absolute;
top: 0;
right: 0;
display: inline-block;
height: 96px;
width: 96px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
font-family: sans-serif;
transform-origin: 0% 50%;
transition: all 1s ease-in-out;
}
.checkbox [class^="check-"] {
padding: 32px;
font-family: sans-serif;
line-height: inherit;
transition: all 1s ease-in-out;
}
.checkbox.style-2::before {
transform-origin: 50% 50%;
}
.checkbox.style-5 {
background-color: #ffffff;
border: 1px solid #ffffff;
box-shadow: inset 0 2px 1px #00000040, inset 0 2px 12px #00000080, 0 0 64px #ffffffbf;
}
.checkbox.style-5::before {
margin-top: -2px;
margin-right: -1px;
box-shadow: 0 2px 1px #228b22, 0 2px 12px #228b22bf, 0 2px 32px #00000080, -2px 2px 3px #00000040;
transition: all 1s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
.checkbox.style-5.style-6 {
background: transparent;
border: none;
box-shadow: inset 0 0 1px transparent, inset 0 0 12px transparent, 0 0 64px transparent;
}
.checkbox.style-5.style-6::before {
display: none;
}
.checkbox.style-5.style-6 .yeah {
position: relative;
top: 0;
left: 1px;
background-color: #228b22;
color: #ffffff;
line-height: 32px;
padding: 32px 48px;
box-shadow: 0 2px 1px #228b22, 0 2px 12px #228b22bf, 0 2px 32px #00000080, -2px 2px 3px #00000040;
transition-duration: 1s;
}
.checkbox.style-5.style-6 .yeah.nope {
top: 2px;
background: #922724;
box-shadow: 0 0 1px #922724, 0 0 12px #922724bf, 0 2px 32px transparent, -2px 2px 3px transparent;
}
input[type="checkbox"]+.checkbox::before {
background-color: #228b22;
transform: rotateY(0deg);
}
input[type="checkbox"]+.checkbox.style-4::before {
transform: rotateY(0deg);
animation: style4Anim 1s ease-in-out forwards;
}
@keyframes style4Anim {
0% {
left: 0;
width: 96px;
}
25% {
left: 0;
width: 100%;
}
50% {
left: auto;
right: 0;
width: 100%;
}
100% {
right: 0;
width: 96px;
}
}
input[type="checkbox"]+.checkbox.style-5::before {
border-bottom: 1px solid #228b22;
text-shadow: 0 1px 0 #228b22;
transform: rotateY(0deg);
}
input[type="checkbox"]+.checkbox.style-2::before {
animation: style2Anim 0.5s ease-in-out forwards;
}
@keyframes style2Anim {
0% {
margin-right: 96px;
transform: rotateY(0deg) translateX(0) scale(1);
}
60%, 80% {
transform: rotateY(360deg) translateX(0) scale(1.5);
}
100% {
margin-right: 0;
transform: rotateY(360deg) translateX(0) scale(1);
}
}
input[type="checkbox"]+.checkbox.style-3::before {
animation: style3Anim 0.5s ease-in-out forwards;
}
@keyframes style3Anim {
0% {
margin-right: 96px;
transform: rotateX(0deg) translateX(0) scale(1);
}
60%, 80% {
transform: rotateX(360deg) translateX(0) scale(1.5);
}
100% {
margin-right: 0;
transform: rotateX(360deg) translateX(0) scale(1);
}
}
input[type="checkbox"]:checked+.checkbox::before {
background-color: #922724;
transform: rotateY(-180deg);
}
input[type="checkbox"]:checked+.checkbox.style-4::before {
transform: rotateY(0deg);
animation: style4BeforeAnim 1s ease-in-out forwards;
}
@keyframes style4BeforeAnim {
0% {
right: 0;
width: 96px;
}
25% {
right: 0;
width: 100%;
}
50% {
left: 0;
right: auto;
width: 100%;
}
100% {
left: 0;
width: 96px;
}
}
input[type="checkbox"]:checked+.checkbox.style-5::before {
transform: rotateY(0deg);
margin-right: 96px;
border-bottom: 1px solid #922724;
text-shadow: 0 1px 0 #922724;
box-shadow: 0 2px 1px #922724, 0 2px 12px #922724bf, 0 2px 32px #00000080, 2px 2px 3px #00000040;
}
input[type="checkbox"]:checked+.checkbox.style-5.style-6::before {
display: none;
}
input[type="checkbox"]:checked+.checkbox.style-5.style-6 .yeah {
top: 2px;
box-shadow: 0 2px 1px #228b22, 0 2px 12px #228b22bf, 0 2px 32px #00000080, 2px 2px 3px #00000040;
}
input[type="checkbox"]:checked+.checkbox.style-5.style-6 .yeah.nope {
top: 0;
background: #922724;
box-shadow: 0 2px 1px #922724, 0 2px 12px #922724bf, 0 2px 32px #00000080, 2px 2px 3px #00000040;
}
input[type="checkbox"]:checked+.checkbox.style-2::before {
animation: style2BeforeAnim 0.5s ease-in-out forwards;
}
@keyframes style2BeforeAnim {
0% {
transform: rotateY(0deg) translateX(0) scale(1);
}
60%, 80% {
transform: rotateY(-360deg) translateX(0) scale(1.5);
}
100% {
margin-right: 96px;
transform: rotateY(-360deg) translateX(0) scale(1);
}
}
input[type="checkbox"]:checked+.checkbox.style-3::before {
animation: style3BeforeAnim 0.5s ease-in-out forwards;
}
@keyframes style3BeforeAnim {
0% {
transform: rotateX(0deg) translateX(0) scale(1);
}
60%, 80% {
transform: rotateX(-360deg) translateX(0) scale(1.5);
}
100% {
margin-right: 96px;
transform: rotateX(-360deg) translateX(0) scale(1);
}
}Thanks for visiting