Animated Checkbox UI | HTML, CSS & JavaScript

<div class="preview">
            <div class="title">Checkmark Draw</div>
            <div class="desc">Animated checkmark stroke</div>

</div>
    </div>

<div class="preview">
            <div class="title">Neon Glow</div>
            <div class="desc">Glowing active state</div>

</div>
    </div>

<div class="preview">
            <div class="title">Slide Fill</div>
            <div class="desc">Sliding fill animation</div>

</div>
    </div>

<div class="preview">
            <div class="title">Scale Pop</div>
            <div class="desc">Pop scaling animation</div>

</div>
    </div>

<div class="preview">
            <div class="title">Rotate</div>
            <div class="desc">Rotation animation</div>

</div>
	</div>

<div class="preview">
            <div class="title">Pulse</div>
            <div class="desc">Pulse click animation</div>

</div>
	</div>

<div class="preview">
            <div class="title">Border Grow</div>
            <div class="desc">Expanding border animation</div>

</div>
    </div>

<div class="preview">
            <div class="title">Circle Morph</div>
            <div class="desc">Square to circle animation</div>

</div>
    </div>

<div class="preview">
            <div class="title">Ripple</div>
            <div class="desc">Material ripple effect</div>

</div>
    </div>

<div class="preview">
            <div class="title">Gradient Fill</div>
            <div class="desc">Gradient active state</div>

</div>
    </div>

body {
            margin: 0;
            font-family: Inter, Arial;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            color: white;
        }

/* SECTION LAYOUT */

.section {
            display: flex;
            gap: 40px;
            padding: 40px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

.preview {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            border-radius: 18px;
            padding: 40px;
        }

.code {
            flex: 1;
            background: #0c0c0c;
            border-radius: 18px;
            padding: 30px;
            font-family: monospace;
            font-size: 16px;
            overflow: auto;
        }

/* TEXT */

.title {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 8px;
        }

.desc {
            opacity: .7;
            margin-bottom: 25px;
            font-size: 14px;
        }

/* CHECKBOX BASE */

input {
            display: none;
        }

.checkbox {
            width: 38px;
            height: 38px;
            border: 2px solid white;
            border-radius: 8px;
            cursor: pointer;
            position: relative;
            transition: .35s;
        }

/* 1 CHECK DRAW */

.draw:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 18px;
            border: solid #00e5ff;
            border-width: 0 3px 3px 0;
            top: 6px;
            left: 13px;
            transform: rotate(45deg) scale(0);
            transition: .3s;
        }

input:checked+.draw:after {
            transform: rotate(45deg) scale(1);
        }

/* 2 GLOW */

input:checked+.glow {
            background: #00ffd0;
            box-shadow: 0 0 10px #00ffd0, 0 0 25px #00ffd0;
        }

/* 3 SLIDE FILL */

.slide {
            overflow: hidden;
        }

.slide:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: #ff4d6d;
            left: -100%;
            top: 0;
            transition: .35s;
        }

input:checked+.slide:after {
            left: 0;
        }

/* 4 SCALE */

input:checked+.scale {
            background: #00ff88;
            transform: scale(1.2);
        }

/* 5 ROTATE */

input:checked+.rotate {
            background: #ffaa00;
            transform: rotate(180deg);
        }

/* 6 PULSE */

input:checked+.pulse {
            background: #ff00ff;
            animation: pulse .45s;
        }

@keyframes pulse {
            0% {
                transform: scale(1)
            }

50% {
                transform: scale(1.3)
            }

100% {
                transform: scale(1)
            }
        }

/* 7 BORDER GROW */

input:checked+.border {
            border: 6px solid #00aaff;
        }

/* 8 CIRCLE MORPH */

input:checked+.circle {
            border-radius: 50%;
            background: #ff4081;
        }

/* 9 RIPPLE */

.ripple {
            overflow: hidden;
        }

input:checked+.ripple:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: #00bfff;
            animation: ripple .45s;
        }

@keyframes ripple {
            from {
                transform: scale(0);
                opacity: 1
            }

to {
                transform: scale(1);
                opacity: 0
            }
        }

/* 10 GRADIENT */

input:checked+.gradient {
            background: linear-gradient(45deg, #ff0080, #00e5ff);
        }

/* RESPONSIVE */

@media(max-width:900px) {

.section {
                flex-direction: column;
            }

}

- Animated Checkbox UI

Live Preview