15+ CSS Radio Button Examples

This post contains a total of 15+ Hand-Picked CSS Radio Button Examples with Source Code. All the Radio Buttons are made using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Antoinette Janus

Made by Antoinette Janus. CSS Radio button with Bounce animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400);
@keyframes checkIn {
  0% {
    top: -1%;
    height: 10px;
    width: 24px;
    margin-left: -12px;
  }
  7% {
    top: -4%;
    height: 12.5px;
    width: 22px;
    margin-left: -11px;
  }
  17% {
    top: -2%;
    height: 15px;
    width: 12px;
    margin-left: -6px;
  }
  25% {
    top: 20%;
    height: 15px;
    width: 10px;
    margin-left: -5px;
  }
  30% {
    top: 102%;
    height: 10px;
    width: 28px;
    margin-left: -14px;
  }
  45% {
    top: 50%;
    height: 15px;
    width: 6px;
    margin-left: -3px;
    margin-top: -10px;
  }
  60% {
    top: 50%;
    height: 20px;
    width: 10px;
    margin-left: -5px;
  }
  70% {
    top: 50%;
    height: 40px;
    width: 40px;
    margin-left: -20px;
    margin-top: -20px;
  }
  80% {
    top: 50%;
    height: 32px;
    width: 32px;
    margin-left: -16px;
    margin-top: -16px;
  }
  90% {
    top: 50%;
    height: 24px;
    width: 24px;
    margin-left: -12px;
    margin-top: -12px;
  }
  100% {
    top: 50%;
    height: 24px;
    width: 24px;
    margin-left: -12px;
    margin-top: -12px;
  }
}
@keyframes checkOut {
  0% {
    overflow: visible;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -17px;
    margin-left: -17px;
    border: 2px solid #009fd6;
    opacity: 1;
  }
  100% {
    width: 46px;
    top: 50%;
    height: 46px;
    margin-top: -25px;
    margin-left: -25px;
    border: 2px solid #009fd6;
    opacity: 0;
  }
}
html, body {
  background: #000;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#container {
  position: relative;
  left: 50%;
  top: 50%;
  display: inline-block;
  transform: translateX(-50%) translateY(-50%);
}

input#circle-input {
  display: none;
}
input#circle-input:checked + label#circle-cont {
  overflow: hidden;
}
input#circle-input:checked + label#circle-cont #circle {
  background: #009fd6;
  animation: checkIn 1s forwards linear 0s 1;
}

label#circle-cont {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid #FFF;
  display: block;
  position: relative;
  float: left;
  overflow: visible;
}
label#circle-cont #circle {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  left: 50%;
  border-radius: 50%;
  top: -100%;
  animation: checkOut 0.25s forwards linear 0s 1;
}
label#label-name {
  color: #FFF;
  font-family: "Raleway", sans-serif;
  position: relative;
  float: left;
  font-size: 1.25em;
  margin: 4px 12px;
}
</style>
</head>
<body>
<div id="container">
  <input type="checkbox" id="circle-input"/>
  <label for="circle-input" id="circle-cont">
    <div id="circle"></div>
  </label>
  <label for="circle-input" id="label-name">
    Radio button
  </label>
</div>
</body>
</html>

2. By Mikael Ainalem

Made by Mikael Ainalem. Simple Underground Radio buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:600');
body {
  align-items: center;
  background: #EEF5FD;
  color: #545556;
  display: flex;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  height: 100vh;
  justify-content: center;
  margin: 0;
}
.showOverlay {
  bottom: 0;
  display: flex;
  font-size: 16px;
  left: calc(50% - 55px);
  margin-bottom: 7px;
  position: absolute;
}
.check {
  bottom: 0;
  display: flex;
  left: calc(50% + 40px);
  margin-bottom: 10px;
  position: absolute;
}
.containerOuter {
  background: white;
  border-radius: 8px;
  box-shadow: 2px 6px 20px 2px rgba(10,10,120,0.15);
}
.container {
  position: relative;
  margin: 20px;
  overflow: hidden;
  width: 160px;
}
.hidden {
  display: none;
}
.entry {
  height: 25px;
  position: absolute;
  width: 160px;
}
.entry:nth-child(2) {
  left: 8px;
  top: 8px;
}
.entry:nth-child(4) {
  left: 8px;
  top: 58px;
}
.entry:nth-child(6) {
  left: 8px;
  top: 108px;
}
.circle {
  border: 2px solid #545556;
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  position: absolute;
  transition: border-color 300ms;
  width: 20px;
}
.entry-label {
  cursor: pointer;
  margin-top: -3px;
  padding-left: 40px;
  user-select: none;
  -moz-user-select: none;
}
.overlay {
  background: #fff;
  mask: url(#holes);
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACMCAYAAAAOc+uVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAItSURBVHic7ZnNjhJBFIVPA0txr0Iyw+tIdOXWaDRufZWZeYbZuMKOUV9Gg+HHGN/BHBcNcSBT1KVOEVycb0mq635UVd9U5zQkif+Y3rkFclhQxYIqFlQZiM8vALQAPgP4AWC1+X0E4ALAFMBzAOPiCixjRfIdyX5g/h7JFyTnJYVKBGckHxQsxJBke2rBK5LF55bdal6fSnCmyO1JhlcyKrhkwbYekBySXNcUfF1L7o7k20jhhsxetxYAJk3T/Kks2EfXmkaHxkXO1MfacgCwmbPNjYsIftV1knzJDYgIfqsgkuJ7bkBE8FcFkRTr3IBzXxay9SOCjyuIFM8dEZxUECmeOyL4tIJIimluQKRRLwFcnqBRDwDMUaFRjwG8quC0zxtk5ACEL6wrksNaZiQfkvwZKRxtM08AfGDgBh2Q6wG4BfAo+sAxXB/xp+6VI3lzTMGSK3/Lgu1mt62fji1W+tH0m+R7dm9iZNVeMnjm9om0mUOs8O+zc47dz84Juh76DJG3NYEqeHLOfVnIYkEVC6pYUMWCKhZUsaCKBVUsqGJBFQuqWFDFgipO3OnEfRcn7qWCTtxTOHFP4cS9Ek7cVZy4qzhxL4ZO3AXoxF2QoxP3DifuW5y4q1hQxYIqFlSxoIoFVSyoYkEVC6pYUMWCKhZUsaCKE3c6cd/FiXupoBP3FE7cUzhxr4QTdxUn7ipO3IuhE3cBOnEX5OjEvcOJ+xYn7ioWVLGgigVV/gKEL4RSyM8Z8wAAAABJRU5ErkJggg==);
  height: 140px;
  pointer-events: none;
  transition: background 300ms;
  width: 40px;
}
.highlight {
  background: #4D98EF;
  border-radius: 50%;
  height: 12px;
  left: 14px;
  pointer-events: none;
  position: absolute;
  top: 14px;
  transition: transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.2);
  transform: translateY(-50px);
  width: 12px;
}
.hidden:nth-child(1):checked ~ .highlight {
  transform: translateY(0);
}
.hidden:nth-child(3):checked ~ .highlight {
  transform: translateY(50px);
}
.hidden:nth-child(5):checked ~ .highlight {
  transform: translateY(100px);
}
.hidden:nth-child(1):checked + .entry .circle {
  border-color: #4D98EF;
}
.hidden:nth-child(3):checked + .entry .circle {
  border-color: #4D98EF;
}
.hidden:nth-child(5):checked + .entry .circle {
  border-color: #4D98EF;
}
.check:checked ~ .containerOuter .overlay {
  background: #ecf0f4;
}
</style>
</head>
<body>
  <label class="showOverlay" for="check">Show mask </label>
