index.html

<form action="">
  <input type="radio" name="rdo" id="yes" checked />
  <input type="radio" name="rdo" id="no"/>
  <div class="switch">
    <label for="yes">Yes</label>
    <label for="no">No</label>
    <span></span>
  </div>
</form>

Radio-Button.markdown

Radio Button

A Pen by Andreas Storm on CodePen.

License.

style.stylus

green = #4cd964
red = #ff3b30

body
  font-family sans-serif
  font-weight 800

.switch
  position absolute
  top 50%
  left 50%
  width 150px
  height 50px
  text-align center
  margin -30px 0 0 -75px
  background green
  transition all 0.2s ease
  border-radius 25px
  span
    position absolute
    width 20px
    height 4px
    top 50%
    left 50%
    margin -2px 0px 0px -4px
    background white
    display block
    transform rotate(-45deg)
    transition all 0.2s ease
    &:after
      content ""
      display block
      position absolute
      width 4px
      height 12px
      margin-top -8px
      background white
      transition all 0.2s ease

input[type=radio]
  display none

.switch label
  cursor pointer
  color rgba(#000, .2)
  width 60px
  line-height 50px
  transition all 0.2s ease

label[for=yes]
  position absolute
  left 0px
  height 20px

label[for=no]
  position absolute
  right 0px

#no:checked ~ .switch
    background red

#no:checked ~ .switch span
    background white
    margin-left -8px
    &:after
      background white
      height 20px
      margin-top -8px
      margin-left 8px

#yes:checked ~ .switch label[for=yes]
  color white

#no:checked ~ .switch label[for=no]
  color white