diff --git a/submissions/examples/tada-checkbox-pari-28/README.md b/submissions/examples/tada-checkbox-pari-28/README.md new file mode 100644 index 0000000000..de6cb8d26a --- /dev/null +++ b/submissions/examples/tada-checkbox-pari-28/README.md @@ -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. \ No newline at end of file diff --git a/submissions/examples/tada-checkbox-pari-28/demo.html b/submissions/examples/tada-checkbox-pari-28/demo.html new file mode 100644 index 0000000000..8a6c2607b5 --- /dev/null +++ b/submissions/examples/tada-checkbox-pari-28/demo.html @@ -0,0 +1,49 @@ + + + + + +Tada Checkbox + + + + + +
+ +

Playlist Settings

+ + + + + + + +
+ + + \ No newline at end of file diff --git a/submissions/examples/tada-checkbox-pari-28/style.css b/submissions/examples/tada-checkbox-pari-28/style.css new file mode 100644 index 0000000000..b0345542d6 --- /dev/null +++ b/submissions/examples/tada-checkbox-pari-28/style.css @@ -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; + +} + +} \ No newline at end of file