CSS Button Generator
Style a button with live controls and copy ready-to-use CSS, including hover and active states.
Style a button visually and copy the CSS it produces. You set the label, background and text colours, the horizontal and vertical padding, and the corner radius; the preview updates instantly and the code box fills with a complete, copy-ready rule set. It's a fast way to nail the look of a call-to-action without writing the CSS by hand or guessing at pixel values. Everything runs in your browser.
What you can control
Two colour pickers set the background and text colours. Three sliders handle spacing and shape: horizontal padding (12–80px), vertical padding (8–50px) and corner radius (0–60px), each showing its current value in pixels as you drag. The live preview reflects every change immediately, including a hover effect, so you can judge the real feel of the button rather than reading numbers.
The CSS you get
The generated rule targets a .custom-button class and includes more than just your settings: it adds cursor: pointer, a semi-bold Inter font, a smooth transition, and flex centring so an icon and label line up. It also writes a :hover state that lifts the button slightly, brightens it and adds a soft shadow, plus an :active state that presses it back down. Paste the whole block into your stylesheet and rename the class to suit your project.
Frequently Asked Questions
Does the generated CSS include hover effects?
Yes. Alongside the base .custom-button rule it writes a :hover state (a slight lift, a brightness boost and a soft shadow) and an :active state that presses the button back down.
What units does it use for padding and radius?
Pixels. Horizontal padding ranges 12–80px, vertical padding 8–50px and corner radius 0–60px, each shown live as you move the slider.
Can I change the class name?
Yes. The rule is written for a class called .custom-button, but it is just text — rename it in the copied code to match your own naming convention.
Does it set a specific font?
The CSS specifies the Inter font family at semi-bold weight. If Inter is not loaded on your site the browser falls back to its default sans-serif, so change that line if you use a different font.