Button switch

Button-switch.markdown

Button switch

Bootstrap button toggle switch

A Pen by Geedmo on CodePen.

License.

index.jade

- var brands = ['primary','success','info','warning','danger']
- each brand in brands
  .btn-switch(class="btn-switch-#{brand}")
    input(type='checkbox', id='input-btn-switch-#{brand}')
    label.btn.btn-round(for='input-btn-switch-#{brand}', class="btn-#{brand}")
      em.glyphicon.glyphicon-ok
      strong  CLICK ME

style.less

@brand-primary: #428bca;
@brand-success: #26ae90;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;

body {
  text-align: center;
  margin: 50px;
}

.btn-round {
  border-radius: 40px;
}

.btn-switch {
  position: relative;
  display: inline-block;
  cursor: pointer;

  /* @only demo */
    margin: 10px;
  
  > input[type="checkbox"]  {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    cursor:pointer;
    left:-100%;
    top:-100%;
    
    + .btn {
      background-color: transparent;
      border-color: @brand-danger;
      color: @brand-danger;
      > em {
        display: inline-block;
        border: 1px solid @brand-danger;
        border-radius: 50%;
        padding: 2px;
        margin: 0 4px 0 0;
        top: 0;
        font-size: 10px;
        text-align: center;        
        &:before {
          opacity: 0;
        }
      }
    }
    &:checked + .btn {
      background-color: @brand-danger;
      color: #fff;
      > em {
        background-color: #fff;
        color: @brand-danger;
        &:before {
          opacity: 1;
        }
      }
    }
  }
}


.btn-switch-primary {
  .btn-switch-variant(@brand-primary);
}
.btn-switch-success {
  .btn-switch-variant(@brand-success);
}
.btn-switch-info {
  .btn-switch-variant(@brand-info);
}
.btn-switch-warning {
  .btn-switch-variant(@brand-warning);
}
.btn-switch-danger {
  .btn-switch-variant(@brand-danger);
}

.btn-switch-variant(@color) {

  & > input[type="checkbox"]  {
    
    + .btn {
      border-color: @color;
      color: @color;
      > em {
        border-color: @color;    
      }
    }
    &:checked + .btn {
      background-color: @color;
      > em {
        color: @color;
      }
    }
  }

}