How to Make a Pill Button with CSS: Practical Styling

A CSS pill button is a button whose large border radius rounds both ends into a capsule shape.

Creating one in CSS means combining that geometry with deliberate padding, color, border, and typography; it does not require a special HTML element or JavaScript. For a reusable starting point, the CSS Button Generator lets you tune the base rule against a real button preview, copy the CSS, and then add product-specific interaction states. The generated output uses ordinary CSS and works without a framework, component library, image asset, or JavaScript runtime.

The Parts That Create the Capsule Shape

The defining feature is border-radius. A modest radius produces a rounded rectangle. When the radius becomes large enough to fill the available vertical curvature, the button takes on a capsule or pill profile. The radius does not make the button physically wider; it changes how the browser draws the corners.

A large pixel value such as 999px is a common shortcut because browsers reduce overlapping curves when necessary to fit them inside the box. A percentage radius can also adapt to the element’s dimensions, although horizontal and vertical percentages resolve against different box dimensions. Check the result after changing padding, font size, or line height. The CSS Backgrounds and Borders specification covers the underlying radius behavior, while this guide to border-radius values and corner order explains the practical differences between pixel and percentage syntax.

CSS property	Role in a pill button	What to inspect
border-radius	Rounds the corners into a capsule	Whether the curve remains balanced after the height changes
padding	Creates breathing room around the label	Vertical spacing for height and horizontal spacing for width
background-color and color	Defines the button and label colors	Legibility in every interaction state
border	Adds definition, especially on pale backgrounds	Border width and its relationship to the radius
font-size and font-weight	Controls readability and perceived emphasis	Long, short, and translated labels
box-shadow	Adds visual depth without changing the geometry	Whether the effect remains restrained and consistent

Padding and the line box determine the button’s height, while horizontal padding largely determines its width. Radius alone therefore cannot guarantee a polished pill shape. Adjust the dimensions first, then confirm that the rounded ends still look intentional.

Build a Pill Button Step by Step

Use the generator to establish a dependable base class, then adapt that class to the design system and behavior of your page.

1. Choose the background, text, and border colors. Open the CSS Button Generator and enter the three colors in the workbench. The color controls accept six-digit hexadecimal values, so use a format such as #2563eb rather than a named color. If the project already has tokens, begin with those values to keep the button consistent with the surrounding interface.

2. Adjust the shape and spacing. Set the border width and corner radius, then tune horizontal and vertical padding. Choose a font size and weight that match the surrounding text, and add a simple shadow if the button needs separation from its background. The shadow controls follow the standard horizontal-offset, vertical-offset, and blur order: negative offsets move the shadow left or up, while blur must remain nonnegative.

3. Inspect the real preview at desktop and mobile widths. The preview uses an actual HTML button styled with the same values used to create the CSS output, so it provides a more useful check than a detached color swatch. Look at short and long labels, check whether the capsule remains balanced, and confirm that the button still reads clearly on a narrow screen. The preview button has type="button", so it will not accidentally submit a surrounding form.

4. Copy the CSS and give it a useful selector. Copy the complete .button rule, then rename it to something specific such as .pill-button or scope it under a component class. The output includes background color, text color, border, border radius, padding, font size, font weight, box shadow, and cursor styling. Renaming reduces the chance of a selector collision in a larger stylesheet.

5. Add interaction states after copying. The generator intentionally produces a base class rather than inventing hover, focus, active, loading, or disabled behavior. Add rules that match the product’s semantics: a restrained hover color, a pressed effect, a clearly visible focus indicator, and disabled styling that communicates unavailability without relying on opacity alone.

6. Integrate and verify the final button. Place the renamed class on a semantic button element, then check it with short and long text, translated labels, icons, zoom, keyboard navigation, touch input, and narrow screens. Use a dedicated contrast checker for the text and focus indicator because the preview does not calculate accessibility compliance automatically.

Start From a Complete CSS Rule

This example provides a practical baseline for a pill button with a border, shadow, balanced padding, and a large radius:

.pill-button { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; background-color: #2563eb; color: #ffffff; border: 1px solid #1d4ed8; border-radius: 999px; font-size: 1rem; font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); cursor: pointer; }

The values above are example starting points, not calculated generator results. The inline-flex declarations keep the label centered when an icon is added later. If the button uses only text, an inline-block button may also be sufficient. The important pill-specific declarations are the large border-radius and the padding that gives the curve room to read as a capsule.

Pair the class with a semantic element such as <button class="pill-button" type="button">Save changes</button>. Choose the final type according to the button’s behavior: a plain action can use type="button", while a submit button may need type="submit".

Add the Interaction States Your Product Needs

A base class describes how the button looks at rest, but an interactive control also needs feedback for pointer and keyboard users. Add these states after copying the generated rule so their behavior remains under your control.

• Hover: Change the background slightly so the pointer response is noticeable. Avoid a dramatic shift that makes the button appear to move or disappear.

• Active: Reduce the shadow or move the button down by a small amount to show that it has been pressed.

• Focus-visible: Add a clear outline with enough separation from the button edge. Do not remove the browser’s focus indicator unless the replacement is equally visible.

• Disabled: Apply the native disabled attribute and change more than opacity, such as the background, border, text color, or cursor. The meaning should remain clear without color alone.

For example, a hover rule can use .pill-button:hover { background-color: #1d4ed8; }, while a focus rule can use .pill-button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }. These colors are only starting points. Confirm contrast against the button, the page, and the surrounding focus area rather than assuming that a visually striking outline passes every context.

Test the Pill Button in Real Contexts

A preview can reveal layout problems, but the finished component needs to survive real content and user settings. Check each relevant state rather than evaluating only the default appearance.

• Compare short labels with long labels to see whether the ends remain balanced and the text has enough room.

• Test translated text, since longer translations can expose spacing problems that do not appear in the original language.

• Add an icon if the design uses one, and verify that the icon and label remain centered and visually connected.

• Review the button at narrow mobile widths, browser zoom levels, and enlarged text.

• Navigate to the button with the keyboard and confirm that the focus indicator is visible against every background it crosses.

• Check touch behavior and disabled presentation, then test how the button appears under forced-color settings.

Consistency across primary, secondary, destructive, and quiet buttons matters more than making one isolated pill unusually elaborate. Treat the generated rule as a baseline, then reuse spacing, typography, radius, and state conventions across the broader button set.

Know What the Generator Leaves to You

The generator supports the core styling decisions needed for a reusable button, but it does not replace project-level design and accessibility review. Its numeric controls are bounded to practical ranges, while valid zero values remain available where CSS permits them. The shadow editor is intentionally simple: it controls offsets and nonnegative blur using a restrained translucent black rather than providing a complete shadow editor.

The generated selector is deliberately generic, so rename or scope it. The tool also does not check text contrast automatically; verify default, hover, active, disabled, and focus states with a dedicated contrast tool. Preview and CSS generation run entirely in the current browser tab, and the design values are not uploaded. Even with these constraints, the workflow provides a fast way to turn visual decisions into readable CSS while keeping final behavior under your control.

If you're weighing options, Clip Path Generator for Beginners: A Practical Workflow covers this in detail.