SAPTARSHI-coder · SAPTARSHI-coder · Jul 14, 2026 · Jul 13, 2026
@@ -0,0 +1,42 @@
+# Tada Checkbox
+
+A responsive **Music Player inspired Tada Checkbox** component built entirely with HTML and CSS.
+
+## Features
+
+- Pure HTML & CSS
+- No JavaScript
+- Responsive
+- Accessible label + checkbox
+- Tada animation
+- CSS custom properties
+- Supports prefers-reduced-motion
+
+## Files
+
+- demo.html
+- style.css
+- README.md
+
+## Usage
+
+Open `demo.html` in any browser.
+
+Customize the appearance using the variables:
+
+```css
+--ease-primary
+--ease-secondary
+--ease-speed
+```
+
+## Accessibility
+
+- Native checkbox input
+- Clickable labels
+- Keyboard accessible
+- Motion reduction support
+
+## Fits EaseMotion CSS
+
+A lightweight reusable animated checkbox suitable for music players, settings pages, dashboards and modern interfaces.
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Tada Checkbox</title>
+<link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+<div class="music-card">
+
+<h2>Playlist Settings</h2>
+
+<label class="ease-checkbox">
+
+<input type="checkbox">
+
+<span class="checkmark"></span>
+
+<span class="text">Enable High Quality Audio</span>
+
+</label>
+
+<label class="ease-checkbox">
+
+<input type="checkbox">
+
+<span class="checkmark"></span>
+
+<span class="text">Download Offline Tracks</span>
+
+</label>
+
+<label class="ease-checkbox">
+
+<input type="checkbox">
+
+<span class="checkmark"></span>
+
+<span class="text">Auto Play Next Song</span>
+
+</label>
+
+</div>
+
+</body>
+</html>
@@ -0,0 +1,216 @@
+:root{
+
+--ease-primary:#8b5cf6;
+--ease-secondary:#ec4899;
+--ease-bg:#10131d;
+--ease-card:#1b2133;
+--ease-text:#ffffff;
+--ease-speed:.55s;
+
+}
+
+*{
+margin:0;
+padding:0;
+box-sizing:border-box;
+}
+
+body{
+
+min-height:100vh;
+
+display:flex;
+
+justify-content:center;
+
+align-items:center;
+
+background:linear-gradient(135deg,#0f172a,#1e293b);
+
+font-family:Arial,Helvetica,sans-serif;
+
+padding:20px;
+
+}
+
+.music-card{
+
+width:min(420px,100%);
+
+background:var(--ease-card);
+
+padding:28px;
+
+border-radius:18px;
+
+box-shadow:0 18px 45px rgba(0,0,0,.35);
+
+}
+
+.music-card h2{
+
+color:white;
+
+margin-bottom:24px;
+
+text-align:center;
+
+}
+
+.ease-checkbox{
+
+display:flex;
+
+align-items:center;
+
+gap:14px;
+
+cursor:pointer;
+
+padding:14px;
+
+border-radius:12px;
+
+transition:.3s;
+
+margin-bottom:12px;
+
+}
+
+.ease-checkbox:hover{
+
+background:rgba(255,255,255,.05);
+
+}
+
+.ease-checkbox input{
+
+position:absolute;
+
+opacity:0;
+
+}
+
+.checkmark{
+
+width:24px;
+
+height:24px;
+
+border:2px solid var(--ease-primary);
+
+border-radius:7px;
+
+display:flex;
+
+justify-content:center;
+
+align-items:center;
+
+transition:.3s;
+
+flex-shrink:0;
+
+}
+
+.checkmark::after{
+
+content:"✓";
+
+color:white;
+
+font-size:14px;
+
+opacity:0;
+
+transform:scale(.2);
+
+transition:.25s;
+
+}
+
+.text{
+
+color:var(--ease-text);
+
+}
+
+.ease-checkbox input:checked + .checkmark{
+
+background:linear-gradient(135deg,var(--ease-primary),var(--ease-secondary));
+
+border-color:transparent;
+
+animation:ease-tada var(--ease-speed);
+
+}
+
+.ease-checkbox input:checked + .checkmark::after{
+
+opacity:1;
+
+transform:scale(1);
+
+}
+
+@keyframes ease-tada{
+
+0%{
+
+transform:scale(1);
+
+}
+
+20%{
+
+transform:scale(.85) rotate(-8deg);
+
+}
+
+40%{
+
+transform:scale(1.18) rotate(8deg);
+
+}
+
+60%{
+
+transform:scale(.95) rotate(-5deg);
+
+}
+
+80%{
+
+transform:scale(1.08) rotate(4deg);
+
+}
+
+100%{
+
+transform:scale(1);
+
+}
+
+}
+
+@media(max-width:600px){
+
+.music-card{
+
+padding:20px;
+
+}
+
+}
+
+@media(prefers-reduced-motion:reduce){
+
+*{
+
+animation:none!important;
+
+transition:none!important;
+
+}
+
+}