⭐Button Generator — User Guide
This guide walks you through every feature of the Advanced Button Generator so you can create beautiful, customizable buttons for IMVU, websites, profiles, or any HTML‑based layout.
🎯 What This Tool Does
The Advanced Button Generator lets you design a fully custom button with:
- Gradients (2–4 colors)
- Hover animations
- Shadows, glow, glassmorphism, and neumorphism
- Icons
- Custom fonts
- Adjustable padding, borders, and sizing
- Live preview
- One‑click HTML/CSS export
Everything updates instantly as you change settings.
🧩 1. Button Basics
Button Text
Type the label that appears on your button (e.g., “Buy Now”, “Join”, “Click Me”).
Button Link
Add a URL if you want the button to open a webpage.
Link Target
Choose whether the link opens in the same tab or a new one.
📐 2. Layout & Sizing
Width Mode
- Auto — Button fits its content
- Fixed (px) — Set an exact width
- Percent (%) — Button fills a percentage of its container
Padding
Controls the space inside the button: - Vertical padding (top/bottom)
- Horizontal padding (left/right)
Corner Radius
Round the corners from sharp (0px) to fully pill‑shaped (999px).
🎨 3. Colors & Gradients
Fill Mode
Choose between:
- Solid Color
- Gradient (2–4 colors)
Solid Color
Pick a single color for the background.
Gradient Options - Choose 2, 3, or 4 colors
- Adjust the gradient angle (0–360°)
- Each color has its own color picker
✍️ 4. Typography
Font Size
Set the text size in pixels.
Font Weight
Choose how bold the text should be.
Font Family
Use any valid CSS font stack.
Text Color
Pick the color of the button text.
✨ 5. Icons
Enable the icon toggle to add a symbol before or after the text.
You can customize:
- Icon character (emoji or symbol)
- Icon position (left/right)
- Icon size
- Icon color
- Spacing between icon and text
🌫️ 6. Shadows, Glow & Effects
Shadow Presets
Choose from:
- None
- Soft
- Deep
- Neon
- Outline
- Inset
- Custom
Custom Shadow
If “Custom” is selected, you can control: - Offset X/Y
- Blur
- Spread
- Color
- Inset toggle
Glow
Adds a soft outer glow with adjustable: - Color
- Strength
Glassmorphism
Creates a frosted‑glass effect: - Background opacity
- Backdrop blur
Neumorphism
Soft 3D‑style lighting: - Light or dark mode
- Depth control
🖱️ 7. Hover Effects
Choose how the button behaves when hovered:
- Subtle lift
- Strong lift
- Scale up
- Scale down
- Rotate
- Color shift
- Gradient shift
- Glow pulse
- None
Hover Color Shift Options
If selected, you can customize: - Hover text color
- Hover border color
Hover Duration
Controls animation speed (in milliseconds).
🧱 8. Borders
Customize:
- Border width
- Border color
📝 9. Text Shadow
Enable text shadow for extra depth.
Adjust:
- Offset X/Y
- Blur
- Shadow color
❤️ 10. Support Link
Enable this to add a small “Powered by NekyPop” link under your button.
🧪 11. Live Preview
Everything you change updates instantly in the preview box.
This helps you fine‑tune your design before generating code.
📤 12. Generate HTML & CSS
Click Generate Button Code to produce:
- A block containing your button’s CSS
- An tag containing your button’s HTML
You can paste this into: - IMVU HTML panels
- Websites
- Blogs
- Custom profile layouts
📋 13. Copy Code
Click Copy Code to copy the entire HTML/CSS block to your clipboard.
💾 14. Import / Export Settings
Export Settings
Saves all your current settings into a file.
Import Settings
Load a previously saved file to restore a design instantly.
Clear Settings
Resets everything to default.