<input id="check" class="check" type="checkbox">
<div class="containerOuter">
  <div class="container">
    <input type="radio" class="hidden" id="input1" name="inputs">
    <label class="entry" for="input1"><div class="circle"></div><div class="entry-label">Kingdom</div></label>
    <input type="radio" class="hidden" id="input2" name="inputs">
    <label class="entry" for="input2"><div class="circle"></div><div class="entry-label">Horse</div></label>
    <input type="radio" class="hidden" id="input3" name="inputs">
    <label class="entry" for="input3"><div class="circle"></div><div class="entry-label">Computer</div></label>
    <div class="highlight"></div>
    <div class="overlay"></div>
  </div>
</div>
<svg width="0" height="0" viewBox="0 0 40 140">
  <defs>
    <mask id="holes">
      <rect x="0" y="0" width="100" height="140" fill="white" />
      <circle r="12" cx="20" cy="20" fill="black"/>
      <circle r="12" cx="20" cy="70" fill="black"/>
      <circle r="12" cx="20" cy="120" fill="black"/>
    </mask>
  </defs>
</svg>
</body>
</html>

3. By ari

Made by ari. Radio button hearts with animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 24px;
  height: 24px;
  margin: 0 12px;
  outline: 12px solid #BDBDBD;
  outline-offset: -12px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 50%;
  transform: rotate(45deg) scale(1);
  will-change: transform;
}
input[type=radio]:checked {
  border-radius: 50% 50% 0 50%;
  -webkit-animation: active 1s ease forwards;
          animation: active 1s ease forwards;
  outline-offset: -12px;
  outline: 12px solid #BDBDBD;
}

@-webkit-keyframes active {
  25% {
    transform: rotate(45deg) scale(1.5);
  }
  75% {
    transform: rotate(45deg) scale(1.25);
  }
  50%, 100% {
    transform: rotate(45deg) scale(1);
    box-shadow: 0 -12px 0 0 #e44, -12px 0 0 0 #e44;
    outline-color: #e44;
  }
}

@keyframes active {
  25% {
    transform: rotate(45deg) scale(1.5);
  }
  75% {
    transform: rotate(45deg) scale(1.25);
  }
  50%, 100% {
    transform: rotate(45deg) scale(1);
    box-shadow: 0 -12px 0 0 #e44, -12px 0 0 0 #e44;
    outline-color: #e44;
  }
}
</style>
</head>
<body>
  <input type="radio" name="heart" checked="checked"/>
<input type="radio" name="heart"/>
<input type="radio" name="heart"/>
<input type="radio" name="heart"/>
<input type="radio" name="heart"/>
</body>
</html>

4. By Andreas Storm

Made by Andreas Storm. Yes or No Radio Button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
body {
  font-family: sans-serif;
  font-weight: 800;
}
.switch {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 50px;
  text-align: center;
  margin: -30px 0 0 -75px;
  background: #4cd964;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 25px;
}
.switch span {
  position: absolute;
  width: 20px;
  height: 4px;
  top: 50%;
  left: 50%;
  margin: -2px 0px 0px -4px;
  background: #fff;
  display: block;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 2px;
}
.switch span:after {
  content: "";
  display: block;
  position: absolute;
  width: 4px;
  height: 12px;
  margin-top: -8px;
  background: #fff;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 2px;
}
input[type=radio] {
  display: none;
}
.switch label {
  cursor: pointer;
  color: rgba(0,0,0,0.2);
  width: 60px;
  line-height: 50px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
label[for=yes] {
  position: absolute;
  left: 0px;
  height: 20px;
}
label[for=no] {
  position: absolute;
  right: 0px;
}
#no:checked ~ .switch {
  background: #ff3b30;
}
#no:checked ~ .switch span {
  background: #fff;
  margin-left: -8px;
}
#no:checked ~ .switch span:after {
  background: #fff;
  height: 20px;
  margin-top: -8px;
  margin-left: 8px;
}
#yes:checked ~ .switch label[for=yes] {
  color: #fff;
}
#no:checked ~ .switch label[for=no] {
  color: #fff;
}
</style>
</head>
<body>
  <form action="">
  <input type="radio" name="rdo" id="yes" checked />
  <input type="radio" name="rdo" id="no"/>
  <div class="switch">
    <label for="yes">Yes</label>
    <label for="no">No</label>
    <span></span>
  </div>
</form>
</body>
</html>

5. By Tristan White

Made by Tristan White Simple Radio Buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.radio {
  margin: 0.5rem;
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.radio input[type=radio] + .radio-label:before {
  content: "";
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.2em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type=radio]:checked + .radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: #3197EE;
}
.radio input[type=radio]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}
.radio input[type=radio] + .radio-label:empty:before {
  margin-right: 0;
}
</style>
</head>
<body>
  <div class="container">
  <div class="radio">
    <input id="radio-1" name="radio" type="radio" checked>
    <label for="radio-1" class="radio-label">Checked</label>
  </div>

  <div class="radio">
    <input id="radio-2" name="radio" type="radio">
    <label  for="radio-2" class="radio-label">Unchecked</label>
  </div>

  <div class="radio">
    <input id="radio-3" name="radio" type="radio" disabled>
    <label for="radio-3" class="radio-label">Disabled</label>
  </div>
</div>
</body>
</html>

6. By Brandon McConnell

Made by Brandon McConnell. Pure CSS Radio Button with Dot-Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
 
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Nunito:400,600,800'>
<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.4.1/css/all.css'>
  
<style>
@charset "UTF-8";
html, body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  color: #000;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#form-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  width: 90%;
  max-width: 500px;
}
form #form-title {
  margin-top: 0;
  font-weight: 400;
  text-align: center;
}
form #debt-amount-slider {
  display: flex;
  flex-direction: row;
  align-content: stretch;
  position: relative;
  width: 100%;
  height: 50px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
form #debt-amount-slider::before {
  content: " ";
  position: absolute;
  height: 2px;
  width: 100%;
  width: calc(100% * (4 / 5));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
}
form #debt-amount-slider input, form #debt-amount-slider label {
  box-sizing: border-box;
  flex: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
form #debt-amount-slider label {
  display: inline-block;
  position: relative;
  width: 20%;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
