Pill-Shaped CTA Button

A border-radius: 999px fully-rounded button with a bold solid fill and a scale-on-hover effect — reads as friendlier and less formal than a sharp-cornered button, common on consumer and marketing landing pages.

btnUseGradient: false  ·  btnBg: #00d4aa  ·  btnRadius: 999  ·  btnPadX: 32  ·  btnPadY: 14  ·  btnText: Try it free  ·  btnFontSize: 16  ·  btnFontWeight: 700  ·  btnShadow: true  ·  btnHover: scale

Frequently asked questions

Why 999px instead of 50% for a pill button?

A large fixed pixel value (like 999px) always produces a fully-rounded pill regardless of the button's width, while 50% only produces a pill on a button roughly as tall as it is a fraction of its width — 999px is the more reliable, common approach.

What does the "scale" hover effect do?

It grows the button slightly (a small transform: scale()) on hover, giving tactile feedback without moving its position the way a "lift" effect does.

Is a solid color or gradient better for a pill button?

Both work — this preset uses a solid teal fill for a clean, confident look; enable the gradient toggle in the live tool if you want a two-color pill instead.