Let’s create an Animated Toggle Pill using HTML and CSS. This toggle switch will have a modern, sleek design with smooth animations to enhance user interaction.
We’ll use HTML to structure the toggle switch and CSS to style it and add the animation effects.
Let’s get started on building the Animated Toggle Pill. Whether you’re a beginner or an experienced developer, this project offers a great way to practice your web design skills and create a visually appealing, interactive element for your website. Let’s dive in!
HTML :
This HTML code showcases custom-styled checkboxes using fieldsets to demonstrate different animations and states. The checkboxes, styled as “chips,” include default slide animations, grow animations, and bounce animations. There is also a section for disabled checkboxes. Each checkbox has a different label (e.g., Pear, Banana) and custom colors. The styles and animations are defined in an external CSS file referenced in the `<head>`.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Toggle Pill</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <fieldset> <legend>Slide Animation (Default)</legend> <input type="checkbox" class="chip" role="switch" value="Pear" aria-label="Pear" /> <input type="checkbox" class="chip" role="switch" value="Banana" aria-label="Banana" style="--color: #fd5" checked /> <input type="checkbox" class="chip" role="switch" value="Apple" aria-label="Apple" style="--color:#f88" /> <input type="checkbox" class="chip" role="switch" value="Peach" aria-label="Peach" style="--color:#fa3" /> </fieldset> <fieldset> <legend>Grow Animation</legend> <input type="checkbox" class="chip grow" role="switch" value="Pear" aria-label="Pear" /> <input type="checkbox" class="chip grow" role="switch" value="Banana" aria-label="Banana" style="--color: #fd5" /> <input type="checkbox" class="chip grow" role="switch" value="Apple" aria-label="Apple" style="--color:#f88" /> <input type="checkbox" class="chip grow" role="switch" value="Peach" aria-label="Peach" style="--color:#fa3" checked /> </fieldset> <fieldset> <legend>Bounce Animation</legend> <input type="checkbox" class="chip bounce" role="switch" value="Pear" aria-label="Pear" /> <input type="checkbox" class="chip bounce" role="switch" value="Banana" aria-label="Banana" style="--color: #fd5" /> <input type="checkbox" class="chip bounce" role="switch" value="Apple" aria-label="Apple" style="--color:#f88" checked /> <input type="checkbox" class="chip bounce" role="switch" value="Peach" aria-label="Peach" style="--color:#fa3" /> </fieldset> <fieldset> <legend>Disabled Styles</legend> <input type="checkbox" class="chip bounce" role="switch" value="Pear" aria-label="Pear" disabled /> <input type="checkbox" class="chip bounce" role="switch" value="Banana" aria-label="Banana" style="--color: #fd5" disabled/> <input type="checkbox" class="chip bounce" role="switch" value="Apple" aria-label="Apple" style="--color:#f88" checked disabled /> <input type="checkbox" class="chip bounce" role="switch" value="Peach" aria-label="Peach" style="--color:#fa3" checked disabled /> </fieldset> <!-- partial --> </body> </html>
CSS :
This CSS styles checkboxes with the class “chip” to have a custom appearance. It sets general styles like font size, border, and position. The `::after` pseudo-element displays the checkbox value with padding, while the `::before` pseudo-element creates a visual marker with specific size, color, and positioning. It includes hover effects, disabled states, and transitions for smooth animations. Special media queries adjust for print settings, reduced motion preferences, and high contrast modes.
input:where(.chip[type="checkbox"]) {
--color: #6c6;
font-size: 1rem;
appearance: none;
position: relative;
border: 1px solid #0004;
border-radius: 100em;
overflow: clip;
margin: 0;
display: inline-block;
box-sizing: border-box;
padding: 0;
&::after {
content: attr(value);
white-space: pre;
line-height: 1;
position: relative;
padding: 0.5em 1em 0.5em 2em;
display: block;
}
&::before {
content: "";
display: inline-block;
width: 0.75em;
aspect-ratio: 1;
background: linear-gradient(currentcolor 0 0), linear-gradient(currentcolor 0 0);
background-position: -200% -2em, 2em -200%, 50% 50%;
background-size: 1em 0.125em, 0.125em 1em;
background-repeat: no-repeat;
background-color: var(--color);
border-radius: 50%;
position: absolute;
top: 50%;
left: 1.125em;
translate: -50% -50%;
rotate: 45deg;
transition: width 0.25s, background-position 0.5s;
}
&.grow, &.bounce {
&::before {
background-position: 50% 50%, 50% 50%, 50% 50%;
background-size: 0 0, 0 0;
transition: width 0.25s, background-size 0.5s;
}
}
&.bounce {
&::before {
transition-timing-function: ease-in-out, cubic-bezier(0.75, 0, 0.5, 2);
}
}
&:checked {
&::before {
width: 200%;
background-position: 50% 50%, 50% 50%, 50% 50%;
background-size: 1em 0.125em, 0.125em 1em;
}
}
&:disabled {
--color: #eee !important;
color: #6c6c6c;
border-color: #0001;
}
&:hover:not(:disabled) {
border-color: #000a;
background-color: rgb(from var(--color) r g b / 10%);
transition: 0.4s;
}
}
@media print {
input:where(.chip[type="checkbox"]) {
&, &::before, &::after {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
}
@media (prefers-reduced-motion) {
input:where(.chip[type="checkbox"]) {
&, &::before, &::after {
transition: none !important;
}
}
}
/*
high-contrast styles:
- all the dots will be highlight color
- Disabled will be gray
- No crosses (they are removed as backgrounds)
*/
@media (prefers-contrast: more) {
input:where(.chip[type="checkbox"]) {
&::before {
background: highlight;
}
&:disabled {
border-color: gray-text;
&::before {
background: graytext;
}
&::after {
color: graytext;
}
}
}
}
/* DEMO - START */
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
gap: 3em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
fieldset {
border-color: #0000;
& legend {
color: #666696;
font-weight: 500;
}
}
/* DEMO - END */
In conclusion, creating an Animated Toggle Pill using HTML and CSS has been a fun and informative project. By combining HTML for structure and CSS for styling and animations, we’ve crafted a sleek and interactive toggle switch that enhances user experience
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!
