Customize colors, size, shape, and hover effects. Get clean CSS and HTML code in one click. Free, no sign-up required.
More free tools to help you build beautiful, high-converting websites.
Generate harmonious color palettes for your brand or design project instantly.
Use Tool \u2192Create a favicon from text or upload an image. Download in all required sizes.
Use Tool \u2192Generate Open Graph images for social media previews that drive clicks.
Use Tool \u2192Build and preview CSS box shadows visually. Copy the code instantly.
Use Tool \u2192How It Works
No account needed, no sign-up required. Completely free. Customize your button, preview it live, then copy the production-ready CSS and HTML.
Choose your colors, padding, border radius, font size, and font weight. Every change updates the live preview instantly so you always see exactly what your button will look like before copying the code.
Select from Darken, Lighten, Scale, Lift + Shadow, or None. The hover effect is included in the generated CSS automatically. No manual tweaking needed.
Click Generate CSS Code to get clean, production-ready CSS and HTML. Copy each block with one click and drop it straight into your project. Free, no account required.
CSS Properties
Every button is built from the same set of CSS properties. Understanding what each one does lets you customize confidently without guessing.
Core Button CSS
.my-button { background, color, padding, border-radius, font-size, font-weight, border, box-shadow, transition }
Example: padding: 14px 28px; border-radius: 8px; font-weight: 600;
The most impactful CSS properties for a button are background-color, color (text), padding, and border-radius. Together they define the button's color scheme, size, and shape before any interaction happens.
Hover and active states are handled by the :hover and :active pseudo-classes. Adding a transition property to the base state ensures the change animates smoothly instead of snapping. A transition of all 0.25s ease covers every animatable property in one declaration.
Box-shadow lifts the button visually off the page. You can also animate the box-shadow in :hover to create an elevation effect that signals interactivity. Keep shadow values subtle: a large, dark shadow on a small button looks heavy.
Font-weight and font-size affect how prominent the button label feels. 600 or 700 weight is standard for CTA buttons. Font sizes between 14px and 18px work well for most layouts. Avoid sizing below 14px as it reduces readability and accessibility.
Button Trends 2026
Button design evolves every year. These are the patterns dominating high-converting websites and design systems in 2026.
| Trend | Usage | Notes |
|---|---|---|
| Pill-shaped buttons | Very high | Border radius 50px+ for a modern, soft look. Popular in SaaS and e-commerce. |
| Ghost / outline buttons | High | Transparent background with a visible border. Used for secondary CTAs alongside solid primaries. |
| Gradient fills | High | Two-color gradients (blue to purple, pink to orange) signal premium and creative brands. |
| Micro-animation on hover | Very high | Scale, lift, or color-shift on hover. Makes buttons feel tactile and responsive. |
| Icon + label buttons | Medium | A small icon left of the label clarifies the action (arrow for links, check for confirm, etc.). |
| Large padding, less text | High | Generous padding (14px 32px+) with short copy converts better than cramped text-heavy buttons. |
Based on analysis of top-performing SaaS and e-commerce landing pages, 2026.
Accessibility
An attractive button that fails accessibility standards excludes users and can expose you to legal risk. These five rules cover the essentials.
| Rule | Requirement | Why It Matters |
|---|---|---|
| Color contrast ratio | At least 4.5:1 (text vs background) | WCAG 2.1 AA minimum. Use a contrast checker before finalizing colors. |
| Focus indicator | Visible outline on keyboard focus | Keyboard-only and screen reader users rely on focus rings to navigate. |
| Minimum touch target | 44x44px (Apple/Google guideline) | Small targets cause tap errors on mobile devices. |
| Descriptive label | Button text must describe the action | Avoid vague labels like "Click Here." Use "Download Report" or "Start Free Trial." |
| Disabled state | Use aria-disabled and reduced opacity | Purely visual grey buttons can confuse screen readers without proper ARIA. |
Standards: WCAG 2.1 AA, Apple HIG, Google Material Design, 2026.
Common Mistakes
Most button problems are avoidable. These six mistakes consistently hurt click-through rates, user experience, and accessibility scores.
White text on a light blue or yellow button fails WCAG contrast requirements. Always check your text-to-background contrast ratio using a tool before shipping. A ratio below 4.5:1 fails accessibility standards.
Minimum contrast: 4.5:1 (WCAG AA)Buttons under 44px tall are hard to tap accurately on mobile. This leads to mis-clicks, frustration, and lost conversions. Always set a minimum height of 44px and generous horizontal padding so the button is easy to hit.
Minimum tap target: 44x44pxA button with no visual feedback when hovered or clicked feels broken. Users need confirmation that the button is interactive. Even a simple brightness change or slight scale increase makes your UI feel polished and intentional.
Always add a hover transitionWhen every button on a page looks like the primary CTA, nothing stands out. Use one primary button per section and relegate secondary actions to ghost or text-style buttons. Visual hierarchy drives conversions.
1 primary CTA per section maximumButtons labeled "Submit," "Click Here," or "Go" tell the user nothing about what happens next. Strong CTA copy is specific: "Start Free Trial," "Download the Guide," "Book a Demo." Clear copy removes hesitation and increases clicks.
Copy should describe the outcomeApplying button styles as inline HTML attributes makes them nearly impossible to update at scale. A single CSS class means one change updates every button on your site. Always use a class-based approach for production buttons.
Use .my-button class, not style=""Design Tips
These practical tips help you create buttons that look great and drive more clicks. All CommonNinja widgets mentioned below are free to start.
If you want a perfectly styled button without touching CSS, CommonNinja's Marketing Button widget lets you design, place, and track CTAs visually. Works on any platform. Free to start.
Try Marketing Button widget →A button that opens a popup dramatically increases lead capture. The visitor clicks, a well-designed offer appears, and conversion rates jump. CommonNinja Popup Builder integrates in minutes.
Try Popup Builder widget →Visitors decide within seconds whether to engage. Your primary CTA button should be visible without scrolling. Hero sections with a clear button above the fold consistently outperform pages that bury the CTA lower.
Your CTA button should use your brand's primary color so it is consistent and instantly recognizable across your entire site. Avoid using multiple random colors for buttons across different pages.
Rounded buttons (border-radius 8-12px) tend to feel approachable and modern. Sharp-cornered buttons (border-radius 0-2px) feel more corporate and authoritative. Test which works best for your audience.
Set vertical and horizontal padding rather than a fixed height. This keeps your button proportional when text length changes and prevents layout issues with different font sizes or languages.
A soft box-shadow (0 4px 14px rgba(0,0,0,0.15)) makes a button appear to float above the page, drawing the eye naturally. It signals interactivity without being distracting.
Hover transitions faster than 100ms feel instant (jarring). Slower than 300ms feels sluggish. A 200-250ms ease transition on color and transform hits the sweet spot between smooth and snappy.
CSS Glossary
A quick reference for the CSS properties used in button styling, with examples and guidance on when to reach for each one.
| Property | What It Does | Example Value | When to Use |
|---|---|---|---|
| border-radius | Controls the roundness of a button's corners. 0 = square, 4-10px = slightly rounded, 50px+ = pill shape. | border-radius: 8px | Adjusting the visual personality of your button to match brand guidelines |
| transition | Defines how CSS property changes animate over time. Shorthand covers property, duration, and easing function. | transition: all 0.25s ease | Smoothing hover, focus, and active state changes for a polished feel |
| box-shadow | Adds a shadow behind the element. Accepts horizontal offset, vertical offset, blur, spread, and color. | box-shadow: 0 4px 14px rgba(0,0,0,0.18) | Giving depth to a flat button or creating an elevation effect on hover |
| filter: brightness() | Adjusts the overall luminance of an element. Values below 1 darken, above 1 lighten. Useful for hover states. | filter: brightness(0.85) | Simple hover darkening or lightening without knowing the exact darker hex value |
| transform: scale() | Scales an element up or down from its center. Does not affect layout flow, so surrounding elements stay put. | transform: scale(1.05) | Adding a subtle grow-on-hover effect that signals interactivity without shifting layout |
From the Blog
Dig deeper into button design, CSS techniques, and conversion optimization strategies that help you build better websites.
In this article, we are going to discuss the importance of the contact page, and explain how to build one. ...
Read article →In this article, we are going to explain how to reflect your brand identity in your website design. ...
Read article →In this article, we are going to explain how to create a Real Estate website. ...
Read article →In this comprehensive guide, we will delve into the intricacies of effective website navigation. ...
Read article →In this article, we are going to explain how to create an Event website. ...
Read article →In this article, we are going to explain how to build a compelling About Us page. ...
Read article →