<div class="cntr">
<label for="opt1" class="radio">
<input type="radio" name="rdo" id="opt1" class="hidden"/>
<span class="label"></span>Adobe
</label>
<label for="opt2" class="radio">
<input type="radio" name="rdo" id="opt2" class="hidden"/>
<span class="label"></span>Figma
</label>
<label for="opt3" class="radio">
<input type="radio" name="rdo" id="opt3" class="hidden"/>
<span class="label"></span>InVision
</label>
<label for="opt4" class="radio">
<input type="radio" name="rdo" id="opt4" class="hidden"/>
<span class="label"></span>Sketch
</label>
</div>
<!-- dribbble -->
<a class="credit" href="https://dribbble.com/shots/4647673-Material-Design-Radio-Buttons" target="_blank"><img src="https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png" alt=""></a>
$primary = #225CFF
$gray = #C8CCD4
body
font-family: "Roboto", sans-serif
.radio
position: relative
cursor: pointer
line-height: 20px
font-size: 14px
margin: 15px
.label
position: relative
display: block
float: left
margin-right: 10px
width: 20px
height: 20px
border: 2px solid $gray
border-radius: 100%
-webkit-tap-highlight-color: transparent
&:after
content: ''
position: absolute
top 3px
left 3px
width 10px
height 10px
border-radius 100%
background $primary
transform scale(0)
transition all .2s ease
opacity .08
pointer-events: none
&:hover
.label:after
transform scale(3.6)
input[type="radio"]:checked + .label
border-color $primary
&:after
transform scale(1)
transition all .2s cubic-bezier(.35,.9,.4,.9)
opacity 1
.cntr
position absolute
top calc(50% - 10px)
left 0
width 100%
text-align center
.hidden
display none
//dribbble
.credit
position: fixed
right: 20px
bottom: 20px
transition: all .2s ease
-webkit-user-select: none
user-select: none
opacity: .6
img
width: 72px
&:hover
transform: scale(.95)
View Compiled
This Pen doesn't use any external JavaScript resources.