Live preview Buttons
#transform CSS effects
5,986 free, pure-CSS effects match the "transform" tag. Each is copy-ready and needs no library or build step.
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Buttons
Live preview Cards
Barista Tips Card
Barista tips card with technique, grind size, and brew ratio.
Live preview Cards
Bestiary Entry Card
Bestiary entry card with a creature sketch, taxonomy, and danger rating.
Live preview Cards
Border Trace Card
Two thin lines race around the perimeter and meet at the opposite corner.
Live preview Cards
Coffee Brew Method Card
Coffee brewing guide with grind, temperature, time, and ratio.
Live preview Cards
Collectible Coin Card
Collectible coin card with a 3D embossed disc, denomination, and year.
Live preview Cards
Employee Badge
Corporate employee badge with a clip slot, photo, department, and access tier.
Live preview Cards
Flip Flashcard Card
3D flip flashcard with term on front and definition on back.
Live preview Cards
Flip Reveal Card
The card rotates on its vertical axis to show the details written on the back.
Live preview Cards
Macro Tracker Card
Macronutrient tracker card with protein, carbs, fat split as stacked bars.
Live preview Cards
Live preview Cards
New Arrival Tag
Product card with a diagonal NEW ARRIVAL corner ribbon and a soft image block.
Live preview Cards
Vintage Postcard
Aged postcard with a stamp, circular postmark, address lines and a handwritten greeting.
Live preview Cards
Recent Card
Recently-viewed card with a clock badge, faded thumbnail, and a timestamp.
Live preview Cards
Ribbon Award Card
Ribbon award card with a rosette, dangling tails, and a center medallion.
Live preview Cards
Souvenir Magnet Fridge Card
Fridge souvenir magnet card with destination name and magnetic backing.
Live preview Cards
Train Pass Card
Train pass card with a route diagram, class badge, and a seat assignment.
Live preview Cards
Visa Stamp Card
Passport visa stamp card with an angled ink stamp and entry/exit details.
Live preview Cards
Snow Weather Card
Snowy weather card with drifting snowflakes over a frosty pale-blue field.
Live preview Cards
Wine Cellar Bottle Card
Wine cellar bottle card with vintage, region, rating, and storage position.
Live preview Cards
Workout Set Card
Workout set tracker with exercise, sets, reps, weight, and progress bar.
Live preview Cards
Event Wristband
Fabric event wristband with patterned weave, a clasp, and day-stamp text.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Aurora Glow Toggle
A box that glows with shifting aurora gradients when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Bounce Spring Checkmark
A checkmark that pops in with a springy bounce when the checkbox is toggled on.
Live preview Checkboxes
Bounce Pop Checkbox
The whole control squashes and springs back the moment the state changes.
Live preview Checkboxes
Live preview Checkboxes
Color Sweep Check
A diagonal color sweep wipes across the checkbox leaving the checkmark behind when checked.
Live preview Checkboxes
Cosmic Ray Beam
A high-energy cosmic ray beam shoots through the box when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Fold Flip Checkbox
The box rotates on its X axis and lands on a green face carrying the tick.
Live preview Checkboxes
Live preview Checkboxes
Glassmorphism Rose
A frosted glass effect with rose tint and checkmark when checked.
Live preview Checkboxes
Has-Selector Select All
The parent row reads its children through :has() and reports partial or full.
Live preview Checkboxes
Leaf Grow Toggle
A leaf emoji grows in from a small scale with a green glow when checked.
Live preview Checkboxes
Live preview Checkboxes
Lever Pull Checkbox
A mechanical lever swings from the off notch down into the on notch.
Live preview Checkboxes
Live preview Checkboxes
Minimal Line Check
A clean, borderless minimal check whose mark fades in softly when toggled on.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Paw Print Toggle
A grayscale paw-print emoji fills in and pads down with a warm glow when toggled on.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Sun Brighten Toggle
A dim sun emoji brightens and slowly rotates with a warm yellow glow when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Blur Floating Label
Label starts blurred then sharpens as it lifts to the top.
Live preview Forms
Color Shift Floating Label
Label transitions through multiple hues when input is active.
Live preview Forms
Curve Floating Label
Label arcs upward in a curved path using transform-origin trick.
Live preview Forms
Live preview Forms
Emerald Accent Floating Label
Calm emerald-themed floating label for signup forms.
Live preview Forms
Floating Label Slide Up
Classic floating label that slides up when the input is focused or filled.
Live preview Forms
Violet Accent Floating Label
Violet-themed floating label input with soft glow.
Live preview Forms
Live preview Forms
Live preview Forms
Color Changing Icon Input
Input whose icon cycles through colors on focus.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms