7+ JavaScript Radio Button Examples

This post contains a total of 7+ Hand-Picked JavaScript Radio Button Examples with Source Code. All the Radio Buttons are made using JavaScript & Styled 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 Shirshen Dada

Made by Shirshen Dada. Simple JavaScript radio buttons with circle following animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.container div:nth-child(1) .content,
.container div:nth-child(2) .content {
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 40px 20px;
}
.container div:nth-child(1) .content:nth-child(1),
.container div:nth-child(2) .content:nth-child(1) {
  background: #ff0055;
}
.container div:nth-child(1) .content:nth-child(2),
.container div:nth-child(2) .content:nth-child(2) {
  background: #22cc88;
}
.container div:nth-child(2) .content:nth-child(1) {
  background: #0099ff;
}
.container div:nth-child(2) .content:nth-child(2) {
  background: #ffaa00;
}

.circle {
  position: fixed;
  top: var(--y);
  left: var(--x);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 10px solid var(--border);
  transition: 0.3s ease-in-out;
}
</style>
</head>
<body>
  <div class="container">
    <div>
        <div class="content" data-color="#ff0055"></div>
        <div class="content" data-color="#22cc88"></div>
    </div>
    <div>
        <div class="content" data-color="#0099ff"></div>
        <div class="content" data-color="#ffaa00"></div>
    </div>
</div>
<div class="circle"></div>
      <script>
let circle = document.querySelector(".circle");
let contents = document.querySelectorAll(".content");

contents.forEach(content => {
  content.addEventListener("click", e => {
    let x = e.target.offsetLeft - 15;
    let y = e.target.offsetTop - 15;
    let border = e.target.dataset.color;
    circle.setAttribute(
    "style",
    `--x: ${x}px; --y: ${y}px; --border: ${border}`);

  });
  let x = contents[0].offsetLeft - 15;
  let y = contents[0].offsetTop - 15;
  let border = contents[0].dataset.color;
  circle.setAttribute(
  "style",
  `--x: ${x}px; --y: ${y}px; --border: ${border}`);

});
    </script>
</body>
</html>

2. By Thiyagaraj

Made by Thiyagaraj. Pokebal radio buttons with animation. Source

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

<style>
body {
  background: #ffffff;
  font-family: Courier !important;
  font-weight: 700;
  color: #333;
}

