12:I[55798,["/_next/static/chunks/52939b86d7fe12ed.js","/_next/static/chunks/505bc17a21084911.js","/_next/static/chunks/4b9a59ed93d5837f.js","/_next/static/chunks/43c3116fea7f1361.js"],"default"] 13:T51a,

In this tutorial, we'll create custom radio buttons with an elegant glow effect using pure HTML and CSS. Say goodbye to tedious default radio inputs—this project enhances them with smooth transitions, gradient backgrounds, and a subtle scale effect on selection.

✨ Features

✔️ Fully custom radio buttons with no default styling.
✔️ Smooth transitions when selecting an option.
✔️ Beautiful gradient glow effect for an interactive feel.
✔️ Scaling animation when clicking for better UX.
✔️ Pure CSS implementation with no JavaScript required!

🖌️ Explanation

We remove the default radio styling with -webkit-appearance: none.
A radial gradient background gives a soft glow effect.
Clicking the input scales it up for a smooth UI response.
Checked states are animated, creating a seamless selection experience.
The entire layout is centered using Flexbox.

14:T4e0,* { box-sizing: border-box; margin: 0; padding: 0; } body { height: 100vh; background: linear-gradient(to bottom, #000 0%, #999 100%); display: flex; justify-content: center; align-items: center; flex-direction: column; } input { -webkit-appearance: none; appearance: none; margin: 10px; width: 24px; height: 24px; border-radius: 12px; cursor: pointer; box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.2); background-image: radial-gradient( rgb(204, 238, 255) 0%, rgb(102, 204, 255) 15%, rgba(51, 187, 255, 0.302) 28%, rgba(0, 102, 153, 0) 70% ); background-repeat: no-repeat; transition: background-position 0.15s ease-in; outline: none; } input:checked { transition: 0.2s 0.15s ease-in-out; } input:active { transform: scale(1.5); } input, input:active { background-position: 0 24px; } input:checked { background-position: 0 0; } input:checked ~ input, input:checked ~ input:active { background-position: 0 -24px; } h1 { position: absolute; top: 140px; color: white; font-family: cursive; text-align: center; margin: 0 250px; }

Browse Darma projects

Items

🎨 Stylish Radio Buttons with a Unique G...