iOS Style Animated Checkbox using CSS3

As you know that mobile revolution has been started,so its time to build mobile Web application for your project.This post will help you to build iOS style animated checkbox using CSS3 and HTML.I love CSS :before and :after pseudo-elements, this helps you to minimize the HTML code.

iOS style checkbox using css3

iOS style checkbox using css3

Note: For Better result use Chrome,Firefox,Opera and safari browsers.

View Demo Download

Create an Checkbox

Let’s create it.

HTML Code

<label class="csscheckbox COLOR-COMBINATION"><input type="checkbox" checked="checked"><span></span></label>

Replace the COLOR-COMBINATION to any of these classes.

  • csscheckbox-default
  • csscheckbox-warning
  • csscheckbox-danger
  • csscheckbox-info
  • csscheckbox-success
  • csscheckbox-primary

CSS Checkbox Container

.csscheckbox{
        margin:1px 4px;
        padding:7px 0;
        position:relative;
        cursor:pointer;
        display:inline-block;
        vertical-align:middle
    }

Hiding the Checkbox

Hide the checkbox by changing the opacity to 0.

    .csscheckbox input{
        position:absolute;
        opacity:0
    }

Styling the checkbox

You can change the width and height according to your need.
changing the border radius

    .csscheckbox span{
        position:relative;
        display:inline-block;
        width:100px; //Change the width
        height:100px; //Change the height
        border-radius:50%;//IE 11
        -moz-border-radius:50%; //Mozilla
        -webkit-border-radius:50%; //Chrome and Safari
        background:rgba(250,250,250,.25);
        border:1px solid #dae0e8
    }
    .csscheckbox span:hover{
        background:rgba(250,250,250,.75); //Changing background color on hover
    }

Checkbox after

after: is pseudo element,insert style/content after DOM.

    .csscheckbox span:after{
        content:"";
        position:absolute;
        top:3px;
        right:3px;
        bottom:3px;
        left:3px;
        border-radius:50%;
        background-color:#fff;
        opacity:0;
        -webkit-transition:all .15s ease-out; //Adding Trasition Effect
        transition:all .15s ease-out; //Adding Trasition Effect
        -webkit-transform:scale(.5); //Adding Transformation Effect
        transform:scale(.5) //Adding Transformation Effect
        -webkit-box-shadow: 0 2px 5px #999999; //Adding Box Shadow
        box-shadow: 0px 1px 5px #999999; //Adding Box Shadow
    }

Check the box

Changing background color and adding the effect.
Changing the color

    .csscheckbox input:checked+span:after{
        opacity:1;
        -webkit-transform:scale(1);
        transform:scale(1);
        background-color:#eee
    }

Final CSS

    .csscheckbox{
        margin:1px 4px;
        padding:7px 0;
        position:relative;
        cursor:pointer;
        display:inline-block;
        vertical-align:middle
    }
    .csscheckbox input{
        position:absolute;
        opacity:0
    }
    .csscheckbox span{
        position:relative;
        display:inline-block;
        width:100px;height:100px;
        border-radius:50%;//IE 11
        -moz-border-radius:50%; //Mozilla
        -webkit-border-radius:50%; //Chrome and Safari
        background:rgba(250,250,250,.25);
        border:1px solid #dae0e8
    }
    .csscheckbox span:hover{background:rgba(250,250,250,.75)}
    .csscheckbox span:after{
        content:"";
        position:absolute;
        top:3px;
        right:3px;
        bottom:3px;
        left:3px;
        border-radius:50%;
        background-color:#fff;
        opacity:0;
        -webkit-transition:all .15s ease-out;
        transition:all .15s ease-out;
        -webkit-transform:scale(.5);
        transform:scale(.5)
        -webkit-box-shadow: 0 2px 5px #999999;
        box-shadow: 0px 1px 5px #999999;
    }
    .csscheckbox input:checked+span:after{
        opacity:1;
        -webkit-transform:scale(1);
        transform:scale(1);
        background-color:#eee
    }
//Different Color Combinations
    .csscheckbox-default input:checked+span:after{background-color:#dae0e8}
    .csscheckbox-warning input:checked+span:after{background-color:#deb25c}
    .csscheckbox-danger input:checked+span:after{background-color:#de815c}
    .csscheckbox-info input:checked+span:after{background-color:#5cafde}
    .csscheckbox-success input:checked+span:after{background-color:#afde5c}
    .csscheckbox-primary input:checked+span:after{background-color:#5ccdde}

Final HTML

Here is the full html code with all the color combinations.

    <label class="csscheckbox csscheckbox-default"><input type="checkbox" checked="checked"><span></span></label>
    <label class="csscheckbox csscheckbox-warning"><input type="checkbox" checked="checked"><span></span></label>
    <label class="csscheckbox csscheckbox-danger"><input type="checkbox" checked="checked"><span></span></label>
    <label class="csscheckbox csscheckbox-info"><input type="checkbox" checked="checked"><span></span></label>
    <label class="csscheckbox csscheckbox-success"><input type="checkbox" checked="checked"><span></span></label>
    <label class="csscheckbox csscheckbox-primary"><input type="checkbox" checked="checked"><span></span></label>

View Demo Download

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

2 Responses

  1. Sachin says:

    Nice one.I really liked it.I will try to implement it into by backend.
    keep it up.

Leave a Reply

Your email address will not be published. Required fields are marked *