Skip to content

Instantly share code, notes, and snippets.

/Pure-CSS-toggle-buttons.markdown

Created April 30, 2015 18:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/f6b12842f9dc9ba4472a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/f6b12842f9dc9ba4472a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Apr 30, 2015.
    7 changes: 7 additions & 0 deletions Pure-CSS-toggle-buttons.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Pure CSS toggle buttons
    -----------------------


    A [Pen](http://codepen.io/mallendeo/pen/eLIiG) by [Mauricio Allende](http://codepen.io/mallendeo) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/mallendeo/pen/eLIiG/license).
    22 changes: 22 additions & 0 deletions index.haml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    %h2 Toggle it!
    %ul.tg-list
    %li.tg-list-item
    %h4 Light
    %input#cb1.tgl.tgl-light{type: "checkbox"}/
    %label.tgl-btn{for: "cb1"}
    %li.tg-list-item
    %h4 iOS 7
    %input#cb2.tgl.tgl-ios{type: "checkbox"}/
    %label.tgl-btn{for: "cb2"}
    %li.tg-list-item
    %h4 Skewed
    %input#cb3.tgl.tgl-skewed{type: "checkbox"}/
    %label.tgl-btn{"data-tg-off" => "OFF", "data-tg-on" => "ON", for: "cb3"}
    %li.tg-list-item
    %h4 Flat
    %input#cb4.tgl.tgl-flat{type: "checkbox"}/
    %label.tgl-btn{for: "cb4"}
    %li.tg-list-item
    %h4 Flip
    %input#cb5.tgl.tgl-flip{type: "checkbox"}/
    %label.tgl-btn{"data-tg-off" => "Nope", "data-tg-on" => "Yeah!", for: "cb5"}
    3 changes: 3 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    /** Toggle buttons
    * @mallendeo
    */
    260 changes: 260 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,260 @@

    html, body {
    display: flex;
    min-height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: sans-serif;
    }
    ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .tg-list{
    text-align: center;
    display: flex;
    align-items: center;
    }
    .tg-list-item{
    margin: 0 2em;
    }
    h2{
    color: #777;
    }
    h4{
    color: #999;
    }
    .tgl{
    display: none;
    // add default box-sizing for this scope
    &, &:after, &:before,
    & *, & *:after, & *:before,
    & + .tgl-btn{
    box-sizing: border-box;
    &::selection{
    background: none;
    }
    }
    + .tgl-btn{
    outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    position: relative;
    cursor: pointer;
    user-select: none;
    &:after, &:before{
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    }
    &:after{
    left: 0;
    }
    &:before{
    display: none;
    }
    }
    &:checked{
    + .tgl-btn{
    &:after{
    left: 50%;
    }
    }
    }
    }

    // themes
    .tgl-light{
    + .tgl-btn{
    background: #f0f0f0;
    border-radius: 2em;
    padding: 2px;
    transition: all .4s ease;
    &:after{
    border-radius: 50%;
    background: #fff;
    transition: all .2s ease;
    }
    }
    &:checked{
    + .tgl-btn{
    background: #9FD6AE;
    }
    }
    }
    .tgl-ios{
    + .tgl-btn{
    background: #fbfbfb;
    border-radius: 2em;
    padding: 2px;
    transition: all .4s ease;
    border: 1px solid #e8eae9;
    &:after{
    border-radius: 2em;
    background: #fbfbfb;
    transition:
    left .3s cubic-bezier(
    0.175, 0.885, 0.320, 1.275
    ),
    padding .3s ease, margin .3s ease;
    box-shadow:
    0 0 0 1px rgba(0,0,0,.1),
    0 4px 0 rgba(0,0,0,.08);
    }
    &:active{
    box-shadow: inset 0 0 0 2em #e8eae9;
    &:after{
    padding-right: .8em;
    }
    }
    }
    &:checked{
    + .tgl-btn{
    background: #86d993;
    &:active{
    box-shadow: none;
    &:after{
    margin-left: -.8em;
    }
    }
    }
    }
    }
    .tgl-skewed{
    + .tgl-btn{
    overflow: hidden;
    transform: skew(-10deg);
    backface-visibility: hidden;
    transition: all .2s ease;
    font-family: sans-serif;
    background: #888;
    &:after, &:before{
    transform: skew(10deg);
    display: inline-block;
    transition: all .2s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 2em;
    font-weight: bold;
    color: #fff;

    text-shadow: 0 1px 0 rgba(0,0,0,.4);
    }
    &:after{
    left: 100%;
    content: attr(data-tg-on);
    }
    &:before{
    left: 0;
    content: attr(data-tg-off);
    }
    &:active{
    background: #888;
    &:before{
    left: -10%;
    }
    }
    }
    &:checked{
    + .tgl-btn{
    background: #86d993;
    &:before{
    left: -100%;
    }
    &:after{
    left: 0;
    }
    &:active{
    &:after{
    left: 10%;
    }
    }
    }
    }
    }
    .tgl-flat{
    + .tgl-btn{
    padding: 2px;
    transition: all .2s ease;
    background: #fff;
    border: 4px solid #f2f2f2;
    border-radius: 2em;
    &:after{
    transition: all .2s ease;
    background: #f2f2f2;
    content: "";
    border-radius: 1em;
    }
    }
    &:checked{
    + .tgl-btn{
    border: 4px solid #7FC6A6;
    &:after{
    left: 50%;
    background: #7FC6A6;
    }
    }
    }
    }

    .tgl-flip{
    + .tgl-btn{
    padding: 2px;
    transition: all .2s ease;
    font-family: sans-serif;
    perspective: 100px;
    &:after, &:before{
    display: inline-block;
    transition: all .4s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 2em;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    border-radius: 4px;
    }
    &:after{
    content: attr(data-tg-on);
    background: #02C66F;
    transform: rotateY(-180deg);
    }
    &:before{
    background: #FF3A19;
    content: attr(data-tg-off);
    }

    &:active{
    &:before{
    transform: rotateY(-20deg);
    }
    }
    }
    &:checked{
    + .tgl-btn{
    &:before{
    transform: rotateY(180deg);
    }
    &:after{
    transform: rotateY(0);
    left: 0;
    background: #7FC6A6;
    }
    &:active{
    &:after{
    transform: rotateY(20deg);
    }
    }
    }
    }
    }