iOS7 Switches

June 12th, 2013

I really liked what Apple did to some of their UI elements in the new iOS7. Specifically their switches. On tap it does the usual move to the left. But when dragged they become a little stretched. It's a neat effect.

So I decided to build the switches in CSS:





The CSS behind it is (obviously) pretty simple.

          
            .switch {
                border: 1px solid #e0e0e0;
                border-radius: 48px;
                display: inline-block;
                width: 50px;
                position: relative;
                height: 25px;
                cursor: pointer;
                transition: all .2s ease-in-out;
            }
            .switch .handle {
                border-radius: 50%;
                width: 25px;
                height: 25px;
                background: #fff;
                position: absolute;
                box-shadow: 0px 2px 4px rgba(0,0,0,.2);
                transition: all .2s ease-in-out;
            }
            .switch.on {
                background: #4cd864;
                border-color: #4cd864;
            }
            .switch:active .handle {
                width: 40px;
                border-radius: 24px;
            }
            .switch.on .handle {
                right: 0;
            }
          
        

The JS powering the click is, for this demo, jQuery dependent. Easily adapted to your codebase.

          
          $(document).ready(function(){
            $(".switch").click(function(){
              $(this).toggleClass("on");
            })
          })
          
        

Turning this into a JS widget to change/style radio buttons will be trivial.