Tilt Card
Each option is a card that tilts up and glows when chosen — feature-rich plan picker for SaaS pricing pages.
Tilt Card the 6th of 18 designs in the 18 CSS Radio Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<fieldset class="crb-tilt"> <legend class="crb-sr">Choose plan</legend> <label><input type="radio" name="crb-tilt" /><strong>Solo</strong><em>$9/mo</em></label> <label><input type="radio" name="crb-tilt" checked /><strong>Team</strong><em>$29/mo</em></label> <label><input type="radio" name="crb-tilt" /><strong>Scale</strong><em>$99/mo</em></label> </fieldset>
.crb-tilt { display: flex; gap: 8px; border: 0; padding: 0; }
.crb-tilt input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-tilt label {
flex: 1; display: flex; flex-direction: column; gap: 4px;
padding: 12px 10px; border-radius: 10px;
background: #1a1a28; border: 1px solid rgba(255,255,255,0.06);
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, border-color 0.3s, background 0.3s;
}
.crb-tilt label strong {
font: 700 13px/1 system-ui, sans-serif; color: #fff;
}
.crb-tilt label em {
font: 500 11px/1 monospace; color: #b8b6d4; font-style: normal;
}
.crb-tilt label:has(input:checked) {
transform: translateY(-4px) rotate(-1deg);
background: linear-gradient(135deg, rgba(124,108,255,0.18), rgba(167,139,250,0.1));
border-color: rgba(124,108,255,0.5);
box-shadow: 0 8px 24px rgba(124,108,255,0.3);
}
.crb-sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}