<div class="container">
<div class="container__elements">
<div class="radio__card">
<h2>Choose Your Side</h2>
<div class="radio__card-options">
<div class="radio__card-options-item">
<div class="circle circle__active"></div>
<h5 class="radio__card-options-item-header">Dark</h5>
</div>
<div class="radio__card-options-item">
<div class="circle circle__inactive"></div>
<h5 class="radio__card-options-item-header">Light</h5>
</div>
</div>
<h5 class="credits">Made by Braydon Coyer</h5>
</div>
</div>
<!-- Social Connections -->
<div class="social-icons">
<a class="social-icon social-icon--codepen" href="https://codepen.io/braydoncoyer" target="_blank">
<i class="fa fa-codepen"></i>
<div class="tooltip">Codepen</div>
</a>
<a class="social-icon social-icon--twitter" href="https://twitter.com/BraydonCoyer" target="_blank">
<i class="fa fa-twitter"></i>
<div class="tooltip">Twitter</div>
</a>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Ubuntu:500&display=swap');
$background: #FF8A9F;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
background: $background;
}
.radio__card {
position: relative;
background-color: white;
width: 350px;
height: 200px;
border-radius: 20px;
padding: 30px;
color: #554548;
&-options {
margin-top: 20px;
&-item {
display: flex;
align-items: center;
margin-bottom: 25px;
&-header {
margin-left: 25px;
}
}
}
}
.credits {
color: #EBE9E9;
position: absolute;
right: 25px;
bottom: 23px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #FFE8EC;
&__active {
background-color: $background;
z-index: 1;
}
&__inactive {
cursor: pointer;
}
}
/* --------Social Icons-------- */
/* Color Variables */
$color-codepen: #000;
$color-twitter: #2b97f1;
/* Social Icon Mixin */
@mixin social-icon($color) {
background: $color;
color: #fff;
.tooltip {
background: $color;
color: currentColor;
&:after {
border-top-color: $color;
}
}
}
.social-icons {
display: flex;
position: absolute;
bottom: 25px;
right: 25px;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px;
height: 40px;
margin: 0 0.7rem;
border-radius: 50%;
cursor: pointer;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 1.5rem;
text-decoration: none;
transition: all 0.15s ease;
&:hover {
color: #fff;
.tooltip {
visibility: visible;
opacity: 1;
transform: translate(-50%, -150%);
}
}
&:active {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
}
&--twitter { @include social-icon($color-twitter); }
&--codepen { @include social-icon($color-codepen); }
i {
position: relative;
top: 1px;
}
}
/* Tooltips */
.tooltip {
display: block;
position: absolute;
top: 0;
left: 50%;
padding: 0.4rem 0.6rem;
border-radius: 40px;
font-size: 0.4rem;
font-weight: bold;
opacity: 0;
pointer-events: none;
text-transform: uppercase;
transform: translate(-50%, -100%);
transition: all 0.3s ease;
z-index: 1;
&:after {
display: block;
position: absolute;
bottom: 1px;
left: 50%;
width: 0;
height: 0;
content: "";
border: solid;
border-width: 10px 10px 0 10px;
border-color: transparent;
transform: translate(-50%, 100%);
}
}
View Compiled
// Designed by Oleg Frolov
// https://dribbble.com/shots/4917998-Radio-buttons-interaction
const STATE = {
SELECTED: true
};
const duration = 0.8;
const ease = "back.inOut(3)";
const flip = new gsap.timeline({
paused: true,
onComplete: () => (STATE.SELECTED = !STATE.SELECTED),
onReverseComplete: () => (STATE.SELECTED = !STATE.SELECTED)
})
.add(gsap.to(".circle__active", { duration, ease, y: 50 }))
.add(gsap.to(".circle__inactive", { duration, ease, y: -50 }), 0);
const itemClicked = () => {
if (STATE.SELECTED) flip.play();
else flip.reverse();
};
const CARD = document.querySelector(".circle__inactive");
CARD.addEventListener("click", itemClicked);
This Pen doesn't use any external CSS resources.