Retro difficulty menu
An 8-bit console screen with scanlines: a pixel cursor blinks next to the chosen difficulty.
Settings
Code
<fieldset class="uvq04-px"><legend>Difficulty</legend><label><input type="radio" name="uvq04-px"><i class="cu" aria-hidden="true"></i><span class="tx">Easy</span><span class="pw" aria-hidden="true"><i class="on"></i><i></i><i></i><i></i></span></label><label><input type="radio" name="uvq04-px" checked><i class="cu" aria-hidden="true"></i><span class="tx">Normal</span><span class="pw" aria-hidden="true"><i class="on"></i><i class="on"></i><i></i><i></i></span></label><label><input type="radio" name="uvq04-px"><i class="cu" aria-hidden="true"></i><span class="tx">Hard</span><span class="pw" aria-hidden="true"><i class="on"></i><i class="on"></i><i class="on"></i><i></i></span></label><label><input type="radio" name="uvq04-px"><i class="cu" aria-hidden="true"></i><span class="tx">Nightmare</span><span class="pw" aria-hidden="true"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i></span></label><p class="pr" aria-hidden="true">Press space</p></fieldset>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 Radio buttons
See all Radio buttonsWhere to use it
This radio group is the difficulty screen of an old home console, drawn on a curved CRT with scanlines, a slight flicker and a deep vignette. A stepped pixel arrow blinks beside the chosen level, its name glows yellow and a row of pink blocks shows how hard it is. It works for games, gamified courses, challenge levels and nostalgic landing pages.
The main color is the cursor and the chosen text, the secondary one the title and difficulty blocks. Keep the labels in capitals and under ten letters so they stay on one line, and change the blinking hint at the bottom to fit your controls.