form #debt-amount-slider label::before {
  content: attr(data-debt-amount);
  position: absolute;
  left: 50%;
  padding-top: 10px;
  transform: translate(-50%, 45px);
  font-size: 14px;
  letter-spacing: 0.4px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0.85;
  transition: all 0.15s ease-in-out;
}
form #debt-amount-slider label::after {
  content: " ";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 2px solid #000;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 1;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
form #debt-amount-slider label:hover::after {
  transform: translate(-50%, -50%) scale(1.25);
}
form #debt-amount-slider input {
  display: none;
}
form #debt-amount-slider input:checked + label::before {
  font-weight: 800;
  opacity: 1;
}
form #debt-amount-slider input:checked + label::after {
  border-width: 4px;
  transform: translate(-50%, -50%) scale(0.75);
}
form #debt-amount-slider input:checked ~ #debt-amount-pos {
  opacity: 1;
}
form #debt-amount-slider input:checked:nth-child(1) ~ #debt-amount-pos {
  left: 10%;
}
form #debt-amount-slider input:checked:nth-child(3) ~ #debt-amount-pos {
  left: 30%;
}
form #debt-amount-slider input:checked:nth-child(5) ~ #debt-amount-pos {
  left: 50%;
}
form #debt-amount-slider input:checked:nth-child(7) ~ #debt-amount-pos {
  left: 70%;
}
form #debt-amount-slider input:checked:nth-child(9) ~ #debt-amount-pos {
  left: 90%;
}
form #debt-amount-slider #debt-amount-pos {
  display: block;
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
  transition: all 0.15s ease-in-out;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  opacity: 0;
  z-index: 2;
}
form:valid #debt-amount-slider input + label::before {
  transform: translate(-50%, 45px) scale(0.9);
  transition: all 0.15s linear;
}
form:valid #debt-amount-slider input:checked + label::before {
  transform: translate(-50%, 45px) scale(1.1);
  transition: all 0.15s linear;
}
form + button {
  display: block;
  position: relative;
  margin: 56px auto 0;
  padding: 10px 20px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: all 0.15s ease-in-out;
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  background: #fff;
  border: 2px solid #000;
  border-radius: 8px;
  outline: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
form + button:hover {
  background: #000;
  color: #fff;
}
form + button:hover:active {
  transform: scale(0.9);
}
form + button:focus {
  background: #4caf50;
  border-color: #4caf50;
  color: #fff;
  pointer-events: none;
}
form + button:focus::before {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}
form + button::before {
  display: inline-block;
  width: 0;
  opacity: 0;
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  margin-right: 0;
  transform: rotate(0deg);
}
form:invalid + button {
  pointer-events: none;
  opacity: 0.25;
}

@-webkit-keyframes spin {
  from {
    transform: rotate(0deg);
    width: 24px;
    opacity: 1;
    margin-right: 12px;
  }
  to {
    transform: rotate(360deg);
    width: 24px;
    opacity: 1;
    margin-right: 12px;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
    width: 24px;
    opacity: 1;
    margin-right: 12px;
  }
  to {
    transform: rotate(360deg);
    width: 24px;
    opacity: 1;
    margin-right: 12px;
  }
}
</style>
</head>
<body>
  <div id="form-wrapper">
	<form action="/p/quote.php" method="GET">
		<h1 id="form-title">Select Debt Amount</h1>
		<div id="debt-amount-slider">
			<input type="radio" name="debt-amount" id="1" value="1" required>
			<label for="1" data-debt-amount="< $10k"></label>
			<input type="radio" name="debt-amount" id="2" value="2" required>
			<label for="2" data-debt-amount="$10k-25k"></label>
			<input type="radio" name="debt-amount" id="3" value="3" required>
			<label for="3" data-debt-amount="$25k-50k"></label>
			<input type="radio" name="debt-amount" id="4" value="4" required>
			<label for="4" data-debt-amount="$50k-100k"></label>
			<input type="radio" name="debt-amount" id="5" value="5" required>
			<label for="5" data-debt-amount="$100k+"></label>
			<div id="debt-amount-pos"></div>
		</div>
	</form>
	<button type="submit">Get Debt Free!</button>
</div>
</body>
</html>

7. By Danielle Romo

Made by Danielle Romo. Cards with Radio Buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">

<style>
:root {
  --card-line-height: 1.2em;
  --card-padding: 1em;
  --card-radius: 0.5em;
  --color-green: #558309;
  --color-gray: #e2ebf6;
  --color-dark-gray: #c4d1e1;
  --radio-border-width: 2px;
  --radio-size: 1.5em;
}

body {
  background-color: #f2f8ff;
  color: #263238;
  font-family: "Noto Sans", sans-serif;
  margin: 0;
  padding: 2em 6vw;
}

.grid {
  display: grid;
  grid-gap: var(--card-padding);
  margin: 0 auto;
  max-width: 60em;
  padding: 0;
}
@media (min-width: 42em) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background-color: #fff;
  border-radius: var(--card-radius);
  position: relative;
}
.card:hover {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}

.radio {
  font-size: inherit;
  margin: 0;
  position: absolute;
  right: calc(var(--card-padding) + var(--radio-border-width));
  top: calc(var(--card-padding) + var(--radio-border-width));
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    border: var(--radio-border-width) solid var(--color-gray);
    border-radius: 50%;
    cursor: pointer;
    height: var(--radio-size);
    outline: none;
    transition: background 0.2s ease-out, border-color 0.2s ease-out;
    width: var(--radio-size);
  }
  .radio::after {
    border: var(--radio-border-width) solid #fff;
    border-top: 0;
    border-left: 0;
    content: "";
    display: block;
    height: 0.75rem;
    left: 25%;
    position: absolute;
    top: 50%;
    transform: rotate(45deg) translate(-50%, -50%);
    width: 0.375rem;
  }
  .radio:checked {
    background: var(--color-green);
    border-color: var(--color-green);
  }

  .card:hover .radio {
    border-color: var(--color-dark-gray);
  }
  .card:hover .radio:checked {
    border-color: var(--color-green);
  }
}
.plan-details {
  border: var(--radio-border-width) solid var(--color-gray);
  border-radius: var(--card-radius);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: var(--card-padding);
  transition: border-color 0.2s ease-out;
}

.card:hover .plan-details {
  border-color: var(--color-dark-gray);
}

.radio:checked ~ .plan-details {
  border-color: var(--color-green);
}

.radio:focus ~ .plan-details {
  box-shadow: 0 0 0 2px var(--color-dark-gray);
}

.radio:disabled ~ .plan-details {
  color: var(--color-dark-gray);
  cursor: default;
}

.radio:disabled ~ .plan-details .plan-type {
  color: var(--color-dark-gray);
}

.card:hover .radio:disabled ~ .plan-details {
  border-color: var(--color-gray);
  box-shadow: none;
}

.card:hover .radio:disabled {
  border-color: var(--color-gray);
}

.plan-type {
  color: var(--color-green);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1em;
}

