FreeWeb
Grey 3D button with hover effect by cssbuttons-io
- 386386 downloads
- 243243 likes
- 153153 saves
Works with
- Claude Code
- Codex
- Cursor
- and 3 more
Realistic 3D red power switch v1.0.0
Use this resource to add an eye-catching switch to a page
New
- 486 downloads
- 225 likes
- 105 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install skeuomorphic-red-power-switchFirst time: connect the CLI with
npx --yes palatekit@latest loginThe agent builds a rocker button in perspective from gradients and 3D transforms. On click it tilts, a light flickers and the shadow fades. You get a striking demo element for a launch page or a game.
Mostly picked by
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeWeb
Black button with hover effect "Massive Mayfly" by cssbuttons-io
- 334334 downloads
- 194194 likes
- 201201 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Teal 3D button with hover effect by cssbuttons-io
- 336336 downloads
- 145145 likes
- 207207 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Green loader by fanishah
- 381381 downloads
- 221221 likes
- 209209 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Green button with hover effect by cssbuttons-io
- 415415 downloads
- 153153 likes
- 145145 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
White button by YUGE0
- 412412 downloads
- 193193 likes
- 123123 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Animated white 3D button by cssbuttons-io
- 366366 downloads
- 194194 likes
- 202202 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
White 3D card with hover effect by javierBarroso
- 388388 downloads
- 153153 likes
- 193193 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- README.md: step-by-step integration guide
- Toggle-switches/Nawsome_empty-snail-69.html: the component HTML and CSS, ready to copy
- The variables and selectors to edit for colours and size
Good fit for
- Launch page with a "Power on" button
- Electronics product demo
- Mini-game or interactive page
Not for
- Discreet setting inside a form
- Small mobile layouts: the panel is 150 x 195 px
Tags
- switch
- 3d
- skeuomorphism
- css
- interactive
About
You say
"Add the red switch from the resource to my launch page and reveal the content when it is on."
Component published by Nawsome on Uiverse under the MIT license, documented by PalateKit.
Show moreShow less
Prerequisites
- You bring
- The action or content tied to the switch and The light colour
How to use it
- Give the resource to your coding agent
- Ask it to insert the component where you want it and adapt text and colours
- Open the page and check hover and mobile rendering
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- README.md0.7 KB
- Toggle-switches/Nawsome_empty-snail-69.html3.5 KB
Origin and licence
Modified by PalateKit
- Author
- Nawsome
- Source
- github.com/uiverse-io/galaxy/tree/adbd2adde0a299a3956ea288fb444ec01891ca41/Toggle-switches/Nawsome_empty-snail-69.html
- Licence
- MIT
Notice
Version modifiée de « Nawsome_empty-snail-69 » (Nawsome, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
How do I add it to my site?
Copy the HTML and the CSS block into your page, or the CSS into your stylesheet. No JavaScript is needed.
How do I customise it?
Edit: the red (#980000, #6f0000, #ff1818) is replaced in .button, .light and the :checked box-shadow; size is set in .switch (width, height). To respect visitors sensitive to motion, wrap the animations in an @media (prefers-reduced-motion: no-preference) rule.