Visual game button designer. Build a stylized button from scratch, tweak every parameter, and export the result as PNG, CSS, or Flutter code.
The app builds into a single HTML file — can be opened in a browser without a server.
You need Node.js (v18+) installed.
git clone https://github.com/E2GO/button-constructor.git
cd button-constructorThen run start.bat (Windows) or start.sh (Linux/Mac) — dependencies will install automatically and the dev server will launch.
Or manually:
npm install
npm run devThe app will open at http://localhost:5173.
To build a single HTML file you can share without a server:
npm run build # creates dist/index.htmlThe screen is split into three columns:
| Left Panel | Center | Right Panel |
|---|---|---|
| Button settings: shape, colors, layers, effects, icon, badges, states | Button preview + export/save | Text settings: color, stroke, shadows, glow |
Colored buttons at the top are built-in presets (Green, Blue, Red, Purple, Yellow, Framed). Click to load a full set of settings. You can save your own preset — it will appear next to them.
- Width, height, border radius
- Depth (3D effect via bottom shadow)
- Render mode: CSS (standard div) or SVG (arbitrary shapes: squircle, star, shield, heart, cloud, hexagon, custom path)
- Gradient layers — add multiple layers with different blend modes (multiply, screen, overlay, etc.)
- Each layer: color stops, gradient angle, opacity
- Shine — top highlight (color, height, opacity, blur, angle)
- Darken — bottom darkening
- Inset Light / Dark — inner edge shadows
- Blicks — individual light spots/ellipses, draggable on the preview
- Color, size, opacity
- Text gradient (two-color, with angle)
- Stroke (two methods: shadow-based or -webkit-text-stroke)
- Drop shadows — unlimited external shadows (angle + distance + blur)
- Inner shadows — with automatic perimeter bevel
- Glow — outer glow
- Inner Glow — inner glow
- Any emoji, position (left/right/free), size
- Shadow, stroke, glow
- Label on top of the button (e.g. "SALE")
- Background color, border, rotation, position, shadow, glow
- Outer frame around the button
- Three-color gradient, shadow, soft shadow
- Inner frame with separate settings
- Normal / Hover / Pressed / Disabled
- Each state: translate, scale, brightness, saturation, depth, opacity
- Background switching: dark, medium, light, white, game gradient, checker (transparency), custom color
- Zoom from 50% to 200%, 1:1 button
- Pixel grid (visible at zoom 150%+)
- Size Variants — instant preview in Large / Medium / Small / Icon sizes
- Variant — save the current state to the library (bottom of screen). Variants can be tagged (Play, Shop, Settings, General) and searched
- Preset — save as a preset in the top bar for quick switching
- Style — save separately: Colors / Shape / Text / Full, to apply to another button later
- JSON — copies the full state to clipboard. Can be pasted back via Paste or loaded from a .json file
- CSS — generates a CSS class with box-shadow, gradient, border-radius, etc.
- Flutter — generates Dart code with BoxDecoration
- PNG — downloads a button image (size: 128 / 256 / 512 / custom)
To send a button design to someone:
- Click JSON — copies to clipboard
- Send the text
- Recipient clicks Paste and pastes the JSON
Or via file: export JSON, save as .json, recipient loads it via File.
Each settings group (Button, Text, Frame, States) has Copy/Paste buttons. This lets you copy, for example, only text effects from one button and paste them onto another.
| Key | Action |
|---|---|
Ctrl+Z |
Undo |
Ctrl+Shift+Z / Ctrl+Y |
Redo |
Blicks, badges, icon, and frame offset can be dragged directly on the preview. In Direct Edit mode:
- Drag — move
- Orange handles — rotate
- Blue handles — scale
- React 19 + Vite 8
- vite-plugin-singlefile (single HTML build)
- html-to-image (PNG export)
- No TypeScript, no state manager — plain useState + custom useHistory hook (undo/redo, up to 50 steps)
- All user data is stored in browser localStorage