.options {
  margin: 80px auto;
  width: fit-content;
}
.options .option {
  display: flex;
  flex-direction: row;
  margin: 20px;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
.options .option div {
  margin-right: 30px;
}
.options .option.faded {
  opacity: 0.8;
}

.pokeball {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid #333;
  transform-origin: center bottom;
}
.pokeball .base {
  background: #333;
  height: 80%;
  width: 80%;
  padding: 10%;
}
.pokeball .upper-half {
  position: absolute;
  background: #f15324;
  height: 42%;
  width: 100%;
}
.pokeball .lower-half {
  bottom: 0;
  position: absolute;
  background: white;
  height: 42%;
  width: 100%;
}
.pokeball .inner-circle {
  border-radius: 50%;
  height: 20%;
  width: 20%;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid #333;
  transform: translate(-50%, -50%);
}

.indicator-inner {
  border-radius: 50%;
  height: 20%;
  width: 20%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
}

.indicator {
  border-radius: 50%;
  height: 80%;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f64c4c;
  background: -webkit-radial-gradient(center, #f64c4c, #ff514f00);
  background: -moz-radial-gradient(center, #f64c4c, #ff514f00);
  background: radial-gradient(ellipse at center, #f64c4c, #ff514f00);
  opacity: 0;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes shake {
  0% {
    transform: rotate(5deg);
  }
  5% {
    transform: rotate(-5deg);
  }
  10% {
    transform: rotate(5deg);
  }
  15% {
    transform: rotate(-5deg);
  }
  20% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.selected {
  animation: shake 1.5s ease-in infinite;
}
.selected .indicator {
  opacity: 1;
  animation: blink 1s ease-in-out infinite;
}
.selected .indicator-inner {
  background: #f15324;
}
</style>
</head>
<body>
  <div class="options">
  <div class="option faded" id="option1">
    <div class="pokeball unselected">
      <div class="upper-half"> </div>
      <div class="lower-half"> </div>
      <div class="base"> </div>
      <div class="inner-circle"> </div>
      <div class="indicator visible"> </div>
      <div class="indicator-inner"> </div>
    </div>
    <div> Pikachu </div>
  </div>
  <div class="option faded" id="option2">
    <div class="pokeball unselected">
      <div class="upper-half"> </div>
      <div class="lower-half"> </div>
      <div class="base"> </div>
      <div class="inner-circle"> </div>
      <div class="indicator visible"> </div>
      <div class="indicator-inner"> </div>
    </div>
    <div> Charizard </div>
  </div>
  <div class="option faded" id="option3">
    <div class="pokeball unselected">
      <div class="upper-half"> </div>
      <div class="lower-half"> </div>
      <div class="base"> </div>
      <div class="inner-circle"> </div>
      <div class="indicator visible"> </div>
      <div class="indicator-inner"> </div>
    </div>
    <div> Squirtle </div>
  </div>
  <div class="option faded" id="option4">
    <div class="pokeball unselected">
      <div class="upper-half"> </div>
      <div class="lower-half"> </div>
      <div class="base"> </div>
      <div class="inner-circle"> </div>
      <div class="indicator visible"> </div>
      <div class="indicator-inner"> </div>
    </div>
    <div> Jigglypuff </div>
  </div>

</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

      <script>
const options = ["option1", "option2", "option3", "option4"];

options.forEach(option => {
  document.getElementById(option).addEventListener("click", function () {
    const pokeballs = document.getElementsByClassName("pokeball");
    for (var i = 0; i < pokeballs.length; i++) {if (window.CP.shouldStopExecution(0)) break;
      pokeball = pokeballs[i];
      if (pokeball.parentNode.id != option) {
        pokeball.classList.remove("selected");
        pokeball.parentNode.classList.add("faded");
      } else {
        pokeball.classList.add("selected");
        pokeball.parentNode.classList.remove("faded");
      }
    }window.CP.exitedLoop(0);
  });
});
    </script>
</body>
</html>

3. By Jon Kantner

Made by Jon Kantner. JavaScript Rolling Radio Buttons. Source

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

<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--bg: #e3e4e8;
	--bgT: #e3e4e800;
	--fg: #17181c;
	--focused: #b6cafb;
	--focusRing: #86a6f9;
	--unchecked: #ffffff;
	--checked: #255ff4;
	font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
}
body, input {
	font: 1em/1.5 system-ui, -apple-system, sans-serif;
}
body {
	background: var(--bg);
	color: var(--fg);
	display: flex;
	height: 100vh;
}
form {
	margin: auto;
	overflow: hidden;
	position: relative;
	padding: 0.75em 0;
}
form:before, form:after, .circles, .circle {
	position: absolute;
}
form:before, form:after {
	content: "";
	left: 0;
	width: 100%;
	height: 0.5em;
	z-index: 1;
}
form:before {
	background: linear-gradient(var(--bg),var(--bgT));
	top: 0;
}
form:after {
	background: linear-gradient(var(--bgT),var(--bg));
	bottom: 0;
}
input {
	position: fixed;
	top: -1.5em;
	left: -1.5em;
}
input:checked + label {
	background: var(--focused);
	box-shadow: 0 0 0 2px var(--focusRing) inset;
}
input:nth-of-type(2):checked ~ .circles .circle {
	transform: translateY(-6em);
}
input:nth-of-type(3):checked ~ .circles .circle {
	transform: translateY(-3em);
}
input:nth-of-type(4):checked ~ .circles .circle {
	transform: translateY(0);
}
label, .circle {
	transition: all 0.25s ease-in-out;
}
label {
	border-radius: 0.25em;
	cursor: pointer;
	display: block;
	padding: 0.75em 1em 0.75em 2.75em;
	-tap-highlight-color: transparent;
}
.circles {
	padding: 0.25em 0;
	top: 0;
	left: 1em;
}
.circle {
	background: var(--unchecked);
	border-radius: 50%;
	box-shadow:
		-0.2em -0.2em 0.2em #0003 inset,
		0.2em 0.2em 0.2em #0003;
	pointer-events: none;
	top: 1.75em;
	transform: translateY(-9em);
	width: 1em;
	height: 1em;
}
.circle:nth-child(2) {
	top: 4.75em;
	transition-delay: 0.05s;
}
.circle:nth-child(3) {
	top: 7.75em;
	transition-delay: 0.1s;
}
.circle:nth-child(4) {
	top: 10.75em;
	transition-delay: 0.15s;
}
.circle:nth-child(5) {
	top: 13.75em;
	transition-delay: 0.2s;
}
.circle:nth-child(6) {
	top: 16.75em;
	transition-delay: 0.25s;
}
.circle:nth-child(7) {
	top: 19.75em;
	transition-delay: 0.3s;
}
.circle-checked {
	background: var(--checked);
}
.circles-flip-delays .circle:nth-child(1) {
	transition-delay: 0.3s;
}
.circles-flip-delays .circle:nth-child(2) {
	transition-delay: 0.25s;
}
.circles-flip-delays .circle:nth-child(3) {
	transition-delay: 0.2s;
}
.circles-flip-delays .circle:nth-child(4) {
	transition-delay: 0.15s;
}
.circles-flip-delays .circle:nth-child(5) {
	transition-delay: 0.1s;
}
.circles-flip-delays .circle:nth-child(6) {
	transition-delay: 0.05s;
}
.circles-flip-delays .circle:nth-child(7) {
	transition-delay: 0s;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #17181c;
		--bgT: #17181c00;
		--fg: #e3e4e8;
		--focused: #062779;
		--focusRing: #0936aa;
		--unchecked: #5c6270;
	}
}
</style>
</head>
<body>
  <form>
	<input id="a" type="radio" name="os" value="Android" data-radio-index="0" checked>
	<label for="a">Android</label>
	<input id="b" type="radio" name="os" value="Linux" data-radio-index="1">
	<label for="b">Linux</label>
	<input id="c" type="radio" name="os" value="macOS" data-radio-index="2">
	<label for="c">macOS</label>
	<input id="d" type="radio" name="os" value="Windows" data-radio-index="3">
	<label for="d">Windows</label>
	<div class="circles">
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle circle-checked"></div>
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
</form>
      <script>
document.addEventListener("DOMContentLoaded", () => {
  let os = new RollingRadios("os");
});
class RollingRadios {
  constructor(radioName) {
    this.circles = document.querySelector(".circles");
    this.data_attr = "data-radio-index";
    this.last_focused_index = 0;
    this.radio_name = radioName;

    this.first_focused_index();
    document.addEventListener("change", this.update_last_focused_index.bind(this));
  }
  first_focused_index() {
    let radios = document.getElementsByName(this.radio_name);
    radios.forEach(r => {
      if (r.checked)
      this.update_last_focused_index(r);
    });
  }
  flip_delays(radioIndex) {
    // flip the delays depending on which index is greater
    if (this.circles) {
      let lfi = this.last_focused_index,
      flipClass = "circles-flip-delays";

      if (radioIndex > lfi)
      this.circles.classList.add(flipClass);else
      if (radioIndex < lfi)
      this.circles.classList.remove(flipClass);
    }
  }
  update_last_focused_index(e) {
    let tar = e.target || e,
    radioIndex = tar.getAttribute(this.data_attr);

    if (tar.name == this.radio_name && radioIndex) {
      this.flip_delays(radioIndex);
      this.last_focused_index = radioIndex;
    }
  }}
    </script>
</body>
</html>

4. By Abhisek Dutta

Made by Abhisek Dutta. Animated SVG Radio button using JavaScript. Source

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

<style>
div#container {
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  position:absolute;
}

svg {
  cursor:pointer;
}

rect.checked {
  fill:#48EA8B;
}
</style>
</head>
<body>
  <div id='container'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92.604 92.604" height="150" width="150" id='radio-btn'>
  <g transform="translate(0 -204.396)">
    <rect ry="15.875" y="234.823" x="12.662" height="31.75" width="67.28" fill="#ff4651" paint-order="markers fill stroke"/>
    <ellipse rx="9.028" ry="9.028" cy="250.865" cx="28.911" fill="none" stroke="#fff" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round" paint-order="markers fill stroke"/>
  </g>
</svg>
<div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(function () {
  var rect = $("svg").find("rect");
  var ellipse = $("svg").find("ellipse");
  $("svg").on('click', () => {
    rect.toggleClass("checked");
    if (rect.hasClass("checked")) {
      TweenLite.to(ellipse, 0.25, { attr: { "cx": 60.911, "rx": 1.108, "ry": 8.17 } });
    } else {
      TweenLite.to(ellipse, 0.25, { attr: { "cx": 28.911, "rx": 9.028, "ry": 9.028 } });
    }
  });
});
    </script>
</body>
</html>

5. By Gowri Prasanth V M

Made by Gowri Prasanth V M. Gooey Switch Radio Button. Source

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

<style>
body{background: #333;}

.gp-header{font-family: georgia; font-size: 40px; color: #5fd698; font-style: italic; text-align: center; margin-top: 25px;}
.gp-footer{position: fixed; color: rgba(95,214,152,0.7); bottom: 10px; left: 50%; font-family: georgia; font-style: italic; transform: translateX(-50%);}
.gp-footer .soc_icons{display: inline-block; color: #5fd698; margin: 0px 10px;}


::-moz-selection { background: transparent;}
::selection {background: transparent;}



.switchContainer{display: inline-block;filter: url("index.html#gooey");-webkit-filter: url("#gooey");position: absolute;left:50%;top:50%; cursor: pointer; transform: translate(-50%, -50%) scale(2);}
.switchBg{width:60px;height: 7px;}
.switchBtn{width: 30px;height: 30px;border-radius: 50%; display: inline-block; position: absolute; left: 0px; top: -12px; transform: translate3d(0,0,0);}

.switchBg, .switchBtn{background: #fff; transition: 300ms all ease;}
.switchContainer.switchOn .switchBtn, .switchContainer.switchOn .switchBg{background: #5fd698;}

.switchContainer.switchOn .switchBtn{animation: switchOn 250ms linear forwards; }
.switchContainer.switchOff .switchBtn{animation: switchOff 250ms linear forwards; }
@keyframes switchOn { 
  0%{transform: scale3d(1,1,1) translate3d(0px,0,0); transform-origin: left center;} 
  40%{transform: scale3d(1.4,0.7,0) translate3d(20px,0,0); transform-origin: right center;}
  70%{transform: scale3d(0.9,1.15,1) translate3d(33px,0,0); }
  100%{transform: scale3d(1,1,1) translate3d(30px,0,0); }
}
@keyframes switchOff { 
  0%{transform: scale3d(1,1,1) translate3d(30px,0,0); transform-origin: right center;} 
  40%{transform: scale3d(1.4,0.7,0) translate3d(10px,0,0); transform-origin: right center;}
  70%{transform: scale3d(0.9,1.15,1) translate3d(-3px,0,0); }
  100%{transform: scale3d(1,1,1) translate3d(0px,0,0); }
}
</style>
</head>
<body>
  <div class="switchContainer" id="switchContainer">
  <div class="switchBg"></div>
	<div class="switchBtn"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800">
  <defs>
    <filter id="gooey">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
    </filter>
  </defs>
</svg>


<div class="gp-footer">
  Follow me on : 
  <a href="facebook.com/gowriprasanthvm" class="soc_icons" target="_blank">facebook</a> /
  <a href="https://twitter.com/gowriprasanthvm" class="soc_icons" target="_blank">twitter</a>
</div>
      <script>
var container = document.querySelector("#switchContainer");

function onOffSwitch() {
  if (container.classList.contains("switchOn")) {
    container.classList.remove("switchOn");
    container.classList += " switchOff";
  } else
  {
    container.classList.remove("switchOff");
    container.classList += " switchOn";
  }
}
container.addEventListener("click", onOffSwitch, false);
    </script>
</body>
</html>

6. By Philip

Made by Philip. Smiley rating system made using Radio Buttons and Js. Source

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

  
<style>
body {
  align-items: center;
  display: flex;
  font-family: Helvetica, sans-serif;
  height: 100vh;
  justify-content: center;
  margin: 0;
}
body div {
  font-size: 15px;
  margin-top: 15px;
  text-align: center;
}

form#smileys input[type=radio] {
  -webkit-appearance: none;
  width: 90px;
  height: 90px;
  border: none;
  cursor: pointer;
  transition: border 0.2s ease;
  filter: grayscale(100%);
  margin: 0 5px;
  transition: all 0.2s ease;
}
form#smileys input[type=radio]:hover, form#smileys input[type=radio]:checked {
  filter: grayscale(0);
}
form#smileys input[type=radio]:focus {
  outline: 0;
}
form#smileys input[type=radio].happy {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/happy_ampvnc.svg") center;
  background-size: cover;
}
form#smileys input[type=radio].neutral {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/neutral_t3q8hz.svg") center;
  background-size: cover;
}
form#smileys input[type=radio].sad {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/sad_bj1tuj.svg") center;
  background-size: cover;
}

.mtt {
  position: fixed;
  bottom: 10px;
  right: 20px;
  color: #999;
  text-decoration: none;
}
.mtt span {
  color: #e74c3c;
}
.mtt:hover {
  color: #666;
}
.mtt:hover span {
  color: #c0392b;
}
</style>
</head>
<body>
  <form id="smileys">
	<input type="radio" name="smiley" value="sad" class="sad">
	<input type="radio" name="smiley" value="neutral" class="neutral">
	<input type="radio" name="smiley" value="happy" class="happy" checked="checked">
	<div>It looks like you're feeling <span id="result">happy</span> today..</div>
</form>

<a class="mtt" href="https://morningtrain.dk" target="_blank">
	With <span>โ™ฅ</span> from Morning Train
</a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script>
// Very simple JS for updating the text when a radio button is clicked
const INPUTS = document.querySelectorAll('#smileys input');
const updateValue = e => document.querySelector('#result').innerHTML = e.target.value;

INPUTS.forEach(el => el.addEventListener('click', e => updateValue(e)));

    </script>
</body>
</html>

7. By larafale

Made by larafale. Two choices radio buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='https://daneden.github.io/animate.css/animate.min.css'>
  
<style>
body {
  background-color: #222d3b;
  font-family: 'Raleway', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 100px;
  text-align: center;
}
.transition {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#switch {
  font-size: 0;
  background-color: #2a3a47;
  display: inline-block;
  color: #82909b;
  padding: 4px;
  vertical-align: middle;
}
#switch .choice {
  font-size: 16px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 8px;
  display: inline-block;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  vertical-align: middle;
}
#switch .choice.on {
  color: #fff;
  background-color: #222d3b;
}
#switch .or {
  font-size: 10px;
  color: #fff;
  position: absolute;
  margin-top: 19px;
  margin-left: 108px;
  z-index: 1;
}
#switch .diamond {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: 19px;
  margin-left: 116px;
  background: #2a3a47;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
</style>
</head>
<body>
  <div id="switch">
  <!--.or.animated OR-->
  <div class="diamond"></div>
  <div class="choice on">PAY</div>
  <div class="choice">CHARGE</div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var choices = $('#switch .choice'),
text = $('#switch .or');

choices.
on('click', function () {
  choices.toggleClass('on');

  text.addClass('flip');
  setTimeout(function () {
    text.removeClass('flip');
  }, 1000);
});
    </script>
</body>
</html>

8. By Akshat

Made by Akshat. Simple Radio Buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
</head>
<body>
  <style>
@import url('https://fonts.googleapis.com/css?family=Karla:400,700');
body {
  background-color: #ffa0b4;
  font-family: 'Karla', sans-serif;
}
.main {
  display: block;
  position: absolute;
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list-item {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
   supported by Chrome and Opera */
  display: inline-block;
  position: relative;
  min-width: 90px;
  min-height: 35px;
  padding-top: 5px;
  box-sizing: border-box;
  font-size: 24px;
  margin: 25px 10px;
  opacity: 0.75;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}
.list-item:hover {
  opacity: 0.9;
}
.title {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
   supported by Chrome and Opera */
  position: absolute;
  height: 20px;
  left: 50%;
  margin-left: 5px;
  transform: translateX(-50%);
  top: 40px;
  z-index: 100;
  text-transform: uppercase;
  font-weight: 800;
  overflow: hidden;
  color: #ff4d78;
  font-size: 20px;
  transition: color 0.6s ease-in-out 0.2s;
}
.title #title-1 {
  position: absolute;
  color: white;
}
.indicator-circle {
  display: block;
  position: absolute;
  background-color: #ffa0b4;
  overflow: hidden;
  width: 30px;
  height: 30px;
  left: 25%;
  top: 35px;
  box-sizing: border-box;
  border: solid #ff4d78 4px;
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out;
}
.indicator-circle .circ-fill {
  position: absolute;
  background: #ff4d78;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 30px;
  left: -2px;
}
.ind-circ-off {
  transition: background-color 0.2s ease-in-out 0.2s;
  background-color: #ff4d78;
}
.indicator {
  display: block;
  position: absolute;
  background-color: #ff4d78;
  margin: auto;
  box-sizing: border-box;
  overflow: hidden;
  left: 60%;
  z-index: 30;
  transform: translatex(-50%);
  height: 60px;
  width: 190px;
  top: -60px;
  border-radius: 5px;
  transition: box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out 0.2s, border-radius 0.4s ease-in-out;
}
.reset-top {
  top: -60px !important;
}
.on {
  border-radius: 50px;
  background-color: #ff4d78;
  -webkit-box-shadow: 2px 5px 20px 0px rgba(255, 77, 120, 0.75);
  -moz-box-shadow: 2px 5px 20px 0px rgba(255, 77, 120, 0.75);
  box-shadow: 2px 5px 20px 0px rgba(255, 77, 120, 0.75);
}
.reset {
  display: block;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
  color: #ff4d78;
  cursor: pointer;
}
.id-selector {
  position: absolute;
  top: 51px;
}
.id-list-item {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
   supported by Chrome and Opera */
  display: inline-block;
  position: relative;
  min-width: 90px;
  min-height: 35px;
  box-sizing: border-box;
  font-size: 24px;
  margin: 8px 10px;
  margin-left: 30px;
  color: white;
  cursor: pointer;
}

