Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - HTML & CSS - How to make Animated Toogle Pill using HTML & CSS
    HTML & CSS

    How to make Animated Toogle Pill using HTML & CSS

    Coding StellaBy Coding Stella13 June 2024No Comments4 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    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!

    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Hi-Tech Notification Button using HTML & CSS
    Next Article How to make Fishbowl – Save the fish using HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    HTML & CSS

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025
    HTML & CSS

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    HTML & CSS

    How to make Awesome Radar Animation using HTML & CSS

    8 May 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202419K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202416K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202414K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202412K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    JavaScript Mastery Roadmap: From Fundamentals to Expert Level

    26 January 2024

    10 Must-Have VSCode Extensions for Web Development 🛸

    25 January 2024

    How to make Glassy Profile Card using HTML & TAILWIND

    28 June 2024

    How to create Cross Road Game using HTML CSS and JS

    2 May 2025
    Latest Post

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood