RSK World - Neon UI Hub | Glowing Neon Buttons, Glassmorphism, GSAP | RSK World

Neon Buttons Glassmorphism Theme Engine GSAP Vanilla JS

Neon UI Hub is a premium UI kit with glowing neon buttons (cyan, green, yellow, red), border animation, hover glow; theme engine (Classic Cyan, Cyberpunk, Sunset Glow, The Matrix) saved in localStorage; glassmorphism cards with mouse-follow glow, stats, progress bars, sliders, toggles; neon inputs, textareas, pill badges; GSAP scroll-triggered reveals, count-up stats, header entrance; canvas particle background; optional theme-aware custom cursor; skip-to-content, focus-visible, prefers-reduced-motion. HTML5, CSS3, Vanilla JavaScript. By rskworld.in.

If you find this Neon UI Hub project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Neon UI Hub

Neon Buttons & Glow

Cyan, green, yellow, red neon buttons with 3-layer box-shadow, border animation (four animated span lines), hover fill and intense glow. Magnetic button effect and copy-code buttons for each variant.

Variants: .neon-cyan, .neon-green, .neon-yellow, .neon-red
Border animation via keyframes neon-line-1 to neon-line-4
Magnetic follow and scale on active; copy CSS snippet to clipboard
Theme-aware via CSS variables (--cyan, --green, etc.)

Project Structure & Files

index.html (main page). CSS: style.css (base, variables), src/css/themes.css (theme colors), expansion.css (neon buttons, sidebar, modal, progress, slider, toggle), features.css (inputs, badges, skip link, reduced motion). JS: script.js (particles, cursor, GSAP, modal, copy, magnetic, mouse glow), src/js/utils.js (reduced motion, skip link), components.js (theme switcher, progress, slider labels).

index.html – stats, neon buttons, progress/toggle, inputs, badges, modal
style.css + src/css/* – no build step; open index.html in browser
script.js – main entry; respects NeonUtils.prefersReducedMotion()
Font Awesome 6, Google Fonts Outfit, GSAP + ScrollTrigger (CDN)

Theme Engine

Four themes: Classic Cyan, Cyberpunk (magenta/cyan), Sunset Glow, The Matrix (green). Stored in localStorage (neon-theme). Applied via data-theme on html/body; themes.css defines --primary-neon, --secondary-neon, --bg-dark per theme.

Classic Cyan, Cyberpunk, Sunset Glow, The Matrix
Theme sidebar fixed right; active state on current theme
All neon components use CSS variables for theme support
Custom cursor and particle color follow theme when enabled

Glassmorphism & Components

Glass cards with backdrop-filter, semi-transparent background; ::before radial gradient follows mouse (--mouse-x, --mouse-y). Neon progress bars, range slider with neon thumb, toggle switch. Modal with glass style and neon border.

Glass cards – mouse-follow glow set in script.js initMouseGlow()
Neon progress – data-width, fill animates on load; secondary-neon variant
Neon slider – value label updates on input; neon toggle with glow
Modal – openModal/closeModal; neon border and entry animation

GSAP & Effects

Header fade-in; count-up for .stat-number to data-target (ScrollTrigger); scroll-reveal for .scroll-reveal sections. Canvas particle background (~100 cyan particles). Optional custom cursor (ring + dot) with GSAP follow; disabled when prefers-reduced-motion.

GSAP – header entrance, stat count-up, section scroll-reveal
Particles – canvas full-screen, wrap edges; resize handler
Custom cursor – scale on link/button hover; only if !reducedMotion
Reduced motion – particles, cursor, GSAP not initialized

What You Get

Static HTML/CSS/JS: neon-button/ folder with index.html, style.css, script.js, src/css (themes, expansion, features), src/js (utils, components). No build step. Open index.html or serve folder.

Complete source – neon-button/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE included
Technologies: HTML5, CSS3, Vanilla JS, GSAP. © 2026 Molla Samser (RSK World).

Usage

Open index.html. Use Themes sidebar to switch themes. Click neon buttons to open modal with details. Use copy buttons next to each neon button to copy CSS. All components reuse theme variables.

neon-button/index.html – dashboard, buttons, progress, inputs, badges
Themes – Classic Cyan, Cyberpunk, Sunset, Matrix; saved in localStorage
Accessibility: skip link, focus-visible, prefers-reduced-motion
Author: Molla Samser | rskworld.in

Neon Inputs & Badges

Neon text input and textarea with focus glow (--primary-neon). Pill badges (neon-badge-cyan, green, yellow, red) with hover glow and lift. All use theme variables for consistent look.

Neon inputs – border and box-shadow on focus
Badges – inline-flex, border, box-shadow, translateY on hover
features.css – skip-link, focus-visible, reduced-motion overrides
utils.js – NeonUtils.prefersReducedMotion(), skip-link focus/scroll

Project Features

Neon buttons (cyan, green, yellow, red), theme engine (4 themes, localStorage), glassmorphism with mouse glow, progress bars, slider, toggle, neon inputs/badges, GSAP animations, particle background, optional custom cursor, modal, copy code, skip link, reduced motion.