<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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css

External JavaScript

This Pen doesn't use any external JavaScript resources.