Custom radio button

CSS, Visual, Animation · Nov 16, 2022

Creates a styled radio button with animation on state change.

  • Create a .radio-container and use flexbox to create the appropriate layout for the radio buttons.
  • Reset the styles on the <input> and use it to create the outline and background of the radio button.
  • Use the ::before element to create the inner circle of the radio button.
  • Use transform: scale(1) and a CSS transition to create an animation effect on state change.
<div class="radio-container">
  <input class="radio-input" id="apples" type="radio" name="fruit" />
  <label class="radio" for="apples">Apples</label>
  <input class="radio-input" id="oranges" type="radio" name="fruit" />
  <label class="radio" for="oranges">Oranges</label>
.radio-container {
  box-sizing: border-box;
  background: #ffffff;
  color: #222;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;

.radio-container * {
  box-sizing: border-box;

.radio-input {
  appearance: none;
  background-color: #ffffff;
  width: 16px;
  height: 16px;
  border: 1px solid #cccfdb;
  margin: 0;
  border-radius: 50%;
  display: grid;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

.radio-input::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: scale(0);
  transition: 0.3s transform ease-in-out;
  box-shadow: inset 6px 6px #ffffff;

.radio-input:checked {
  background: #0077ff;
  border-color: #0077ff;

.radio-input:checked::before {
  transform: scale(1);

.radio {
  cursor: pointer;
  padding: 6px 8px;

.radio:not(:last-child) {
  margin-right: 6px;

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub.

More like this

  • CSS Animations

    A snippet collection of interactive CSS3 animation code snippets with interactive examples.

    Collection · 27 snippets

  • Custom checkbox

    Creates a styled checkbox with animation on state change.

    CSS, Visual · Oct 11, 2021

  • Custom text selection

    Changes the styling of text selection.

    CSS, Visual · Dec 30, 2020

  • Image overlay on hover

    Displays an image overlay effect on hover.

    CSS, Visual · Oct 11, 2021