Neon HTML5 UI States Kit — Buttons, Menus, Tabs & Controls

Give your browser-game menu a complete interaction layer without designing every hover, pressed, keyboard-focus, selected and disabled state from scratch.

 
Neon HTML5 UI States Kit  is a dependency-free HTML/CSS control system for browser games, prototypes and web interfaces. Copy the components you need, change a few CSS variables, and connect them to your own game logic.

 
Included components
- Game-menu buttons and wide menu rows
- Primary, accent, danger, warning and success variants
- Ghost and pill button styles
- Accessible tabs with selected panels
- On/off toggles using `aria-pressed`
- Text inputs with hover, focus and disabled states
- Custom range sliders with live-value example
- Responsive showcase layout

Included interaction states
- Default
- Hover
- Pressed/active
- Keyboard focus-visible
- Selected/toggled
- Disabled

Developer-friendly
- Rebrand the full kit through CSS variables
- Standalone reusable CSS file
- Optional vanilla-JavaScript demo behavior
- Functional Left/Right/Home/End keyboard navigation for tabs
- Reduced-motion support
- Native semantic controls and state attributes
- Single-file preview plus separated production-ready files
- Quick-start guide, copy/paste example and commercial-use license
- No npm, framework, build step, account or external assets

 
Included files
- Interactive `index.html` showcase
- `css/neon-ui-states.css`
- Optional `js/demo.js`
- All-in-one `single-file-demo.html`
- Minimal copy/paste menu example
- README, quick start, changelog and license

 
Good fit for
- HTML5 and browser-game menus
- Cyberpunk, sci-fi and arcade interfaces
- Game-jam prototypes
- Idle/incremental control panels
- Developers who want editable UI states instead of flattened button images

 

Requirements and scope
Use a modern browser with CSS `color-mix()` support. This is editable HTML/CSS/vanilla-JavaScript source, not a Unity, Godot, Phaser or RPG Maker plugin. It does not include a game engine, save system, backend, fonts, sound effects or a separate PNG/SVG art pack.

 

You may use and modify the kit in free or commercial projects. You may not redistribute the raw source as a competing asset pack. Credit is appreciated but not required; see `LICENSE.txt` for the full terms.