Create ON-OFF Toggle Switch Button with HTML and CSS..

Toggle switch or On OFF Switch is beneficial in updating preferences, settings and different type of information. It is more specifically used when the user decides between two opposing situations.

In this lesson you will learn to create a toggle switch using simple and minimal HTML and CSS code.

Foremostly, create a design layout, for this example, a rounded switch layout will be designed. A single section is created which includes input type, and span.

CSS Structure

The base for the switch is designed where the user-select property is assigned with value none to prevent the selection of text on double-clicking it. In order to control the display of the default callout shown when somebody touches or holds the touch target, WebKit-touch-callout is given a value none. Using before and after selector OFF and ON sections are designed. Use the below code to make your site interactive.

body{
    background-color: #faebd7;
}
.aione-checkbox{
    margin: 0 auto;
    width: 38%;
    position: relative;
    top: 33%;
}
.custom-radio{
    display:none;
}
.switch {
    background: #e74c3c;
    position: relative;
    top: 100px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    left: 100px;
    border-radius: 70px;
    font-family:"Helvetica Neue",Helvetica,"Myriad Pro","Lucida Grande",sans-serif;
    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;
    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;
    }
.switch .handle {
    width: 107px;
    height: 107px;
    border-radius: 70px;
    position: absolute;
    top: 5px;
    background: white;
    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;
    transition: all .4s cubic-bezier(0.33,1.6,0.66,1);
}
.switch .handle:before {
    content: "OFF";
    font-size: 58px;
    font-weight: 400;
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
    position: absolute;
    left: 125px;
}
.switch .handle:after {
    content: "ON";
    font-size: 58px;
    font-weight: 400;
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
    position: absolute;
    left: -110px;
}
#custom_radio:checked + .switch {
    background: #a0ce4e;
}
#custom_radio:checked + .switch .handle {
    left: 145px;
}

The end result of applying the specified HTML and CSS code is here.

ON-OFF Toggle Switch Button

Leave a Reply Cancel reply