AI CSS Animations

Custom CSS Radio Buttons

30 custom CSS radio buttons: animated dots, segmented controls, plan cards, star ratings and color swatches. Each group keeps real radio inputs, so arrow keys and forms work. Click to try them.

Custom Radio Button

The go-to custom radio: a native input with appearance: none, a soft ring and a dot that springs in with a little overshoot. One input and one ::before per option.

animated-dot · minimal · tailwind

Segmented Control with Sliding Pill

An iOS style segmented control built from radios. A colored pill glides behind the chosen label with a soft spring, positioned by :has(:checked) and a translateX.

segmented · minimal

Star Rating Radio Buttons

Five real radios in natural order: :has() lights the chosen star and every star before it in a popping wave, so arrow keys move the right way. Hover previews a rating first.

rating · icon

Pricing Plan Radio Cards

Three plan cards that act as one radio group. The chosen card lifts, gains an accent ring and a tinted fill, and a check badge pops onto its corner with a springy scale.

card-select · minimal

Color Swatch Radio Buttons

Round product color swatches. The chosen one grows an outline ring that springs out from its edge, draws a checkmark and shows its color name underneath. Colors live in one --sw each.

swatch · icon

Sliding Dot Radio Buttons

A vertical radio list with one shared dot that travels between the rings, stretching mid-flight and squashing as it lands. :has() picks the row; a keyframe per row replays the squash.

animated-dot · playful

Emoji Rating Radio Buttons

Five emoji faces from angry to delighted. Unpicked faces sit small and grayscale; the chosen one colors in, grows, bounces and shows its word below. Good for quick feedback forms.

rating · playful · icon

Size Picker Radio Buttons

Square size chips for a product page. The chosen size fills with the accent and gives a small pop, and a sold out size is a disabled radio with a diagonal strike through it.

card-select · minimal

Pure CSS Tabs with Radio Buttons

Tabs built on the radio hack: each tab is a radio, an underline slides under the active one and its panel fades up in place. :has() matches the checked tab to its panel.

segmented · minimal

Shipping Method Radio Cards

Checkout rows for picking a delivery speed. Each row is a label with a ring, an estimate and a price; the chosen one gets an accent border, a tinted fill and a dot that springs in.

card-select · animated-dot

Payment Method Radio Buttons

Icon tiles for choosing how to pay: card, bank or wallet. The chosen tile gets an accent border, its corner ring thickens into a filled radio and its icon gives a small nudge.

card-select · icon

Native Radio Button with accent-color

The lightest option: real browser radios recolored with accent-color and enlarged with width and height. A springy scale on hover and press, and the chosen label turns bold.

native · minimal · tailwind

Theme Picker Radio Cards

Light, dark and system options drawn as tiny app windows. The chosen preview lifts inside an accent ring, its mock button grows to full width and the radio under it fills.

card-select · icon

Radio Button with Checkmark

Radios that show a tick instead of a dot. The circle floods with the accent, then a white checkmark draws itself with stroke-dashoffset. Each option carries a line of helper text.

animated-dot · icon

Retro Radio Preset Buttons

The original radio buttons: chunky preset keys on an old car stereo. Pressing one sinks it and pops the others back up, its LED lights and the display rolls to the station.

playful · segmented

Neumorphic Radio Buttons

Soft UI radios on their own surface: each well sits raised until chosen, then sinks in as its shadows flip to inset and a glowing accent dot rises out of the middle.

animated-dot · minimal

Material Radio Button with Ripple

Material Design radios: a ring with a round state layer on hover, a dot that grows in, and an ink ripple that spreads and fades each time an option is chosen.

animated-dot · minimal

Poll Radio Buttons with Results

A one question poll. Before voting the answers are plain rows; picking one reveals the results as bars that grow in a stagger, with the percentages sliding in after them.

playful · card-select

Quiz Answer Radio Buttons

