What button presets are included?

Eight presets: Primary CTA, Outline, Pill, Ghost, Gradient Feel, Danger, Success, and Animated CTA. Each applies a complete style you can further customize.

What animations can I add to the button?

Five animations: Pulse (scale up and down), Bounce (vertical), Shake (horizontal), Glow (pulsing box-shadow), and Slide In (enter from left). All preview live on the button.

Can I customize border radius to make pill buttons?

Yes, the radius slider goes from 0px (sharp corners) to 50px (fully rounded pill shape).

Does the generated CSS include animation keyframes?

Yes, when you select an animation the CSS output includes the full @keyframes definition along with the animation property on the .btn class.

Can I change the button text?

Yes, type any text in the Button Text input and it updates instantly in the live preview.

●Poper 2.0 is Live. Build forms, quizzes, popups, widgets & more in minutes●11,000+ brands use Poper to engage visitors and drive conversions●No code. No credit card. Set up in under 2 minutes. Try it free →●Poper 2.0 is Live. Build forms, quizzes, popups, widgets & more in minutes●11,000+ brands use Poper to engage visitors and drive conversions●No code. No credit card. Set up in under 2 minutes. Try it free →

Built with

Poper

Free Button Style Generator

Generate CSS button styles with custom colors, padding, border radius, borders, and animations.

8px radius · 16px · 12/24px

Text & Colors

Button Text

Background

Text Color

Size & Shape

Padding V12px

Padding H24px

Font Size16px

Radius8px

Border & Effects

Border Width

0px

Color

Animation

Text Shadow

X Offset0px

Y Offset0px

Blur0px

Shadow Color

CSS

HTML

How to Use Button Style Generator?

Choose a Preset or Customize

Start with one of 8 button presets or manually adjust colors, padding, border radius, and font size.

Add Animation & Preview

Select from 5 animations like Pulse, Bounce, or Glow. See changes reflected instantly in the preview.

Copy CSS Code

Copy the generated CSS including @keyframes for animations. Paste directly into your project.

Design Custom CSS Buttons with Presets, Animations & Live Preview

Design CSS buttons with 8 one-click presets (Primary CTA, Outline, Pill, Ghost, Gradient Feel, Danger, Success, Animated CTA) and full customization. Adjust background and text colors, vertical and horizontal padding, border radius, font size, border width and color, plus choose from 5 animations — Pulse, Bounce, Shake, Glow, and Slide In. Edit the button text, preview everything live, and copy the generated CSS code.

Presets and Full Customization

Start fast with 8 ready-made button presets that instantly apply a complete style — from solid CTAs and pill buttons to ghost and gradient designs. Each preset sets all properties at once so you can preview different looks in seconds.

Fine-tune every detail with sliders for vertical padding (0-40px), horizontal padding (0-60px), font size (10-32px), and border radius (0-50px). Pick background, text, and border colors with the color pickers. Add motion with 5 built-in animations that preview live on the button. When you are happy with the result, copy the CSS code including keyframes for any animation you selected.