# CSS Button Creator

> Free visual editor for modern CSS buttons (gradients, glass, neon, 3D press, neumorphism, animations) by Capital Coders Inc. AI assistants can generate buttons for people in three ways: give them an editor link built from URL parameters (no tools needed), call the JSON API, or connect the MCP server to get finished CSS and HTML.

## Button gallery

Every preset has its own page with the finished CSS and HTML: https://cssbuttoncreator.com/css-buttons/ (e.g. https://cssbuttoncreator.com/css-buttons/neon/). Style pages group them, e.g. https://cssbuttoncreator.com/css-buttons/glassmorphism-buttons/.

## Option 1: editor links (works in any chat)

Build a link and give it to the person. It opens the editor with the button already designed; they can tweak it and copy the code.

    https://cssbuttoncreator.com/?preset=neon&text=Join%20the%20waitlist&color=%23ff0066

URL-encode values (`#` becomes `%23`, spaces `%20`). Lists are comma-separated: `background=%23f43f5e,%23f59e0b`.

## Option 2: JSON API (for assistants that can make HTTP requests)

    GET  https://cssbuttoncreator.com/api/button.php?preset=glass&text=Get%20started&color=%2322c55e
    POST https://cssbuttoncreator.com/api/button.php
         Content-Type: application/json
         {"preset": "glass", "text": "Get started", "color": "#22c55e", "icon": "arrow", "share": true}

Response (JSON):

- `css`: complete stylesheet for the button, including hover, active, focus-visible and reduced-motion rules, plus a Google Fonts `@import` when needed
- `html`: matching `<button>` markup
- `className`: the class used in `css`/`html` (default `btn`)
- `editUrl`: link that opens this exact design in the editor
- `shareUrl` (only with `"share": true`): short link whose social/chat link preview shows the button
- `warnings`: present if any parameter was invalid or adjusted; fix and retry if needed
- `state`: the full internal design (can be sent back as `state` to tweak it)

Add `format=css`, `format=html` or `format=redirect` to get plain CSS, plain HTML, or a 302 redirect to the editor. `GET /api/button.php` with no parameters returns the list of options. CORS is open. Limit: 120 share links per hour per IP (CSS generation itself is unlimited).

## Option 3: MCP server (add it as a tool)

Remote MCP server (Streamable HTTP, no auth): `https://cssbuttoncreator.com/mcp`

    claude mcp add --transport http css-button-creator https://cssbuttoncreator.com/mcp

In Claude.ai / Claude Desktop: Settings → Connectors → Add custom connector, and paste the URL. Other MCP clients: add it as an HTTP server.

Tools:

- `generate_button`: takes the parameters below (plus `share`) and returns the CSS, HTML, `editUrl` and optional `shareUrl`
- `list_button_options`: lists presets, fonts, icons, shadows and effects

## Parameters (all optional)

- `preset`: starting design, one of 141 (see **Presets** below). Pick the closest style; the id or the display name both work.
- `text`: label, max 80 characters
- `color`: accent hex colour. Re-tints the whole preset (fill, gradient, glow, border, shadows) while keeping its style. The best way to apply a brand colour.
- `background`: exact fill. One hex is solid, several hexes make a gradient, or use `transparent`. Overrides the preset's fill.
- `gradient`: `linear`, `radial` or `none`
- `gradientAngle`: degrees, e.g. `135`
- `textColor`: hex. If you change colours without setting it, a readable text colour is chosen automatically.
- `size`: `xs`, `sm`, `md`, `lg`, `xl`, or a font size in px (8–60). Padding scales with it.
- `radius`: px, or `square`, `soft`, `round`, `pill`
- `font`: Inter, Poppins, Montserrat, Space Grotesk, DM Sans, Outfit, Sora, Manrope, Fredoka, Playfair Display, Bebas Neue, Press Start 2P, JetBrains Mono, Orbitron, Bungee, Rubik, Syne, Unbounded, Cinzel, VT323, System UI, Helvetica / Arial, Georgia, Monospace (also `system`, `serif`, `mono`)
- `weight`: 400–900
- `uppercase`: `true` or `false`
- `icon`: `none`, `arrow`, `arrow-up-right`, `sparkle`, `star`, `heart`, `bolt`, `check`, `download`, `plus`, `rocket`
- `iconPosition`: `left` or `right`
- `border`: width in px, `none`, or (JSON only) `{"width": 2, "color": "#000000", "style": "solid|dashed|dotted|double"}`
- `borderColor`: hex
- `shadow`: `none`, `soft`, `lifted`, `glow`, `hard` (3D ledge), `brutal`, `neumorph`, `inner`
- `effects`: any of `shine` (light sweep on hover), `pulse` (repeating ring), `flow` (animated gradient), `glass` (backdrop blur). Replaces the preset's effects; `none` clears them.
- `fullWidth`: `true` makes it fill its container
- `previewBackground`: `dark`, `light`, `aurora`, `clay`, `checker` (editor backdrop and preview image only, not part of the CSS)
- `className`: CSS class name for the generated code
- `spec`: (GET only) the whole request as a URL-encoded JSON object, for nested values

