AIMRAN
HTML + CSSToggles

Sleepy face toggle

The knob is a little sleeping face that rolls across, opens its eyes, blinks and blushes when on.

Settings

16px
1x

Code

<label class="uv-tfc"><input type="checkbox" role="switch"><span class="tr"><span class="kn"><i class="e l"></i><i class="e r"></i><i class="ch l"></i><i class="ch r"></i><i class="mo"></i></span></span>Alarm clock</label>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Toggles

See all Toggles

Elastic iOS toggle

TogglesHTML + CSS

Day and night toggle

TogglesHTML + CSS

ON / OFF toggle

TogglesHTML + CSS

Neon glow toggle

TogglesHTML + CSS

Toggle with cross and check

TogglesHTML + CSS

Neumorphic toggle

TogglesHTML + CSS

Wall light switch toggle

TogglesHTML + CSS

Liquid toggle

TogglesHTML + CSS

Where to use it

Character turns a tiny control into a moment people remember. Off, the knob shows closed eyes and a flat mouth; on, it rolls to the other side, opens round eyes, blinks every few seconds and gets rosy cheeks. It is perfect for alarm clocks, kids' apps, sleep trackers and friendly onboarding preferences.

The main color fills the track and the second tints the cheeks. All features are plain CSS shapes, so the face scales cleanly with the size control and the blinking stops when reduced motion is on.