Free visual CSS tool

CSS Button Style Generator Online

Q: How do I create a CSS button hover effect?

Style the button normally, then add a :hover rule with the colors, shadow and transform you want. This generator creates both rules for you.

Q: How do I make a button lift on hover?

Use transform: translateY with a small negative value and combine it with a deeper box shadow. A transition makes the movement smooth.

Q: Is this CSS button generator online and free?

Yes. It is free, needs no account and generates the button CSS locally in your browser.

Design a button’s normal and hover states side by side. Fine-tune gradients, borders, shadows, lift and transitions, then copy clean CSS.

Style your button

Button label

Font size 16px Weight

Vertical 14px Horizontal 28px

Arrow iconAdd a finishing cue

Gradient fillBlend two colors

Start#6C5CE7 End#8B75F6 Text#FFFFFF Border#6C5CE7

Radius 14px Border 0px

Xpx Ypx Blurpx Spreadpx

Shadow#4C3FC0 Opacity 30%

Lift 0px Scale 100%

Transition 220ms

Move your pointer over the button

Normal state

Copy your CSSClean and ready to paste

Build better button hover effects without guesswork

Start with a polished preset or control every detail yourself. The preview makes the relationship between the default button and its hover state easy to understand.

↗

Design both states

Edit normal and hover colors, borders, shadows and transforms independently.

◌

Shape natural depth

Balance blur, spread, offset and opacity for a subtle or dramatic button shadow.

{ }

Copy clean CSS

Get a reusable class with a focused :hover rule and smooth transition.

How to use the CSS button generator

1
Choose a starting style
Pick a preset or begin with the default purple gradient button.
2
Edit Normal and Hover
Switch between the two state tabs and adjust the fill, border, shadow, lift and scale.
3
Test the interaction
Hover or keyboard-focus the live button. Pin the hover state when working on a touch device.
4
Copy the CSS
Paste the generated .my-button styles into your project and change the class name if needed.

CSS button style generator FAQ

How do I create a CSS button hover effect?

Style the button normally, then add a :hover rule with the colors, shadow and transform you want. This generator creates both rules for you.

Can I add a box shadow to a CSS button?

Yes. Adjust the shadow offset, blur, spread, color and opacity independently for the normal and hover states.

How do I make a button lift on hover?

Use transform: translateY() with a small negative value and pair it with a deeper shadow. A transition makes the movement feel smooth.

Should a button change on keyboard focus too?

Yes. The generated preview treats keyboard focus like hover and keeps the browser’s visible focus outline for accessibility.

Is this CSS button generator online and free?

Yes. It is free, requires no account and generates your button CSS locally in the browser.

Try other CSS design tools

Keep your frontend workflow moving with these free online CSS generators.

CSSCSS Shadow GeneratorBuild rich, layered box shadows. ↗CSS Gradient GeneratorDesign smooth color backgrounds. RBorder Radius GeneratorCreate rounded and organic shapes.