.plan-cost {
  font-size: 2.5rem;
  font-weight: bold;
  padding: 0.5rem 0;
}

.slash {
  font-weight: normal;
}

.plan-cycle {
  font-size: 2rem;
  font-variant: none;
  border-bottom: none;
  cursor: inherit;
  text-decoration: none;
}

.hidden-visually {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
</style>
</head>
<body>
  <div class="grid">
  <label class="card">
    <input name="plan" class="radio" type="radio" checked>
    
    <span class="plan-details">
      <span class="plan-type">Basic</span>
      <span class="plan-cost">$0<span class="slash">/</span><abbr class="plan-cycle" title="month">mo</abbr></span>
      <span>1 team member</span>
      <span>100 GB/mo</span>
      <span>1 concurrent build</span>
    </span>
  </label>
  <label class="card">
    <input name="plan" class="radio" type="radio">
    <span class="hidden-visually">Pro - $50 per month, 5 team members, 500 GB per month, 5 concurrent builds</span>
    <span class="plan-details" aria-hidden="true">
      <span class="plan-type">Pro</span>
      <span class="plan-cost">$50<span class="slash">/</span><span class="plan-cycle">mo</span></span>
      <span>5 team members</span>
      <span>500 GB/mo</span>
      <span>5 concurrent builds</span>
    </span>
  </label>
  <label class="card">
    <input name="plan" class="radio" type="radio">
    <span class="hidden-visually">Business - $200 per month, 5+ team members, 1000 GB per month, Unlimited builds</span>
    <span class="plan-details" aria-hidden="true">
      <span class="plan-type">Business</span>
      <span class="plan-cost">$200<span class="slash">/</span><span class="plan-cycle">mo</span></span>
      <span>5+ team members</span>
      <span>1000 GB/mo</span>
      <span>Unlimited builds</span>
    </span>
  </label>
</div>
</body>
</html>

8. By Riley Shaw

Made by Riley Shaw. Sliding Menu made using Radio Buttons. Source


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
html {
  background: #ff6461;
}

body {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 214px;
  width: 336px;
  margin: -107px -168px;
}

input {
  visibility: hidden;
}

label {
  position: absolute;
  left: 0;
  right: 228px;
  background: white;
  cursor: pointer;
  transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;
}
#li0 + label {
  top: 14px;
  bottom: 164px;
}
#li1 + label {
  top: 64px;
  bottom: 114px;
}
#li2 + label {
  top: 114px;
  bottom: 64px;
}
#li3 + label {
  top: 164px;
  bottom: 14px;
}
:checked + label {
  left: 122px;
  right: 0;
  top: 14px !important;
  bottom: 14px !important;
  transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;
}
</style>
</head>
<body>
  <input id="li0" name="foo" type="radio" /><label for="li0"></label><input checked="" id="li1" name="foo" type="radio" /><label for="li1"></label><input id="li2" name="foo" type="radio" /><label for="li2"></label><input id="li3" name="foo" type="radio" /><label for="li3"></label><input id="li4" name="foo" type="radio" /><label for="li4"></label><input id="li5" name="foo" type="radio" /><label for="li5"></label>
</body>
</html>

9. By Davide SandonΓ 

Made by Davide SandonΓ . Three state CSS radio button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body {
  background: #1d1d1d;
  font-family: 'Lato', sans-serif;
  font-size: 2rem;
  color: white;
  font-variant: small-caps;
}

/* height */
/* width */
/* toggle dimensions */
/* font size */
/* toggle's border thickness */
/* toggle box shadow */
/* labels animation time */
/* label text color */
/* colors: si, ?, no*/
.wrapper {
  width: 12rem;
  height: 4rem;
  position: relative;
  margin: 2rem auto;
  border-radius: 2rem;
  background: gray;
}
.wrapper .toggle {
  width: 4.8rem;
  height: 4.8rem;
  position: absolute;
  left: 3.6rem;
  top: -0.4rem;
  border-radius: 50%;
  box-sizing: border-box;
  border: 0.1rem solid #ff6c00;
  background: #ff8933;
  box-shadow: 0 0 0.2rem 0.1rem #ff6c00 inset, 0 0 0.2rem 0.1rem #ff6c00;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wrapper label {
  cursor: pointer;
  width: 4rem;
  height: 4rem;
  position: absolute;
  margin: 0;
  padding: 0;
  z-index: 1;
  display: inline-block;
  text-align: center;
  line-height: 4rem;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  color: white;
  -webkit-animation: 6s rot-label ease-in-out infinite;
  -moz-animation: 6s rot-label ease-in-out infinite;
  -o-animation: 6s rot-label ease-in-out infinite;
  animation: 6s rot-label ease-in-out infinite;
}
.wrapper input {
  position: absolute;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

#yes_radio:checked {
  background: red;
}
#yes_radio:checked ~ .toggle {
  border: 0.1rem solid #008000;
  background: #00b300;
  box-shadow: 0 0 0.2rem 0.1rem #008000 inset, 0 0 0.2rem 0.1rem #008000;
  left: -0.4rem;
}

#no_radio:checked {
  background: red;
}
#no_radio:checked ~ .toggle {
  border: 0.1rem solid #ff0000;
  background: #ff3333;
  box-shadow: 0 0 0.2rem 0.1rem #ff0000 inset, 0 0 0.2rem 0.1rem #ff0000;
  left: 7.6rem;
}

#maybe_radio, #maybe-lbl {
  left: 33.33333%;
}

#no_radio, #no-lbl {
  left: 66.66667%;
}

#maybe-lbl {
  -webkit-animation-delay: 2s;
  -o-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

#no-lbl {
  -webkit-animation-delay: 4s;
  -o-animation-delay: 4s;
  -moz-animation-delay: 4s;
  animation-delay: 4s;
}

@-moz-keyframes rot-label {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-400deg);
  }
  18% {
    transform: rotate(-340deg);
  }
  20% {
    transform: rotate(-360deg);
  }
  30% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes rot-label {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-400deg);
  }
  18% {
    transform: rotate(-340deg);
  }
  20% {
    transform: rotate(-360deg);
  }
  30% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rot-label {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-400deg);
  }
  18% {
    transform: rotate(-340deg);
  }
  20% {
    transform: rotate(-360deg);
  }
  30% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
</style>
</head>
<body>
  <div align="center">Three State Radio Button</div>
<div class="wrapper">
  <label for="yes_radio" id="yes-lbl">si</label><input type="radio" value="" name="choice_radio" id="yes_radio">
  <label for="maybe_radio" id="maybe-lbl">?</label><input type="radio" value="" name="choice_radio" id="maybe_radio" checked="checked">
  <label for="no_radio" id="no-lbl">no</label><input type="radio" value="" name="choice_radio" id="no_radio">
  
  <div class="toggle"></div>
</div>
</body>
</html>

10. By Caleb Duren

Made by Caleb Duren. Input scale made using radio buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  
<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,);
* {
  box-sizing: border-box;
}

