Liquid Switch

jitesh208
Jan 28, 2026 3
Live Preview

Live Editor

   <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>

    <div class="container">
        
        <input type="checkbox" id="liquid-toggle" class="liquid-toggle">
        
        <label for="liquid-toggle" class="toggle-container">
            <div class="liquid-bg"></div>
            
            <div class="morph-ball">
                <div class="face">
                    <div class="eye left"></div>
                    <div class="eye right"></div>
                    <div class="mouth"></div>
                </div>
            </div>
            
            <div class="sparkle"></div>
            <div class="sparkle"></div>
            <div class="sparkle"></div>
            <div class="sparkle"></div>
            
            <div class="drip"></div>
            <div class="drip"></div>
            <div class="drip"></div>
            
            <div class="ripple"></div>
        </label>
        
        <div class="status">OFF</div>
    </div>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }

        /* Floating bubbles background */
        .bubble {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            animation: float 8s ease-in-out infinite;
        }

        .bubble:nth-child(1) {
            width: 80px;
            height: 80px;
            left: 10%;
            bottom: -80px;
            animation-delay: 0s;
            animation-duration: 7s;
        }

        .bubble:nth-child(2) {
            width: 120px;
            height: 120px;
            left: 30%;
            bottom: -120px;
            animation-delay: 2s;
            animation-duration: 9s;
        }

        .bubble:nth-child(3) {
            width: 60px;
            height: 60px;
            left: 50%;
            bottom: -60px;
            animation-delay: 4s;
            animation-duration: 6s;
        }

        .bubble:nth-child(4) {
            width: 100px;
            height: 100px;
            left: 70%;
            bottom: -100px;
            animation-delay: 1s;
            animation-duration: 8s;
        }

        .bubble:nth-child(5) {
            width: 90px;
            height: 90px;
            left: 85%;
            bottom: -90px;
            animation-delay: 3s;
            animation-duration: 10s;
        }

        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.3;
            }
            90% {
                opacity: 0.3;
            }
            100% {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }

        .container {
            text-align: center;
            z-index: 10;
        }

        .title {
            font-family: 'Righteous', cursive;
            font-size: 2.5em;
            color: #fff;
            margin-bottom: 60px;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            animation: title-pulse 2s ease-in-out infinite;
        }

        @keyframes title-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }

        /* Hide checkbox */
        .liquid-toggle {
            display: none;
        }

        /* Toggle container */
        .toggle-container {
            position: relative;
            width: 280px;
            height: 140px;
            cursor: pointer;
            display: inline-block;
        }

        /* Main liquid blob background */
        .liquid-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #ff6b9d, #ffa06b);
            border-radius: 70px;
            transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 
                0 10px 40px rgba(255, 107, 157, 0.4),
                inset 0 -5px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* Liquid wave effect inside */
        .liquid-bg::before {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            top: -75%;
            left: -50%;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 40%;
            animation: wave 6s linear infinite;
        }

        .liquid-bg::after {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            top: -70%;
            right: -50%;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 45%;
            animation: wave 8s linear infinite reverse;
        }

        @keyframes wave {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Morphing ball */
        .morph-ball {
            position: absolute;
            width: 110px;
            height: 110px;
            top: 15px;
            left: 15px;
            background: linear-gradient(135deg, #fff, #f0f0f0);
            border-radius: 50%;
            transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 
                0 8px 30px rgba(0, 0, 0, 0.2),
                inset 0 -8px 20px rgba(0, 0, 0, 0.05),
                inset 0 8px 20px rgba(255, 255, 255, 0.8);
            z-index: 2;
        }

        /* Face on the ball */
        .face {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
        }

        /* Eyes */
        .eye {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #333;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .eye.left {
            left: 12px;
            top: 18px;
        }

        .eye.right {
            right: 12px;
            top: 18px;
        }

        /* Mouth - happy by default */
        .mouth {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 15px;
            border: 3px solid #333;
            border-top: none;
            border-radius: 0 0 20px 20px;
            transition: all 0.5s ease;
        }

        /* Sparkles around ball */
        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
            opacity: 0;
            animation: sparkle-anim 2s ease-in-out infinite;
        }

        .sparkle:nth-child(1) {
            top: 10px;
            left: 30px;
            animation-delay: 0s;
        }

        .sparkle:nth-child(2) {
            top: 30px;
            left: 10px;
            animation-delay: 0.5s;
        }

        .sparkle:nth-child(3) {
            top: 50px;
            left: 5px;
            animation-delay: 1s;
        }

        .sparkle:nth-child(4) {
            bottom: 30px;
            left: 10px;
            animation-delay: 1.5s;
        }

        @keyframes sparkle-anim {
            0%, 100% {
                opacity: 0;
                transform: scale(0) rotate(0deg);
            }
            50% {
                opacity: 1;
                transform: scale(1.5) rotate(180deg);
            }
        }

        /* Drip effect */
        .drip {
            position: absolute;
            width: 20px;
            height: 30px;
            background: linear-gradient(180deg, rgba(255, 107, 157, 0.8), rgba(255, 107, 157, 0));
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            opacity: 0;
            animation: drip-fall 2s ease-in infinite;
        }

        .drip:nth-child(1) {
            left: 60px;
            animation-delay: 0s;
        }

        .drip:nth-child(2) {
            left: 140px;
            animation-delay: 1s;
        }

        .drip:nth-child(3) {
            left: 220px;
            animation-delay: 0.5s;
        }

        @keyframes drip-fall {
            0% {
                top: 130px;
                opacity: 0;
                transform: scaleY(0);
            }
            20% {
                opacity: 1;
                transform: scaleY(1);
            }
            80% {
                opacity: 0.5;
            }
            100% {
                top: 200px;
                opacity: 0;
                transform: scaleY(1.5);
            }
        }

        /* Ripple effect */
        .ripple {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 110px;
            height: 110px;
            border: 3px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
        }

        /* CHECKED STATE - Transform everything */
        .liquid-toggle:checked ~ .toggle-container .liquid-bg {
            background: linear-gradient(135deg, #6b9dff, #6bffa0);
            box-shadow: 
                0 10px 40px rgba(107, 157, 255, 0.4),
                inset 0 -5px 20px rgba(0, 0, 0, 0.1);
        }

        .liquid-toggle:checked ~ .toggle-container .morph-ball {
            left: 155px;
            background: linear-gradient(135deg, #fff, #e8f4ff);
            animation: squish 0.8s ease;
        }

        @keyframes squish {
            0% { border-radius: 50%; }
            30% { border-radius: 50% 40% 50% 40%; }
            50% { border-radius: 40% 50% 40% 50%; }
            70% { border-radius: 50% 45% 50% 45%; }
            100% { border-radius: 50%; }
        }

        /* Change face to sleepy/happy when checked */
        .liquid-toggle:checked ~ .toggle-container .eye {
            height: 3px;
            border-radius: 0;
            background: #333;
        }

        .liquid-toggle:checked ~ .toggle-container .mouth {
            width: 35px;
            height: 18px;
            border-radius: 0 0 25px 25px;
        }

        /* Sparkles appear when checked */
        .liquid-toggle:checked ~ .toggle-container .sparkle {
            animation: sparkle-burst 0.8s ease-out forwards;
        }

        @keyframes sparkle-burst {
            0% {
                opacity: 0;
                transform: scale(0) translate(0, 0);
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: scale(1) translate(var(--tx, 20px), var(--ty, -20px));
            }
        }

        .liquid-toggle:checked ~ .toggle-container .sparkle:nth-child(1) {
            --tx: -30px;
            --ty: -30px;
        }

        .liquid-toggle:checked ~ .toggle-container .sparkle:nth-child(2) {
            --tx: 30px;
            --ty: -30px;
        }

        .liquid-toggle:checked ~ .toggle-container .sparkle:nth-child(3) {
            --tx: -30px;
            --ty: 30px;
        }

        .liquid-toggle:checked ~ .toggle-container .sparkle:nth-child(4) {
            --tx: 30px;
            --ty: 30px;
        }

        /* Ripple on click */
        .toggle-container:active .ripple {
            animation: ripple-expand 0.6s ease-out;
        }

        @keyframes ripple-expand {
            0% {
                width: 110px;
                height: 110px;
                opacity: 1;
            }
            100% {
                width: 300px;
                height: 300px;
                opacity: 0;
            }
        }

        /* Status text */
        .status {
            margin-top: 50px;
            font-family: 'Righteous', cursive;
            font-size: 1.8em;
            color: #fff;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.5s ease;
        }

        .liquid-toggle:checked ~ .status {
            color: #6bffa0;
            text-shadow: 0 0 20px rgba(107, 255, 160, 0.5);
        }

        /* Hover effect */
        .toggle-container:hover .morph-ball {
            transform: scale(1.05);
        }

        .toggle-container:hover .liquid-bg {
            box-shadow: 
                0 15px 50px rgba(255, 107, 157, 0.6),
                inset 0 -5px 20px rgba(0, 0, 0, 0.1);
        }

        .liquid-toggle:checked ~ .toggle-container:hover .liquid-bg {
            box-shadow: 
                0 15px 50px rgba(107, 157, 255, 0.6),
                inset 0 -5px 20px rgba(0, 0, 0, 0.1);
        }
const toggle = document.getElementById('liquid-toggle');
        const status = document.querySelector('.status');
        
        toggle.addEventListener('change', function() {
            if (this.checked) {
                status.textContent = 'ON';
            } else {
                status.textContent = 'OFF';
            }
        });
Categories

Liquid Switch

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
