HTML + CSSToggles

Ladybug takeoff toggle

On a leaf, the ladybug opens its red shell, unfolds its wings and hovers in the air.

Settings

16px
1x

Code

<label class="uvq03-lby"><input type="checkbox" role="switch"><span class="lf"><i class="sh"></i><span class="bg"><i class="wg l"></i><i class="wg r"></i><i class="bd"></i><i class="hd"></i><i class="el l"></i><i class="el r"></i></span></span>Pest control</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

Where to use it

This switch is a ladybug resting on a green leaf, seen from above with a black head, white eye dots and a spotted red shell. Turning it on splits the shell into two halves that swing open, thin transparent wings unfold and flutter, and the bug lifts off the leaf and hovers while its shadow shrinks below. It suits pest control and garden apps, nature lessons and gentle success states.

The main color is the shell and the second one is the leaf. A yellow shell gives a different species, and an autumn orange leaf changes the season. The hover bob follows the speed control.