Question 1

What CSS makes a basic button?

Accepted Answer

A button needs only a handful of declarations: padding for size, background and color for the fill and text, border or border-radius for the shape, font-size and font-weight for the label, and cursor: pointer so it feels clickable. A transition makes hover and focus states animate smoothly. This generator writes all of that into a single .btn rule you can paste into your stylesheet.

Question 2

How do I add a hover effect to a CSS button?

Accepted Answer

Add a .btn:hover rule and change one or two properties. A lift uses transform: translateY(-2px) plus a stronger box-shadow; a darken uses filter: brightness(0.9); a glow uses an outer box-shadow ring in the button's accent color. Put transition: all .2s ease on the base .btn so the change animates. This tool generates the matching .btn:hover block for the effect you pick.

Question 3

How do I make a gradient button in CSS?

Accepted Answer

Use a linear-gradient as the background instead of a solid color, for example background: linear-gradient(135deg, #6366f1, #a855f7). Pick two colors and an angle, keep the text color readable against both ends, and optionally add a soft box-shadow for depth. Switch the background type to Gradient here and the tool outputs the linear-gradient for you.

Question 4

How do I make a rounded or pill button?

Accepted Answer

Increase border-radius. A small radius like 8px gives gently rounded corners; a radius equal to or larger than half the button's height produces a fully rounded pill. Because border-radius is capped at 50% of the shorter side, a large value such as 999px always yields a pill regardless of size.

Question 5

What contrast does an accessible button need?

Accepted Answer

WCAG asks for a contrast ratio of at least 4.5:1 between the button text and its background for normal text, or 3:1 for large or bold text. Avoid relying on color alone, keep a visible focus outline, and make sure the hover and focus states stay readable. Check your text and background colors with a contrast checker before shipping.

CSS ButtonGenerator

CSS Button
Generator