body {
  font-family: Roboto Condensed, Helvetica Neue, sans-serif;
  display: table;
  height: 100%;
  width: 100%;
}

.vertical-align {
  display: table-cell;
  vertical-align: middle;
  height: 100vh;
}

.button-link {
  text-decoration: none;
}

.btns {
  background-color: #ff9035;
  background-image: linear-gradient(100deg, #ff5a64 0%, #faa04b 30%, #d2dc69 70%, #0ef49b 100%);
  z-index: 0;
  height: 80px;
  float: none;
  margin: 0 auto;
  width: 900px;
  max-width: 100%;
  border-radius: 40px;
  display: block;
  box-shadow: 0 2px 4px -1px rgba(25, 25, 25, 0.2);
}
.btns input {
  display: none;
}
.btns label {
  display: table;
  float: left;
  padding: 0;
  width: 20%;
  height: 100%;
  margin: 0;
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.btns label:first-child {
  border-left: none;
  border-radius: 40px 0 0 40px;
}
.btns label:last-child {
  border-radius: 0 40px 40px 0;
}
.btns .btn {
  font-size: 19px;
  cursor: pointer;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  font-weight: 300;
  color: #FFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 30px 20px -20px rgba(255, 255, 255, 0.15);
  transition: color 250ms cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.btns .btn:hover {
  box-shadow: inset 0 30px 30px -20px rgba(50, 50, 50, 0.02);
  transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btns .btn:after {
  content: "βœ”";
  margin-left: -10px;
  display: inline-block;
  transform: scale(0);
  transition: margin 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045) 100ms, transform 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.btns .first {
  border-radius: 40px 0 0 40px;
}
.btns .last {
  border-radius: 0 40px 40px 0;
}
.btns input:checked + .btn {
  color: #5f6982;
  text-shadow: none;
  background-image: linear-gradient(to top, rgba(25, 25, 25, 0) 65%, rgba(25, 25, 25, 0.08));
  box-shadow: inset 0 10px 50px rgba(25, 25, 25, 0.08);
  transition: color 500ms cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 150ms;
}
.btns input:checked + .btn:after {
  margin-left: 12px;
  transform: scale(1.25);
  transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms, margin 500ms;
}
</style>
</head>
<body>
  <body>
  <div class='vertical-align'>
    <div class='btns'>
      <label>
        <input checked='' name='button-group' type='radio' value='item'>
          <span class='btn first'>Never</span>
        </input>
      </label>
      <label>
        <input name='button-group' type='radio' value='other-item'>
          <span class='btn'>Sometimes</span>
        </input>
      </label>
      <label>
        <input name='button-group' type='radio' value='other-item'>
          <span class='btn'>Often</span>
        </input>
      </label>
      <label>
        <input name='button-group' type='radio' value='third'>
          <span class='btn'>Usually</span>
        </input>
      </label>
      <label>
        <input name='button-group' type='radio' value='third'>
          <span class='btn last'>Always</span>
        </input>
      </label>
    </div>
  </div>
</body>
</html>

11. By Gabriel Ferreira

Made by Gabriel Ferreira. Radio buttons with amazing styling and animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Inter:400'");
html {
  background-color: #1a1a1a;
  overflow: hidden;
}

.middle {
  width: 100%;
  text-align: center;
  /* Made by */
}
.middle h1 {
  font-family: "Inter", sans-serif;
  color: #fff;
}
.middle input[type=radio] {
  display: none;
}
.middle input[type=radio]:checked + .box {
  background-color: #007e90;
}
.middle input[type=radio]:checked + .box span {
  color: white;
  transform: translateY(70px);
}
.middle input[type=radio]:checked + .box span:before {
  transform: translateY(0px);
  opacity: 1;
}
.middle .box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  transition: all 250ms ease;
  will-change: transition;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  font-family: "Inter", sans-serif;
  font-weight: 900;
}
.middle .box:active {
  transform: translateY(10px);
}
.middle .box span {
  position: absolute;
  transform: translate(0, 60px);
  left: 0;
  right: 0;
  transition: all 300ms ease;
  font-size: 1.5em;
  user-select: none;
  color: #007e90;
}
.middle .box span:before {
  font-size: 1.2em;
  font-family: FontAwesome;
  display: block;
  transform: translateY(-80px);
  opacity: 0;
  transition: all 300ms ease-in-out;
  font-weight: normal;
  color: white;
}
.middle .front-end span:before {
  content: "ο„‘";
}
.middle .back-end span:before {
  content: "";
}
.middle p {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.middle p a {
  text-decoration: underline;
  font-weight: bold;
  color: #fff;
}
.middle p span:after {
  content: "";
  font-family: FontAwesome;
  color: yellow;
}
</style>
</head>
<body>
  <div class="middle">
  <h1>CSS Radio Button</h1>
  <label>
  <input type="radio" name="radio" checked/>
  <div class="front-end box">
    <span>Front-end</span>
  </div>
</label>

  <label>
  <input type="radio" name="radio"/>
  <div class="back-end box">
    <span>Back-end</span>
  </div>
</label>
  <p>Made <span></span> by <a href="https://github.com/gabrielferreiraa" target="_blank">@gabrielferreiraa</a></p>
</div>
</body>
</html>

12. By Victor Freire

Made by Victor Freire. Google Dots Radio Buttons with animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@keyframes fade {
    0%, 50% {
        opacity: 0;
        transform: scale(0);
    }
}
@keyframes dot-anim {
    0% {
        top: -4vw;
    }
    50% {
        top: 4vw;
    }
    100% {
        top: -4vw;
    }
}
@keyframes checked-radio-3 {
    0% {
        top: -10vw;
        transform: scale(0);
    }
    100% {
        top: 0;
        transform: scale(1);
    }
}
@keyframes unchecked-radio-3 {
    0% {
        bottom: 0;
        transform: scale(1);
    }
    100% {
        bottom: -10vw;
        transform: scale(0);
    }
}
@keyframes checked-radio-4 {
    0% {
        transform: rotate(0) translateY(-4.8vw) scale(.2);
    }
    83% {
        transform: rotate(360deg) translateY(-2.5vw) scale(1);
        transform-origin: 2vw;
    }
    88% {
        transform: translateY(.6vw) scale(1);
    }
    93% {
        transform: translateY(-.9vw) scale(1);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}
@keyframes unchecked-radio-4 {
    25% {
        top: -6.5vw;
    }
    50% {
        top: 9vw;
    }
    75% {
        top: -10vw;
    }
    100% {
        top: -10vw;
        transform: scale(0);
    }
}
*, *:before, *:after {
    margin: auto;
    padding: 0;
    outline: 0;
    overflow: hidden;
    box-sizing: border-box;
}
html, body { background: white; }
main, .container, label, label:before, label:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
main {
    width: 95vw;
    height: 50vw;
}
.container {
    width: 100%;
    height: 100%;
    animation: fade 1s;
}
label {
    display: inline-block;
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    transition: all .2s ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 1.6s;
    animation-name: dot-anim;
}
.radio:checked + label {
    animation-play-state: paused;
}
label:before {
    content: "";
    position: absolute;
    width: 5vw;
    height: 5vw;
    background: white;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.117647) 0 0 .8vw 0, rgba(0, 0, 0, 0.239216) 0 .8vw .8vw 0;
    transition: all .2s;
}
label:hover:before {
    box-shadow: rgba(0, 0, 0, 0.0784314) 0 0 1vw 0, rgba(0, 0, 0, 0.239216) 0 1vw 1vw 0;
}
label:after {
    content: "";
    position: absolute;
    width: 10vw;
    height: 10vw;
    background: rgba(255, 255, 255, .5);
    border-radius: 50%;
    transform: scale(0);
}
.radio:checked + label:after {
    background: transparent;
    transition: all .5s;
    transform: scale(1);
}
/**** BLUE Radio button code ****/
#radio-1 + label {
    left: -60vw;
    background: #4285F4;
    animation-delay: 0s;
}
#radio-1 + label:before {
    transform: scale(0);
}
#radio-1:checked + label:before {
    transform: scale(1);
    transition: all .4s;
}
/**** RED radio button code ****/
#radio-2 + label {
    left: -20vw;
    background: #EA4335;
    border-color: #EA4335!important;
    animation-delay: .2s;
}
#radio-2:checked + label {
    background: white;
    border: 1vw solid;
    box-shadow: inset rgba(0, 0, 0, 0.117647) 0 0 .6vw 0, inset rgba(0, 0, 0, 0.239216) 0 .6vw .8vw 0;
    transition: all .2s;
}
#radio-2:checked + label:before {
    width: 5vw;
    height: 5vw;
    background: #EA4335;
    transition: all .4s;
}
/* for IE */
#radio-2:not(:checked) + label:before {
    width: 8vw;
    height: 8vw;
    background: #EA4335;
    box-shadow: none;
}
/**** YELLOW radio button code ****/
#radio-3 + label {
    left: 20vw;
    background: #FBBC05;
    animation-delay: .4s;
}
#radio-3 + label:before {
    /* background: #E91E63; */
    transform: scale(0);
    animation-name: unchecked-radio-3;
    animation-duration: .2s;
    animation-timing-function: ease-in-out;
}
#radio-3:checked + label:before {
    animation-name: checked-radio-3;
    animation-duration: .4s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}
