Skip to content
ToolsOnDuty - free online tools
CSS & Design

CSS Button Generator

Design a styled button with hover and copy the CSS.

Free foreverRuns in your browserNo sign-up
.button {
  background: #1B5DF5;
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px #1B5DF580;
  transition: transform .15s ease, box-shadow .15s ease;
}
.button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

About the CSS Button Generator

A good button needs the right colour, padding, radius and a subtle hover effect. Hand-tuning all of that in code is slow.

This generator gives you controls for every property with a live button preview, then outputs clean CSS including a hover state.

It runs in your browser.

Key features

  • Colour, padding, radius and font size
  • Optional drop shadow
  • Includes a hover effect
  • Copy the button CSS

How to use

  1. 1Adjust the colours and sizing.
  2. 2Toggle the shadow.
  3. 3Copy the CSS.

Examples

Primary button
Output: background: #1B5DF5; border-radius: 10px; padding: 12px 20px;

A solid colour with rounded corners and comfortable padding makes a clear primary button.

Frequently asked questions

Does it include a hover state?
Yes. The generated CSS adds a subtle lift and brightness change on hover, with a smooth transition.
Can I use it for links?
Yes. Apply the .button class to an anchor or button element; the styles work on both.
How do I change the hover colour?
The hover uses a brightness filter so it adapts to your background colour. Edit the :hover rule for a specific colour.

Related tools