CSS Button Generator

Fast, accurate, and free online CSS Button Generator tool that runs directly in your browser.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

Button settings

Text on the button

CSS selector

Button variant

Font size (px) 16px

Font weight 600

Letter spacing (em) 0em

Styling and Colors

Text color

Background color

Horizontal padding (Padding X) 16px

Vertical padding (Padding Y) 10px

Corner rounding (Border Radius) 10px

Border width (px) 0px

Button shadow

X offset 0px

Y offset 8px

Blur 16px

Spread 0px

Shadow color

Shadow Transparency (Alpha) 20%

Hover effect

Efekt Hover

Hover Brightness 105%

Transition time (ms) 180ms

Ready style:

Live preview

The resulting CSS code

.btn-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 180ms ease;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  color: #FFFFFF;
  background-color: #2563EB;;
  border: 0;;
}

.btn-demo:hover {
  filter: brightness(105%);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.25);
}

.btn-demo:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.btn-demo:disabled, .btn-demo.disabled {
  opacity: .6; pointer-events: none;
}

HTML code

<button class=\"btn-demo\">Przycisk</button>

Rate this tool:

Related tools

Other tools you may find useful

CSS Button Generator – solid, gradient, outline, ghost and soft with

preview This tool generates complete styles for buttons. You choose the variant, colors, radius, shadow, hover and focus behavior. You receive ready-made CSS and simple HTML to paste into your project. Fast, consistent and without manual counting of values.

Key features: appearance variants, typography, spacing, borders, shadows, gradients, animation, hover brightness boost, Primary, Secondary, Gradient, Ghost and Soft presets, as well as focus and disabled states.

How the CSS Button Generator works

The component builds CSS declarations for the selected selector. Defines the base properties of the button and automatically adds rules for hover, focus-visible and disabled states. Variants determine whether the background should be solid, gradient, outlined, transparent, or soft. For the gradient, you can set two colors and an angle. For outline you control the width and color of the border. For ghost, the background is transparent, so the emphasis is on the text color and interaction.

Parameters and what they change

Appearance and colors

variant– solid, gradient, outline, ghost, soft.
textColor– button text color.
bgColor i bgColor2– a solid background or a pair of gradient colors.
angle– gradient angle in degrees.

Typography and rhythm

fontSize– size in px.
fontWeight– font weight from 100 to 900.
letter– letter-spacing in em.
paddingX i paddingY– internal spacing.
radius– rounding radius.

Border and shadow

borderWidth i borderColor– width and color of the border.
shadowX, shadowY, shadowBlur, shadowSpread– shadow parameters.
shadowColor i shadowAlpha– color and opacity of the shadow.

Interactions and animations

hoverEffect– none, raise or press.
brightness– brightness filter for hover.
transition– transition time in ms.

Variants and their uses

Variant	Characteristics	Best use
solid	Solid background color with optional shadow	Primary CTA, dominant actions
gradient	Background with a linear gradient at a given angle	Hero, highlighting selected actions
outline	Transparent background, visible frame	Secondary CTA, less invasive actions
ghost	Transparent background and no frame	Action links, lightweight CTA
soft	Delicate background color with a subtle frame	Panel UI, settings, less aggressive actions

Code examples from the generator

1. Solid Primary with a light shadow

/* Selector: .btn-primary */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 16px;
  font-weight: 600;
  letter-space: 0em;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  cursor:pointer;
  transition: all 180ms ease;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
  color: #ffffff;
  background-color: #2563EB;
  border: