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>