RSK World - Button Component Collection | Primary, Outline, Gradient, FAB, Ripple, Dark Mode | RSK World

Primary & Outline Gradient & Glass Split & FAB Ripple & Groups Vanilla JS

Button Component Collection is a comprehensive set of button components. Basic: primary, secondary, outline, ghost, sizes, states, icon buttons, color variants, shapes, block, gradient, glass, neumorphism, button groups, ripple. Advanced: split buttons, FAB with speed-dial, toggle & switch, animated (border run, pulse, shine, scale-in), feedback states with toast, badge buttons, 3D & depth. Unique: magnetic button, copy to clipboard, countdown button, icon morph (Like/Liked, Send/Sent), confetti burst, keyboard shortcut hint, liquid blob, dual-face flip. Dark mode persisted in localStorage. Files: index.html (Basic), advanced.html (Advanced), styles.css, advanced.css, script.js, advanced.js, config.json. By rskworld.in.

If you find this Button Component Collection 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 Button Component Collection

Basic Buttons & Styles

styles.css: primary, secondary, outline, ghost; sizes (btn-sm, btn-lg); states (disabled, loading with spinner); icon buttons (left, right, icon-only); color variants (success, warning, danger, info, dark); shapes (rounded, pill, block); gradient buttons (static + shine animation); glass & neumorphism; button groups; ripple effect. script.js: createRipple(), initButtonGroups(), smooth scroll.

styles.css: .btn, .btn-primary, .btn-outline, .btn-ghost, .btn-gradient
script.js: ripple on .btn-ripple, button group .active toggle
Font Awesome 6 for icons
CSS variables: --color-primary, --radius, --shadow

Project Structure & Files

index.html (Basic demo), advanced.html (Advanced & unique). styles.css (base buttons, gradients, glass, neumorphism, group, ripple, nav). advanced.css (split, FAB, toggle, animated, feedback, badge, 3D, toast, dark theme, magnetic, copy, countdown, morph, confetti, shortcut, liquid blob, dual-face). script.js (ripple, button groups, smooth scroll). advanced.js (split dropdown, FAB speed-dial, toggle group, feedback + toast, theme toggle, magnetic, copy, countdown, confetti). config.json. No build step.

index.html, advanced.html
No build step – open index.html or advanced.html in browser
Segoe UI / system fonts
Zero dependencies; vanilla HTML, CSS, JavaScript

Dark Mode & Theme

advanced.html: theme toggle in nav; data-theme="light|dark" on .advanced-page. advanced.css: .advanced-page[data-theme="dark"] overrides for bg, section, text, border. advanced.js: initThemeToggle() reads/writes localStorage (rsk-button-theme). Moon/sun icon swap. All advanced sections and split menu respect dark theme.

initThemeToggle(): localStorage rsk-button-theme
advanced.css: --bg-page, --bg-section, --text-primary for dark
Theme persisted across page reloads
Split menu, FAB area, toasts styled for dark

Advanced & Unique Buttons

Split buttons (main + dropdown), FAB with speed-dial, toggle switch & toggle button group, animated (border run, pulse, shine, scale-in), feedback (success/error + toast), badge (notification count), 3D & layered, magnetic (cursor follow), copy to clipboard, countdown (Resend in Ns), icon morph (Like/Liked, Send/Sent), confetti burst, keyboard shortcut hint, liquid blob, dual-face flip. advanced.js wires all behaviors.

initSplitButtons(), initFab(), initCountdownButtons(), initConfetti()
initMagnetic(), initCopyButtons(), initFeedbackButtons()
showToast() for feedback and copy
Pure CSS for morph, liquid blob, dual-face flip

Pages & Sections

index.html: nav (Basic, Advanced, RSK World), sections for Primary, Secondary, Outline, Ghost, States, Icons, Colors, Shapes, Block, Gradient, Glass & Neumorphism, Button Groups, Ripple. advanced.html: same nav + theme toggle; sections for Split, FAB, Toggle, Animated, Feedback, Badge, 3D, Magnetic, Copy, Countdown, Icon Morph, Confetti, Shortcut, Liquid Blob, Dual-Face. Toast container at bottom.

index.html – Basic button demos with section IDs
advanced.html – Advanced and unique demos
Single-page layout, no routing
Accessibility: focus-visible, aria-expanded, aria-label

What You Get

Static HTML/CSS/JS: index.html, advanced.html, styles.css, advanced.css, script.js, advanced.js, config.json. components/README.md (class reference). LICENSE, LICENSE-DETAILS.md, NOTICE. No build step. Open index.html or advanced.html in browser. Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Complete source – all HTML, CSS and JS in project folder
No build step – open HTML files directly
components/README.md with class reference
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html for basic buttons or advanced.html for advanced and unique. Use nav to switch pages. On advanced: try theme toggle, split dropdowns, FAB speed-dial, magnetic button, copy buttons, countdown, confetti. Customize via styles.css/advanced.css (variables, colors) and config.json. See components/README.md for class list.

index.html – Basic; advanced.html – Advanced & unique
styles.css and advanced.css: design tokens and components
Accessibility: focus, ARIA where needed
Author: RSK World | rskworld.in

Project Features

Basic: primary, secondary, outline, ghost, sizes, states, icons, colors, shapes, block, gradient, glass, neumorphism, button groups, ripple. Advanced: split, FAB, toggle, animated, feedback, badge, 3D, magnetic, copy, countdown, icon morph, confetti, shortcut hint, liquid blob, dual-face flip, dark mode. All vanilla JS, no frameworks.

Core: primary, outline, ghost, gradient, glass, neumorphism, groups, ripple
Advanced: split, FAB, toggle, feedback, badge, 3D
Unique: magnetic, copy, countdown, morph, confetti, blob, dual-face
Dark mode with localStorage

Credits & Acknowledgments

Button Component Collection by RSK World. Comprehensive button components for learning button design, styles, sizes, states and interactive effects with vanilla JS.

Button Component Collection – basic, advanced and unique buttons
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: help@rskworld.in | +91 93305 39277
© 2026 RSK World. All rights reserved.