Radio & Checkbox

index.html

%form
  .frame
    %input#radio_1{:type=>'radio',:name=>'radio',:checked=>'checked'}
    %label.radio{:for=>'radio_1'} <i class="fa fa-times"></i>
    %input#radio_2{:type=>'radio',:name=>'radio'}
    %label.radio{:for=>'radio_2'} <i class="fa fa-times"></i>
    %input#radio_3{:type=>'radio',:name=>'radio'}
    %label.radio{:for=>'radio_3'} <i class="fa fa-times"></i>
    %input#radio_4{:type=>'radio',:name=>'radio'}
    %label.radio{:for=>'radio_4'} <i class="fa fa-times"></i>
    %input#radio_5{:type=>'radio',:name=>'radio'}
    %label.radio{:for=>'radio_5'} <i class="fa fa-times"></i>
  .frame
    %input#check_1{:type=>'checkbox',:name=>'check',:checked=>'checked'}
    %label.check{:for=>'check_1'} <i class="fa fa-check"></i>
    %input#check_2{:type=>'checkbox',:name=>'check'}
    %label.check{:for=>'check_2'} <i class="fa fa-check"></i>
    %input#check_3{:type=>'checkbox',:name=>'check'}
    %label.check{:for=>'check_3'} <i class="fa fa-check"></i>
    %input#check_4{:type=>'checkbox',:name=>'check'}
    %label.check{:for=>'check_4'} <i class="fa fa-check"></i>
    %input#check_5{:type=>'checkbox',:name=>'check'}
    %label.check{:for=>'check_5'} <i class="fa fa-check"></i>

Radio & Checkbox.markdown

Radio & Checkbox

Forked from White Wolf Wizard's Pen Radio & Checkbox.

A Pen by Jordan Halvorsen on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

$accent: #369; $speed: .3s; $ease: ease-in-out;

form {
  width: 100vw; height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  .frame {
    display: flex;
    flex-flow: row nowrap;
    input { display: none; }
    label {
      cursor: pointer;
      position: relative;
      width: 30px; height: 30px;
      margin: 10px;
      background: $accent;
      transition: all $speed $ease;
      font-size: 12pt;
      color: #FFF;
      font-smoothing: antialiased;
      &.radio { border-radius: 100%; }
      &.check { border-radius: 5px; }
      .fa {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        opacity: 0;
        transform: scale(0);
        transition: all $speed $ease;
        line-height: 30px;
        text-align: center;
      }
    }
    input:checked + label { background: shade($accent,15%);
      .fa { opacity: 1; transform: scale(1); }
    }
  }
}