/**** GREEN radio button code ****/
#radio-4 + label {
    left: 60vw;
    background: #34A853;
    animation-delay: .6s;
}
#radio-4 + label:before {
    /* background: #8BC34A; */
    animation: unchecked-radio-4 .5s both;
}
#radio-4:checked + label:before {
    animation-name: checked-radio-4;
    animation-duration: .6s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: both;
}
[type="radio"] {
    display: none;
}
</style>
</head>
<body>
  <main>
            <div class="container">
                <input type="radio" class="radio" id="radio-1" name="group"/>
                <label for="radio-1"></label>
                <input type="radio" class="radio" id="radio-2" name="group"/>
                <label for="radio-2"></label>
                <input type="radio" class="radio" id="radio-3" name="group"/>
                <label for="radio-3"></label>
                <input type="radio" class="radio" id="radio-4" name="group"/>
                <label for="radio-4"></label>
            </div>
        </main>
</body>
</html>

13. By Matt Sisto

Made by Matt Sisto. CSS Radio buttons with Ripple effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@charset "UTF-8";
@-webkit-keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}
@-moz-keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}
@keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}
.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.3333333333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 40px;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
}
.option-input:hover {
  background: #9faab7;
}
.option-input:checked {
  background: #40e0d0;
}
.option-input:checked::before {
  height: 40px;
  width: 40px;
  position: absolute;
  content: "βœ–";
  display: inline-block;
  font-size: 26.6666666667px;
  text-align: center;
  line-height: 40px;
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #40e0d0;
  content: "";
  display: block;
  position: relative;
  z-index: 100;
}
.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}

body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  box-align: stretch;
  -ms-flex-align: stretch;
  background: #e8ebee;
  color: #9faab7;
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  text-align: center;
}
body div {
  padding: 5rem;
}
body label {
  display: block;
  line-height: 40px;
}
</style>
</head>
<body>
  <div>
  <label>
    <input type="checkbox" class="option-input checkbox" CHECKED />
    Checkbox
  </label>
  <label>
    <input type="checkbox" class="option-input checkbox" />
    Checkbox
  </label>
  <label>
    <input type="checkbox" class="option-input checkbox" />
    Checkbox
  </label>
</div>
<div>
  <label>
    <input type="radio" class="option-input radio" name="example" />
    Radio option
  </label>
  <label>
    <input type="radio" class="option-input radio" name="example" />
    Radio option
  </label>
  <label>
    <input type="radio" class="option-input radio" name="example" />
    Radio option
  </label>
</div>
</body>
</html>

14. By Ophelia Fournier-Laflamme

Made by Ophelia Fournier-Laflamme. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
/*------------∞
|  reset.css  |
∞------------*/
/* ∞∞ postcss ∞∞ */

