AI CSS Animations

CSS Radio Button Cards

13 radio buttons as selectable cards: plan pickers, yes/no choices, image tiles and option cards, all real radio inputs that work with the keyboard and in forms.

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

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

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

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

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

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

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

Yes No Radio Cards with Icons

A yes or no question answered with two cards. The chosen card lifts into a ring of its own color, its icon disc fills and the check or cross draws itself in with stroke-dashoffset.

card-select · icon

Plan List Radio Cards

A billing plan list in the style of a modern SaaS checkout. One accent ring glides between the cards with a spring instead of fading, positioned by :has(:checked) and a custom property.

card-select · animated-dot

Wallpaper Picker Image Radios

Radio buttons as images: three wallpaper thumbnails painted with layered CSS gradients. An outline ring springs out around the pick, and the chosen wallpaper slowly drifts as if it were live.

card-select · swatch

Size Picker with Fit Note

A product page size picker, S to XXL. A marker slides along the fit scale under the chips to the chosen size, and the chest measurement line swaps in with a short rise for each pick.

card-select · segmented

How to use these radio button cards

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.