</style>

<div class="main">
	<div class="title">
		<div id="title-1">Select Role</div>
		<div id="title-2">Select Role</div>
	</div>
	<div class="reset">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
	</div>
	<div class="indicator-circle"><div class="circ-fill"></div></div>
	<div class="list">
		<div class="indicator">
			<div class="id-selector">
				<!--<div class="id-list-item">Other</div><br>
<div class="id-list-item">Manager</div><br>
<div class="id-list-item">Developer</div><br>
<div class="id-list-item">Intern</div><br>-->
				<div class="id-list-item">Intern</div><br>
				<div class="id-list-item">Developer</div><br>
				<div class="id-list-item">Manager</div><br>
				<div class="id-list-item">Other</div><br>
			</div>
		</div>
		<div class="list-item">Intern</div><br>
		<div class="list-item">Developer</div><br>
		<div class="list-item">Manager</div><br>
		<div class="list-item">Other</div><br>
	</div>
</div>
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://codepen.io/juliangarnier/pen/REyzrR/75efae7724dbc3c055e918057fc4aca5.js'></script>
      <script>
var distance_li = -1;
var distance_id = -1;
var id_default = 8;
var li_default = 15;
var current = -1;

$(document).ready(function () {
  distance_li = $(".list-item").eq(1).offset().top - $(".list-item").eq(0).offset().top;
  distance_id = $(".id-list-item").eq(0).offset().top - $(".id-list-item").eq(1).offset().top;
  //distance_id = $(".id-list-item").eq(1).offset().top - $(".id-list-item").eq(0).offset().top;
});