/* ∞∞ font ∞∞ */
@import url(https://fonts.googleapis.com/css?family=Lato:300,900);
body {
	font-family: 'Lato', sans-serif;
}
/* ∞∞ global ∞∞ */
	* {
		position: relative;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border-color: inherit;
	}

	body {
		width: 100vw;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: scroll;
		font-size: 100%;
		font-style: normal;
		font-weight: 300;
		line-height: 1;
		margin: 0;
		padding: 0;
	}
	
/* ∞∞ text styling ∞∞ */
	h1, h2, h3, h4, h5, h6, p, em, a, b, strong {
		font-style: normal;
		font-weight: 300;
	}

	strong {
		font-size: 1.15em;
	}

	small {
  	font-size: .85em;
	}

	ul,
	ol,
	menu {
		list-style: none;
	}

	sub,
	sup {
  	font-size: .75em;
  	line-height: 0;
  	position: relative;
  	vertical-align: baseline;
	}
	
	sup {
  	top: -0.5em;
	}
	
	sub {
  	bottom: -0.25em;
	}

	code,
	kbd,
	pre,
	samp {
  	font-family: monospace, monospace;
  	font-size: 1em;
	}

	abbr[title] {
  	border-bottom: 1px dotted;
	}
	
	dfn {
  	font-style: italic;
	}

/* ∞∞ form elements ∞∞ */
	button,
	input,
	optgroup,
	select,
	textarea {
  	color: inherit;
  	font: inherit;
  	margin: 0;
  	background: transparent;
		outline: none;
		border: none;
		border-radius: 0;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
	}
	
	button,
	select {
  	text-transform: none;
  	cursor: pointer;
	}

	button[disabled],
	html input[disabled] {
  	cursor: default;
	}
	
	fieldset {
  	border: none;
  	margin: 0;
  	padding: 0;
		min-width: 0;
	}

	textarea {
		resize: none;
	}

/* ∞∞ link styling ∞∞ */
	a {
		display: inline;
		text-decoration: none;
		color: inherit;
		cursor: pointer;
	}

	a:active,
	a:hover {
  	outline: 0;
	}

	/* a::before {
		width: 100%;
		height: .2rem;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #7ac;
	}

	a:hover::before {
		background-color: #49e;
		height: .35rem;
	} */

/* ∞∞ hr using box ∞∞ */
	hr {
		border: none;
  	box-sizing: border-box;
  	height: .075rem;
	}

/* ∞∞ hidden ∞∞ */
	[hidden],
	template {
  	display: none;
	}

/* ∞∞ media specific ∞∞ */
	audio:not([controls]) {
  	display: none;
  	height: 0;
	}

/* ∞∞ tables ∞∞ */
	table {
  	border-collapse: collapse;
  	border-spacing: 0;
  	border: none;
	}

	td,
	th {
		margin: 0;
  	padding: 0;
  	font-weight: inherit;
		text-align: inherit;
	}


/*====================================================== ∞∞ browser specific ∞∞ */

/* ∞∞ IE ∞∞ */
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	main,
	menu,
	nav,
	section,
	summary {
  	display: block;
	}
	
	audio,
	canvas,
	progress,
	video {
  	display: inline-block;
  	vertical-align: baseline;
	}

	a {
  	background-color: transparent;
	}

	button {
  	overflow: visible;
	}

	html {
  	-ms-text-size-adjust: 100%;
	}

	img {
  	border: none;
	}

	input[type="checkbox"],
	input[type="radio"] {
  	box-sizing: border-box;
  	padding: 0;
	}

	legend {
  	border: none;
  	padding: 0;
	}

	mark {
  	background: #ff0;
  	color: #000;
	}

	svg:not(:root) {
  	overflow: hidden;
	}

	textarea {
  	overflow: auto;
	}

/* ∞∞ moz ∞∞ */
	body {
		-moz-osx-font-smoothing: grayscale;
	}

	button::-moz-focus-inner,
	input::-moz-focus-inner {
  	border: none;
  	padding: 0;
	}

	input {
  	line-height: normal;
	}

/* ∞∞ webkit ∞∞ */
	* {
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
	}

	html {
  	-webkit-text-size-adjust: 100%;
	}

	body {
		-webkit-font-smoothing: antialiased !important;
	}

	blockquote {
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
	}

	fieldset {
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
		-webkit-padding-before: 0;
		-webkit-padding-start: 0;
		-webkit-padding-end: 0;
		-webkit-padding-after: 0;
	}

	input[type=number]::-webkit-inner-spin-button, 
	input[type=number]::-webkit-outer-spin-button { 
  	-webkit-appearance: none; 
  	margin: 0; 
  	height: auto;
	}

	input[type="search"] {
  	-webkit-appearance: textfield;
  }

  input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-decoration,
	progress {
  	-webkit-appearance: none;
	}
body {
	background-color: #FFC650;
	text-align: center;
}

form {
	background-color: #FFC650;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 550px;
	height: 270px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

/* radio */
fieldset {
	width: 100%;
	text-align: center;
}

input[type="radio"] {
	display: none;
}

input[type="radio"] +label {
		color: white;
		font-weight: bold;
		font-size: 1rem;
		cursor: pointer;
		-webkit-user-select: none;
		   -moz-user-select: none;
		    -ms-user-select: none;
		        user-select: none;
		padding-left: 20px;
		padding-right: 20px;
	}

input[type="radio"] +label::before {
			transition: all 250ms cubic-bezier(.4,.25,.3,1);
			content: "";
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: white;
			border: 0px solid white;
			font-size: 0;
			position: absolute;
			bottom: 275%;
			left: 50%;
			transform: translate(-50%, 50%);
		}

input[type="radio"] +label::after {
			transition: all 250ms cubic-bezier(.4,.25,.3,1);
			content: "";
			width: 0;
			height: 0;
			border-radius: 50%;
			background-color: white;
			position: absolute;
			bottom: 275%;
			left: 50%;
			transform: translate(-50%, 50%);
		}

input[type="radio"]:checked + label::before {
			background-color: transparent;
			width: 40px;
			height: 40px;
			border-width: 2px;
		}

input[type="radio"]:checked + label::after {
			width: 30px;
			height: 30px;
		}


/* input */
section.input-container label {
		position: relative;
		display: block;
	}
section.input-container label input {
			display: block;
			padding: 20px;
			width: 300px;
		  margin-bottom: 10px;
		  outline: none;
			transition: all 0.2s ease-in-out;
			background-color: white;
			font-weight: bold;
			color: #FF7975;
		}
section.input-container label input::-moz-placeholder {
				-moz-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;
				color: #D3D3D3;
				font-weight: bold;
			}
section.input-container label input:-ms-input-placeholder {
				-ms-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;
				color: #D3D3D3;
				font-weight: bold;
			}
section.input-container label input::placeholder {
				transition: all 0.2s ease-in-out;
				color: #D3D3D3;
				font-weight: bold;
			}
section.input-container label input:focus, section.input-container label input.populated {
				padding-top: 28px;
				padding-bottom: 12px;
			}
section.input-container label input:focus::-moz-placeholder, section.input-container label input.populated::-moz-placeholder {
					color: transparent;
				}
section.input-container label input:focus:-ms-input-placeholder, section.input-container label input.populated:-ms-input-placeholder {
					color: transparent;
				}
section.input-container label input:focus::placeholder, section.input-container label input.populated::placeholder {
					color: transparent;
				}
section.input-container label input:focus + span, section.input-container label input.populated + span {
				   opacity: 1;
				    top: 10px;
				}
section.input-container label span {
			font-size: .8rem;
			color: #A9A9A9;
			position: absolute;
			top: 0px;
			left: 20px;
			opacity: 0;
			transition: all 0.2s ease-in-out;
		}
</style>
</head>
<body>
  <form>
	<section class="input-container">
		<label>
		<input type="text" placeholder="input–1" name="product_name">
		<span>input–1</span>
		</label>
	</section>
	
	<fieldset>
		<input type="radio" name="radio1" id="radio-1" value="radio-1"/>
		<label for="radio-1">radio–1</label>

		<input type="radio" name="radio1" id="radio-2" value="radio-2" checked="checked"/>
		<label for="radio-2">radio–2</label>
		
		<input type="radio" name="radio1" id="radio-3" value="radio-3"/>
		<label for="radio-3">radio–3</label>
	</fieldset>
</form> 
</body>
</html>

15. By Milan Raring

Made by Milan Raring. Radio button with drop animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Varela+Round&amp;display=swap'>
  
<style>
form {
  --background: #ffffff;
  --text: #414856;
  --radio: #7C96B2;
  --radio-checked: #4F29F0;
  --radio-size: 20px;
  --width: 100px;
  --height: 140px;
  --border-radius: 10px;
  background: var(--background);
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  color: var(--text);
  position: relative;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  padding: 30px 45px;
  display: grid;
  grid-template-columns: auto var(--radio-size);
  align-items: center;
}
form label {
  cursor: pointer;
}
form input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: var(--radio-size);
  width: var(--radio-size);
  outline: none;
  margin: 0;
  cursor: pointer;
  border: 2px solid var(--radio);
  background: transparent;
  border-radius: 50%;
  display: grid;
  justify-self: end;
  justify-items: center;
  align-items: center;
  overflow: hidden;
  transition: border 0.5s ease;
}
form input[type=radio]::before, form input[type=radio]::after {
  content: "";
  display: flex;
  justify-self: center;
  border-radius: 50%;
}
form input[type=radio]::before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--background);
  z-index: 1;
  opacity: var(--opacity, 1);
}
form input[type=radio]::after {
  position: relative;
  width: calc(100% /2);
  height: calc(100% /2);
  background: var(--radio-checked);
  top: var(--y, 100%);
  transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);
}
form input[type=radio]:checked {
  --radio: var(--radio-checked);
}
form input[type=radio]:checked::after {
  --y: 0%;
  -webkit-animation: stretch-animate 0.3s ease-out 0.17s;
          animation: stretch-animate 0.3s ease-out 0.17s;
}
form input[type=radio]:checked::before {
  --opacity: 0;
}
form input[type=radio]:checked ~ input[type=radio]::after {
  --y: -100%;
}
form input[type=radio]:not(:checked)::before {
  --opacity: 1;
  transition: opacity 0s linear 0.5s;
}

