Button CSS Generator
Create flat, gradient, 3D, outline, neon, and floating button CSS visually with simple sliders.
Check the hover and click interactions right in the preview, then copy the code with one click.
This tool has been used … times.
6 button styles to choose from
Buttons shape the first impression of any website. This tool lets you switch between six design styles, from timeless classics to eye-catching effects.
The most versatile solid-color button, and a vivid two-color gradient button. Great for CTAs, form submit buttons, and just about anywhere.
A physical, push-down interaction on click, built with
box-shadow and the :active state.
A clean border-only button, a glowing neon button for dark backgrounds, and a button that floats on a colored shadow. Pick the one that matches your site’s mood.
How to use
- Pick a design from “Style”. If you are unsure, starting from a “Preset” is the fastest way.
- Choose your main color with “Color”. For gradients, set the second color with “Color 2”.
- Fine-tune font size, padding, radius, and shadow strength with the sliders. Max out the radius for a pill-shaped button.
- Hover and click the preview button to check the interactions.
- When you are happy with the result, press “Copy” and paste the code into your site.
How to apply the CSS
The copied CSS is output as a .my-button class. Add the class to any element you want to turn into a button.
<button class="my-button">Submit</button> <a href="/contact/" class="my-button">Contact us</a>
* When using it on an a tag, add text-decoration: none; to remove the underline.
* You can rename the .my-button class freely. Just make sure the name doesn’t clash with other classes on your site.
Tips for a beautiful result
Setting Padding X to at least twice Padding Y gives the button balanced proportions. If the label feels cramped, add more padding.
White text on a pale background is hard to read. If you are unsure, run the colors through a contrast checker.
Color changes and push-down motion tell users “this is a button” at a glance, and tend to improve click-through compared to static buttons.
Please also review the Terms of Use for this web app before using it.