AIMRAN
HTML + CSSToggles

Do not disturb door hanger toggle

A sign hanging from the knob of a wooden door flips over and swings from Come in to Do not disturb.

Settings

16px
1x

Code

<label class="uvq03-dhg"><input type="checkbox" role="switch"><span class="dr"><i class="pn"></i><i class="kb"></i><span class="cd" aria-hidden="true"><b class="f a"><span>Come in</span></b><b class="f b"><span>Do Not Disturb</span></b></span></span>Focus mode</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.

Markdown version with all the code, for AI assistants

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

This switch is a wooden door with a raised panel, a brass knob and a card hanging from it, like the signs in hotel rooms. Off, the green side says Come in; on, the card flips over in 3D to the red Do not disturb side and swings on the knob before settling. It fits focus modes, meeting rooms and hotel apps.

The main color is the do not disturb side and the second one the welcome side. The card texts are in the HTML, so you can write Busy and Free or Recording and Open instead, keeping them short.