Checkbox Hacks

19 snippets

Browse Checkbox Hacks examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-checkbox-hack

Snippets(19)

Ergonomic Toggle (CSS)
A ergonomic toggle (css) built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
HTML Accordion (Tailwind Only)
A html accordion (tailwind only) built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Morphing Liquid Toggle Switch
A morphing liquid toggle switch built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 50+, Edge 79+, Firefox 50+, Safari 10+
Features
SVG Morphing, GSAP Animation, Elastic Easing, Checkbox Hack
Pure CSS Home Media (Ambilight)
A pure css home media (ambilight) built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Simple To-Do List Built with Tailwind CSS
A simple to-do list built with tailwind css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Skeuomorphic Wood Texture Toggles
A skeuomorphic wood texture toggles built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, SCSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
Skeuomorphism, CSS Patterns, Input Hack, Detailed Shadows
Skull Toggle (CSS)
A skull toggle (css) built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Tailwind Glassy Profile
A tailwind glassy profile built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Tailwind Social Profile Light with Theme Toggle
A tailwind social profile light with theme toggle built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS :has() Notification Toggle
A css :has() notification toggle built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
CSS :has(), Checkbox Hack, No JavaScript, Stateful UI
Responsive
Yes
Expandable Wallet Payment Card
A expandable wallet payment card built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
Expandable UI, Pure CSS State, Smooth Animation, :has() Selector
Responsive
Yes
Grow Up, They Said...
A grow up, they said... built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3, JavaScript, Sass
Difficulty
Intermediate
Features
3D Transforms, Staggered Entrance, Interactive Cards
Responsive
Yes
Pure CSS Morphing Dark Mode Toggle
A pure css morphing dark mode toggle built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Safari 15.4+, Firefox 121+
Features
Morphing Animation, Parent Selection, No JavaScript, Accessibility Focus
Responsive
Yes
CSS :has() Character Select Screen
A css :has() character select screen built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Beginner
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
CSS State Management, No JavaScript Logic, Responsive Grid
Responsive
Yes
Industrial Ember Glow Toggle Switch
A industrial ember glow toggle switch built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 88+, Edge 88+, Firefox 84+, Safari 14+
Features
Volumetric Glow, Pure CSS State, Layered Shadows, Custom Easing
Responsive
Yes
Pure CSS Mix-Blend-Mode Dark Toggle
A pure css mix-blend-mode dark toggle built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 41+, Edge 79+, Firefox 32+, Safari 8+
Features
No JavaScript, Color Inversion, Curtain Effect
Responsive
Yes
Can :has() Connect 4?
A can :has() connect 4? built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
CSS :has(), Checkbox Hack
Difficulty
Advanced
Features
CSS-only game logic, Win condition detection, No-JS implementation
Flip-Disc Mechanical Checkbox
A flip-disc mechanical checkbox built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 36+, Edge 12+, Firefox 16+, Safari 9+
Features
3D Transforms, Flip Animation, Checkbox Hack, Tactile UI
Responsive
Yes
E-commerce Product Filter
A e-commerce product filter built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
CSS Logic, Sticky Sidebar, No JavaScript
Responsive
Yes

Snippets(19)

related hubs