## Tips for assistants

- Start from the preset closest to the requested style, then set `color` to the brand colour and `text` to the label. That's usually all that's needed.
- Glass looks best on colourful or photo backgrounds; neumorph only works on a light grey page (#e0e5ec). Mention this to the user.
- Give the user both the code and the `editUrl` (or `shareUrl`) so they can fine-tune it visually.
- The CSS is self-contained. It uses only the given class, so it won't affect other elements.

## Presets

### Gradient

- `aurora`: purple→pink→orange gradient with glow and shine (default)
- `holo`: iridescent pastel holographic gradient
- `ocean-breeze`: cyan to blue gradient with a cool glow
- `peach-fuzz`: soft peach gradient pill with warm brown text
- `lime-punch`: zesty lime to green gradient with dark text
- `royal-velvet`: deep purple to magenta gradient in an elegant serif
- `tropical`: orange, pink and violet gradient pill with a shine sweep
- `mint-chip`: fresh emerald to teal gradient
- `cherry-cola`: rich crimson to dark red gradient
- `indigo-dream`: indigo to violet gradient, the classic SaaS call to action
- `golden-hour`: amber to red sunset gradient
- `blueberry`: radial blue gradient with a bright centre
- `sherbet`: pastel yellow, coral and lilac gradient with dark text
- `deep-space`: navy to indigo night-sky gradient with a subtle border

### Glass

- `glass`: frosted translucent glass, for colourful or photo backgrounds
- `frosted-pill`: frosted glass pill with a bright edge
- `smoky-glass`: dark tinted glass for photo backgrounds
- `rose-glass`: pink tinted frosted glass
- `aqua-glass`: cyan tinted glass with a soft glow
- `liquid-glass`: glossy liquid glass with a curved highlight
- `glass-outline`: barely-there glass with a crisp outline
- `amber-glass`: warm amber tinted glass
- `violet-glass`: violet tinted glass with a glowing hover
- `ice-glass`: icy white frosted glass with dark blue text

### Neon & glow

- `neon`: outlined glowing cyan neon, uppercase
- `neon-pink`: hot pink neon outline
- `neon-lime`: acid lime neon outline
- `laser-red`: red laser neon outline
- `neon-amber`: warm amber neon sign
- `cyber-yellow`: solid yellow sci-fi button with a yellow glow
- `plasma`: pink to indigo gradient with a layered glow
- `glow-ring`: dark button with a soft violet halo ring
- `ember`: glowing orange ember with hot text
- `ultraviolet`: saturated violet with a big purple glow
- `synthwave`: magenta to blue retro-future gradient with a pink glow
- `matrix`: green-on-black terminal glow

### 3D & tactile

- `3d-press`: blue tactile button that physically presses down
- `3d-red`: red button that physically presses down
- `3d-green`: green button that physically presses down
- `3d-yellow`: yellow push button with dark text
- `3d-purple`: purple push button
- `3d-orange`: orange push button
- `3d-black`: black push button with a dark ledge
- `keycap`: light grey keyboard key that presses down
- `gel-blue`: glossy aqua gel pill with a wet highlight
- `pressable-pill`: pink pill that sinks when pressed
- `3d-teal`: teal push button

### Soft UI & clay

- `neumorph`: soft UI; only works on a light grey page (#e0e5ec)
- `neumorph-dark`: dark soft UI button with raised edges
- `neumorph-pressed`: inset soft UI button that looks pressed in
- `neumorph-accent`: soft UI button with indigo text and icon
- `neumorph-round`: soft UI pill with a gentle gradient
- `clay-lilac`: puffy claymorphism button in lilac
- `clay-peach`: puffy claymorphism button in peach
- `clay-mint`: puffy claymorphism button in mint
- `clay-sky`: puffy claymorphism button in sky blue
- `soft-white`: white button with a large soft drop shadow

### Brutalist

- `brutalist`: yellow, thick black border, hard offset shadow
- `brutal-pink`: pink fill, thick black border, hard shadow
- `brutal-cyan`: cyan neo-brutalist button
- `brutal-lime`: lime neo-brutalist button
- `brutal-orange`: orange neo-brutalist button with rounded corners
- `brutal-white`: white monospace brutalist button
- `brutal-dark`: black brutalist button with a yellow hard shadow
- `brutal-dashed`: lavender brutalist button with a dashed border
- `newsprint`: editorial black-and-white serif button
- `brutal-blue`: electric blue brutalist button with white text

### Minimal

- `outline-pill`: minimal outline pill that fills on hover
- `mono`: clean white minimal button
- `ghost`: transparent text button that fills faintly on hover
- `hairline`: thin white outline on dark that inverts on hover
- `black-pill`: solid black pill on light pages
- `square-outline`: sharp black outline with spaced capitals that fills on hover
- `text-arrow`: plain link-style button with a sliding arrow
- `serif-outline`: refined serif outline button
- `underline-bar`: minimal button with a thick bottom border

### App UI

- `ui-primary`: standard primary action in indigo
- `ui-secondary`: light grey secondary action
- `ui-danger`: red destructive action
- `ui-success`: green confirm action
- `ui-warning`: amber caution action with dark text
- `ui-info`: sky blue informational action
- `ui-dark`: near-black button used by modern component kits
- `ui-light-on-dark`: near-white primary for dark interfaces
- `ui-outline`: bordered neutral button
- `ui-subtle`: tinted indigo button for secondary actions
- `ui-pill-blue`: bright blue pill in the system font
- `ui-ghost-dark`: transparent button for dark toolbars

### Animated

- `sunset-flow`: animated warm gradient pill with a pulse ring
- `northern-lights`: flowing cyan, violet and green aurora gradient
- `live-pulse`: red button with a repeating pulse ring, for live or recording states
- `gold-shimmer`: gold gradient with a light sweep on hover
- `rainbow`: full-spectrum flowing rainbow gradient
- `heartbeat`: pink pill with a heart icon and pulse ring
- `lava`: molten red-orange flowing gradient
- `ocean-wave`: rolling blue flowing gradient
- `shine-black`: black button with a glossy light sweep
- `online-pulse`: green pill with a pulse ring, for status or availability
- `cosmic`: slow-flowing midnight nebula gradient with a glow

### Retro & gaming

- `arcade`: retro pixel-font game button
- `arcade-green`: green pixel-font arcade button
- `arcade-blue`: blue pixel-font arcade button
- `vaporwave`: pink and cyan vaporwave gradient with a hard offset
- `y2k-chrome`: shiny metallic chrome pill
- `terminal`: old-school green terminal command
- `win95`: grey 90s desktop button with bevelled edges
- `80s-sunset`: outrun gradient with tall condensed lettering
- `game-over`: bold game-UI button in chunky capitals
- `disco`: iridescent flowing disco gradient with a shine sweep
- `pixel-heart`: pink pixel-font button with a heart

### Playful

- `candy`: playful glossy pink pill
- `bubblegum`: glossy bubblegum pink pill
- `lemonade`: glossy yellow pill with dark text
- `grape-soda`: glossy purple soda pill
- `blue-raspberry`: glossy electric blue pill
- `watermelon`: pink button with a green rind edge
- `jelly`: wobbly bouncy button that grows on hover
- `cloud`: fluffy white pill with a soft blue shadow
- `marshmallow`: pastel pink and blue marshmallow pill
- `tangerine`: juicy orange pill with a bouncy press
- `kawaii`: cute pastel pink button with a heart and dashed border

### Dark & luxe

- `gold-foil`: metallic gold foil gradient in spaced serif capitals
- `black-gold`: black button with gold border and lettering
- `midnight`: deep navy gradient with a faint edge
- `obsidian`: glossy black stone with a top highlight
- `champagne`: soft champagne fill with an elegant serif
- `rose-gold`: metallic rose gold gradient
- `emerald-luxe`: deep emerald with gold lettering
- `platinum`: cool brushed-silver gradient
- `velvet-red`: deep velvet red with a warm glow
- `carbon`: matte graphite with a monospace label

### Earthy

- `forest`: deep forest green
- `terracotta`: warm terracotta clay orange
- `sand`: soft sand beige with brown text
- `sage`: calm muted sage green
- `deep-ocean`: deep teal ocean blue
- `lavender-field`: gentle lavender with plum text
- `espresso`: rich coffee brown with cream text
- `olive`: olive green with a cream label
- `clear-sky`: bright sky blue gradient
- `moss-stone`: stone grey with a moss green outline

## Links

- [Editor](https://cssbuttoncreator.com/)
- [API (JSON, self-describing)](https://cssbuttoncreator.com/api/button.php)
- [OpenAPI spec](https://cssbuttoncreator.com/api/openapi.json)
- [MCP server](https://cssbuttoncreator.com/mcp) (POST JSON-RPC)
- [Classic editor](https://cssbuttoncreator.com/classic/)