ffee All tools
EN 中文 FR DE

Button Style Generator

Style a button with live controls and copy the ready to use CSS.

Design a button

Class: .my-button · border width: 2px
Add a hover rule of your own when you want the button to react to the pointer.

How to use the Button Style Generator

  1. Choose the background colour, text colour and border colour.
  2. Adjust radius, padding, border width and font size until the preview looks right.
  3. Copy the CSS rule and apply it to your own button class.

Features

Advertisement

More tools

Flexbox Generator CSS Grid Generator CSS Animation Generator CSS Transition Generator CSS Transform Generator CSS Filter Generator Glassmorphism Generator Neumorphism Generator Breakpoint Preview Font Pairing Tool Line Height Calculator Modular Scale Calculator

Frequently Asked Questions

Common questions about the free online button style generator.

Pick the colours, radius, padding and font size with the controls, watch the live preview and copy the finished rule.
Yes. The rule uses only standard CSS properties, so it works in any project, framework or content management system.
Inline styles cannot describe pointer states, so add a hover rule that changes the background colour or adds a shadow.
Small radius values look sharper and more corporate, while large values or fully rounded pills feel friendlier and more modern.
Aim for roughly 10 to 16 pixels vertically and 20 to 30 pixels horizontally so the label has room to breathe.
A weight of 600 or 700 usually reads best and keeps the label legible when the button sits on a coloured background.
Yes, it is completely free with no account, no sign-up and no limit on the number of buttons you style.
No. Nothing is saved in your browser and nothing is uploaded, so every visit starts from the default button.

Last updated: October 10, 2026