@-webkit-keyframes stretch-animate {
  0% {
    transform: scale(1, 1);
  }
  28% {
    transform: scale(1.15, 0.85);
  }
  50% {
    transform: scale(0.9, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes stretch-animate {
  0% {
    transform: scale(1, 1);
  }
  28% {
    transform: scale(1.15, 0.85);
  }
  50% {
    transform: scale(0.9, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
body {
  background: #E8EBF3;
  height: 100vh;
  font: 400 16px "Varela Round", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body .socials {
  position: fixed;
  display: block;
  left: 20px;
  bottom: 20px;
}
body .socials > a {
  display: block;
  width: 30px;
  opacity: 0.2;
  transform: scale(var(--scale, 0.8));
  transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
}
body .socials > a:hover {
  --scale: 1;
}
</style>
</head>
<body>
  <form>
    <label for="01">One</label>
    <input id="01" type="radio" name="r" value="1" checked>
    <label for="02">Two</label>
    <input id="02" type="radio" name="r" value="2">
    <label for="03">Three</label>
    <input id="03" type="radio" name="r" value="3">
</form>

<!--- ## DRIBBBLE + TWITTER ############# -->
<div class="socials">
  <a class="dribbble" href="https://dribbble.com/shots/10405487-Radio-button-animation-Only-CSS" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" fill="black" d="M16 0C7.16703 0 0 7.16703 0 16C0 24.833 7.16703 32 16 32C24.8156 32 32 24.833 32 16C32 7.16703 24.8156 0 16 0ZM26.5683 7.37527C28.4772 9.70065 29.6226 12.6681 29.6573 15.8785C29.2061 15.7918 24.6941 14.872 20.1475 15.4447C20.0434 15.2191 19.9566 14.9761 19.8525 14.7332C19.5748 14.0738 19.2625 13.397 18.9501 12.7549C23.9826 10.7072 26.2733 7.75705 26.5683 7.37527ZM16 2.36009C19.4707 2.36009 22.6464 3.66161 25.0586 5.7961C24.8156 6.14317 22.7505 8.90239 17.8915 10.7245C15.6529 6.61171 13.1714 3.24512 12.7896 2.72451C13.8134 2.48156 14.8894 2.36009 16 2.36009ZM10.1866 3.64425C10.551 4.13015 12.9805 7.5141 15.2538 11.5401C8.86768 13.2408 3.22777 13.2061 2.62039 13.2061C3.50542 8.9718 6.36876 5.44902 10.1866 3.64425ZM2.32538 16.0174C2.32538 15.8785 2.32538 15.7397 2.32538 15.6009C2.9154 15.6182 9.54447 15.705 16.3644 13.6573C16.7636 14.4208 17.128 15.2017 17.4751 15.9826C17.3015 16.0347 17.1106 16.0868 16.9371 16.1388C9.89154 18.4121 6.14317 24.6247 5.8308 25.1453C3.6616 22.7332 2.32538 19.5228 2.32538 16.0174ZM16 29.6746C12.8416 29.6746 9.92625 28.5987 7.61822 26.7939C7.86117 26.2907 10.6377 20.9458 18.3427 18.256C18.3774 18.2386 18.3948 18.2386 18.4295 18.2213C20.3557 23.2017 21.1367 27.3839 21.3449 28.5813C19.6963 29.2928 17.8915 29.6746 16 29.6746ZM23.6182 27.3319C23.4794 26.4989 22.7505 22.5076 20.9631 17.5965C25.2495 16.9197 28.9978 18.0304 29.4664 18.1866C28.8764 21.987 26.6898 25.2668 23.6182 27.3319Z" fill="#EA4C89"></path></svg></a>
  <a class="twitter" href="https://twitter.com/MilanRaring" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 72 72"><path fill="black" d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
</div>
</body>
</html>

16. By HΓ₯vard Brynjulfsen

Made by HΓ₯vard Brynjulfsen. Pill styled radio buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected];400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
<style>
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  color: #000021;
  font-size: calc(1em + 1.25vw);
  background-color: #e6e6ef;
}

form {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

label {
  display: flex;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.375em;
  /* Accessible outline */
  /* Remove comment to use */
  /*
  	&:focus-within {
  			outline: .125em solid $primary-color;
  	}
  */
}
label input {
  position: absolute;
  left: -9999px;
}
label input:checked + span {
  background-color: #d6d6e5;
}
label input:checked + span:before {
  box-shadow: inset 0 0 0 0.4375em #00005c;
}
label span {
  display: flex;
  align-items: center;
  padding: 0.375em 0.75em 0.375em 0.375em;
  border-radius: 99em;
  transition: 0.25s ease;
}
label span:hover {
  background-color: #d6d6e5;
}
label span:before {
  display: flex;
  flex-shrink: 0;
  content: "";
  background-color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-right: 0.375em;
  transition: 0.25s ease;
  box-shadow: inset 0 0 0 0.125em #00005c;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
</style>
</head>
<body>
  <div class="container">
	<form>
		<label>
			<input type="radio" name="radio" checked/>
			<span>HTML</span>
		</label>
		<label>
			<input type="radio" name="radio"/>
			<span>CSS</span>
		</label>
		<label>
			<input type="radio" name="radio"/>
			<span>Javascript</span>
		</label>
	</form>
</div>
</body>
</html>