Multiple choice answers with instant feedback. A wrong pick turns red and shakes, the right answer is revealed in green with a tick, and the rest fade back. The answer lives in one class.

card-select · playful

Step Slider Radio Buttons

A range slider with fixed stops, made of radios: a thumb springs to the chosen notch while the fill stretches behind it. Here it picks a playback speed; notches are one radio each.

segmented · animated-dot

CSS Accordion with Radio Buttons

An FAQ accordion where every header is a radio, so opening one closes the rest. Panels ease open with the grid-template-rows 0fr to 1fr trick and the chevron flips.

minimal · card-select

CSS Carousel with Radio Buttons

A slider driven by its dots: each dot is a radio, the track glides to its slide and the caption rises in after it lands, while the active dot stretches into a pill. No script.

playful · animated-dot

Mood Picker Radio Buttons

One cartoon face that reacts to the pick: its mouth bends from frown to flat to smile, its color warms and it gives a little wobble. The mouth is a clipped ellipse whose height animates.

rating · playful

Radio Button Chips

Filter chips where one choice is active at a time. The chosen chip tints with the accent and a checkmark slides in and draws itself, widening the pill. Built on label:has(:checked).

minimal · icon · tailwind

Text Align Toggle Group

An editor toolbar of icon radios for left, center and right alignment, next to a paragraph preview whose lines glide into the new alignment one after another.

icon · segmented

Yes No Radio Buttons

A yes or no answer as a split pill. The chosen half widens with a springy flex-grow, fills with its own color, green-blue for yes or red for no, and its icon pops.

segmented · icon · playful

Square Radio Button

Radios drawn as rounded squares in a two by two grid. The inner square spins in from a diamond with a springy overshoot. Still real radios, so arrow keys move the choice.

animated-dot · minimal · tailwind

Big Radio Button with Border Fill

Large, easy to tap radios where the ring itself does the work: on check the border thickens inward with a spring until only a small hole is left. One input, no pseudo-elements.

animated-dot · minimal · tailwind

Gradient Radio Button

A conic gradient ring cut out with a radial mask. Unpicked rings rest in grayscale; the chosen one blooms into color, turns half a circle and a matching gradient dot spins in.

animated-dot · playful

Image Radio Buttons

Picture tiles that replace the radio circle. Unpicked images wait in grayscale; the chosen one lifts into an accent ring, its image zooms and warms to full color and a check badge pops in.

card-select · swatch

How to use these radio buttons

Open any group, copy the HTML into your form and the CSS into your stylesheet. Every option is a real <input type="radio"> inside its <label>, and the group shares one name, so arrow keys move the selection and the form submits the chosen value.

Give each group on a page its own name. To change the color, set --rad-color; to change the size, set --rad-size. Sliding indicators and dots follow the checked input with :checked and sibling or :has() selectors.

Every snippet keeps a visible :focus-visible ring and ships with a prefers-reduced-motion rule that moves the selection instantly for people who asked their OS for less motion.

Frequently asked questions

How do I style a radio button with CSS?

Set appearance: none on the input, give it a size and border-radius: 50%, then draw the inner dot with a ::before or a radial-gradient that appears on :checked.

How do I change a radio button's checked dot color?

Draw the dot yourself with a pseudo-element or radial gradient on :checked, or use accent-color on native radios. On every snippet here, --rad-color does it.

How do I make radio buttons look like buttons or a segmented control?

Keep the inputs, hide them visually (not with display: none) and style each label as a button. A sliding pill behind the checked label turns the group into a segmented control.

How do I make a star rating with radio buttons?

Use five radios in normal 1 to 5 order and light the chosen star and every star before it with label:has(~ label :checked). The older row-reverse trick works visually, but it makes the arrow keys move the rating the wrong way.

Are custom radio buttons accessible?

Yes, if the real inputs stay in the page, share a name, have labels and keep a visible focus style. Arrow keys then move between options as users expect.