$(".reset").click(function () {
  moveIndicator('-60px');
  moveIdItems(51);
  moveIndicatorCirc(35);
  moveTitle(0);
  moveCircFill('30px');
  $(".title").removeClass("title-on");
  $(".indicator-circle").removeClass("ind-circ-off");
  $(".indicator").removeClass("on");
  current = -1;
});

$(".list-item").click(function () {
  if (current == -1) {
    $(".indicator-circle").addClass("ind-circ-off");
    $(".title").addClass("title-on");
    $(".indicator").addClass("on");
    moveTitle(20);
    moveCircFill(0);
  }
  if (current != getIndex($(this).index())) {
    current = getIndex($(this).index());
    moveIndicator(calcTopList(current));
    moveIndicatorCirc(calcTopCirc(current));
    moveIdItems(calcTopId(current));
  }
});

function moveTitle(t) {
  anime({
    targets: '#title-1',
    top: t,
    duration: 200,
    easing: 'easeInOutSine' });

}

function moveCircFill(t) {
  anime({
    targets: '.circ-fill',
    top: t,
    duration: 400,
    easing: 'easeInOutSine' });

}

function moveIdItems(t, d = 800) {
  anime({
    targets: '.id-selector',
    top: t,
    duration: d,
    easing: 'spring(0.5, 80, 12, 0)' });

}

function moveIndicatorCirc(t, d = 800) {
  anime({
    targets: '.indicator-circle',
    top: t,
    duration: d,
    easing: 'spring(1, 80, 12, 0)'
    //cubicBezier(.5,0,.17,1.03)
  });
}

function moveIndicator(t, d = 800) {
  anime({
    targets: '.indicator',
    top: t,
    duration: d,
    easing: 'spring(1, 80, 12, 0)'
    //cubicBezier(.5,0,.17,1.03)
  });
}

function calcTopCirc(i) {
  if (i == 0) {
    return 108;
  } else
  {
    return distance_li * i + 108;
  }
}

function calcTopList(i) {
  if (i == 0) {
    return li_default;
  } else
  {
    return distance_li * i + li_default;
  }
}

function calcTopId(i) {
  if (i == 0) {
    return id_default;
  } else
  {
    return distance_id * i + id_default;
  }
}

function getIndex(i) {
  return i = (i + 1) / 2 - 1;
}
    </script>
</body>
</html>