CSS3 toggle buttons

css3-toggle-buttons.markdown

CSS3 toggle buttons

CSS3 toggle buttons that could be plugged into radio buttons. Using Bootstrap Glyphicons but if your font of choice has symbols can include them instead

A Pen by Michael Watts on CodePen.

License.

index.haml

.icon.col-sm-4
  .handle
    .glyphicon.glyphicon-headphones
.icon.red.col-sm-4
  .handle
    .glyphicon.glyphicon-hdd
.icon.green.col-sm-4
  .handle
    .glyphicon.glyphicon-tree-deciduous

script.coffeescript

$ ->
  $('.icon').on 'click', ->
    if $(this).hasClass 'on'
      $(this).removeClass 'on'
    else
      $(this).addClass 'on'

scripts

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

style.scss

@import "compass/css3";

.col-sm-4 {margin-top: 5em}
.icon {
  position: relative;
  left: 100px;
  border-radius: 70px;
  background-color: #EFF4FF;
  box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.5),inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  width: 258px;
  height: 117px;
  margin-right: 80px;
  overflow: hidden;
  -webkit-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -o-transition: all .25s linear;
  transition: all .25s linear;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .handle {
    width: 107px;
    height: 107px;
    border-radius: 70px;
    position: absolute;
    top: 5px;
    background: #FFF;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2),0px 4px 23px 0 rgba(0, 0, 0, 0.08),-2px 4px 4px 0 rgba(0, 0, 0, 0.1);
    font-size: 20px;
    line-height: 22px;
    color: #6D808E;
    text-decoration: none;
    font-size: 44px;
    color: #D8DAD9;
    line-height: 107px;
    text-align: center;
    left: 5px;
    -webkit-transition: all .4s cubic-bezier(0.33,1.6,0.66,1);
    -moz-transition: all .4s cubic-bezier(0.33,1.6,0.66,1);
    -o-transition: all .4s cubic-bezier(0.33,1.6,0.66,1);
    transition: all .4s cubic-bezier(0.33,1.6,0.66,1);
    &:before {
      // content: "\F061"; // a font icon could go her
      -webkit-font-smoothing: antialiased;
    }
    &:after {
      content: "ON";
      font-size: 58px;
      font-weight: 400;
      color: #FFF;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      position: absolute;
      left: -110px;
    }
  }
  &.on {
    background: #FFA400;
    .handle {
      left: 145px;
      color: #FFA400;
    }
    &.red {
      background: #FF3333;
      .handle {
        color: #FF3333;
      }
    }
    &.green {
      background: #B1CA39;
      .handle {
        color: #B1CA39;
      }
    }
  }
}

styles

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet" />