Whatsapp Style Checkboxs - Costume Checkbox HTML+CSS+Jquery
Whatsapp Style Checkboxs - Costume Checkbox HTML+CSS+Jquery

Today we are going to build WhatsApp style checkbox is it looks pretty when you have a look on them. This checkbox is a not WhatsApp style checkbox but the color scheme is similar to WhatsApp.

What's happening guys today we are going to design Whatsapp Style Checkboxs

As you know the HTML folder is needed for that so we should have some HTML folder first . Below is the code provided and you have to save it with the filename as provided.

Preview:
Whatsapp Style Checkboxs - Costume Checkbox HTML+CSS+Jquery

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

There are some external files used in the code provided below you can download them if you want:
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

Save It As Whatsapp Style Checkboxs/index.html :

<link rel="stylesheet" href="css/style.css"><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="js/index.js"></script> 
I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

So that's it our HTML is ready you can see that the text or the code is marked don't remove that and follow the steps which are provided above.
Without CSS our this script (Whatsapp Style Checkboxs) will never look nice. So here we are, our HTML folder is ready now we have to customize our HTML and it can be done using CSS.

So below is the CSS code for our HTML folder and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Whatsapp Style Checkboxs/css/style.css :

html, body{height:100%;width:100%;overflow:hidden}body{display:flex;justify-content:center;align-items:center;background-color:#fefffe}.container{width:300px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.box{position:relative;background:#ffffff;width:70px;height:70px;border:3px solid #2AF598;border-radius:8px;cursor:pointer;margin:10px;display:flex;justify-content:center;align-items:center}.box:before, .box:after{position:absolute}.box:before{transition:all .10s linear .10s;content:'';width:32px;height:32px;background:#26d9af;border-radius:100%;opacity:0}.box:after{background:#ffffff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"> <path fill="#2AF598" d="M16,2C8.268,2,2,8.268,2,16S8.268,30,16,30S30,23.732,30,16S23.732,2,16,2ZM23.83,13.83L14.848999999999998,22.811999999999998C14.379999999999999,23.276999999999997,13.619999999999997,23.276999999999997,13.151999999999997,22.811999999999998L7.7769999999999975,17.435C7.307999999999997,16.965999999999998,7.307999999999997,16.206,7.7769999999999975,15.738L8.907999999999998,14.607C9.376999999999997,14.138,10.136999999999997,14.138,10.604999999999997,14.607L14,18L21,11C21.469,10.531,22.229,10.531,22.695,11L23.830000000000002,12.133C24.297,12.602,24.297,13.361,23.83,13.83Z"/></svg>');content:'';width:32px;height:32px;opacity:0;transform-origin:50% 50%;transform:rotate(30deg) scale(0);border-radius:50%;transition:transform .1s ease}.box.active:before, .box.active:after{opacity:1}.box.active:before{width:100%;height:100%;border-radius:5px}.box.active:after{animation:tada .3s linear;transform:rotate(0deg) scale(1)}@keyframes tada{0%{transform:rotate(50deg) scale(0)}50%{transform:rotate(0deg) scale(1.2)}100%{transform:rotate(0deg) scale(1)}}

This was our simple CSS code which you have to save it in style.css file in the CSS folder I already told you if you will not follow the steps then this code will not work.

The best thing that I recommend you is to download the project file from the link provided below.


In the above code some color codes are used that are listed below you can change them as required.
  • #fefffe
  • #ffffff
  • #2AF598
  • #26d9af
  • #ffffff
  • #2AF598

  • So we have written HTML folder and customised it and now we will add some functionality in this project (Whatsapp Style Checkboxs) to make it work as we want it to be.

    To make this project (Whatsapp Style Checkboxs) work properly for that we will use JavaScript.

    So here is a JavaScript code for our project (Whatsapp Style Checkboxs) and also save it with the filename as provided. Make a new directory called js and put this file to that directory.

    The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Whatsapp Style Checkboxs/js/index.js :

    $(".box").on("click", function(){
    $(this).toggleClass("active");
    });
    I have used little bit of jQuery code to make these checkboxes work properly.

    Result :

    So here we are, We have done and our project Whatsapp Style Checkboxs is ready now you can save all the files as provided.

    Like CSS files in css directory and JavaScript files in a js directory name. Below is directory tree of the files and folders of this project.


    • Whatsapp Style Checkboxs
      • css
        • style.css
      • js
        • index.js
      • index.html

    Download Project (Whatsapp Style Checkboxs) File :

    Whatsapp Style Checkboxs.zip
    File Size 3.36 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    That's it i thing you may have got your answer and i think this will help you alot if it did leave your feedback in the comment section below i will be glad to hear from you.
    Thank you !




    Whatsapp Style Checkboxs - Costume Checkbox HTML+CSS+Jquery

    Whatsapp Style Checkboxs - Costume Checkbox HTML+CSS+Jquery

    Whatsapp Style Checkboxs - Costume Checkbox HTML+CSS+Jquery

    Today we are going to build WhatsApp style checkbox is it looks pretty when you have a look on them. This checkbox is a not WhatsApp style checkbox but the color scheme is similar to WhatsApp.

    What's happening guys today we are going to design Whatsapp Style Checkboxs

    As you know the HTML folder is needed for that so we should have some HTML folder first . Below is the code provided and you have to save it with the filename as provided.

    Preview:
    Whatsapp Style Checkboxs - Costume Checkbox HTML+CSS+Jquery

    The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    There are some external files used in the code provided below you can download them if you want:
    http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

    Save It As Whatsapp Style Checkboxs/index.html :

    <link rel="stylesheet" href="css/style.css"><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="js/index.js"></script> 
    I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

    So that's it our HTML is ready you can see that the text or the code is marked don't remove that and follow the steps which are provided above.
    Without CSS our this script (Whatsapp Style Checkboxs) will never look nice. So here we are, our HTML folder is ready now we have to customize our HTML and it can be done using CSS.

    So below is the CSS code for our HTML folder and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

    The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Whatsapp Style Checkboxs/css/style.css :

    html, body{height:100%;width:100%;overflow:hidden}body{display:flex;justify-content:center;align-items:center;background-color:#fefffe}.container{width:300px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.box{position:relative;background:#ffffff;width:70px;height:70px;border:3px solid #2AF598;border-radius:8px;cursor:pointer;margin:10px;display:flex;justify-content:center;align-items:center}.box:before, .box:after{position:absolute}.box:before{transition:all .10s linear .10s;content:'';width:32px;height:32px;background:#26d9af;border-radius:100%;opacity:0}.box:after{background:#ffffff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"> <path fill="#2AF598" d="M16,2C8.268,2,2,8.268,2,16S8.268,30,16,30S30,23.732,30,16S23.732,2,16,2ZM23.83,13.83L14.848999999999998,22.811999999999998C14.379999999999999,23.276999999999997,13.619999999999997,23.276999999999997,13.151999999999997,22.811999999999998L7.7769999999999975,17.435C7.307999999999997,16.965999999999998,7.307999999999997,16.206,7.7769999999999975,15.738L8.907999999999998,14.607C9.376999999999997,14.138,10.136999999999997,14.138,10.604999999999997,14.607L14,18L21,11C21.469,10.531,22.229,10.531,22.695,11L23.830000000000002,12.133C24.297,12.602,24.297,13.361,23.83,13.83Z"/></svg>');content:'';width:32px;height:32px;opacity:0;transform-origin:50% 50%;transform:rotate(30deg) scale(0);border-radius:50%;transition:transform .1s ease}.box.active:before, .box.active:after{opacity:1}.box.active:before{width:100%;height:100%;border-radius:5px}.box.active:after{animation:tada .3s linear;transform:rotate(0deg) scale(1)}@keyframes tada{0%{transform:rotate(50deg) scale(0)}50%{transform:rotate(0deg) scale(1.2)}100%{transform:rotate(0deg) scale(1)}}

    This was our simple CSS code which you have to save it in style.css file in the CSS folder I already told you if you will not follow the steps then this code will not work.

    The best thing that I recommend you is to download the project file from the link provided below.


    In the above code some color codes are used that are listed below you can change them as required.
  • #fefffe
  • #ffffff
  • #2AF598
  • #26d9af
  • #ffffff
  • #2AF598

  • So we have written HTML folder and customised it and now we will add some functionality in this project (Whatsapp Style Checkboxs) to make it work as we want it to be.

    To make this project (Whatsapp Style Checkboxs) work properly for that we will use JavaScript.

    So here is a JavaScript code for our project (Whatsapp Style Checkboxs) and also save it with the filename as provided. Make a new directory called js and put this file to that directory.

    The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Whatsapp Style Checkboxs/js/index.js :

    $(".box").on("click", function(){
    $(this).toggleClass("active");
    });
    I have used little bit of jQuery code to make these checkboxes work properly.

    Result :

    So here we are, We have done and our project Whatsapp Style Checkboxs is ready now you can save all the files as provided.

    Like CSS files in css directory and JavaScript files in a js directory name. Below is directory tree of the files and folders of this project.


    • Whatsapp Style Checkboxs
      • css
        • style.css
      • js
        • index.js
      • index.html

    Download Project (Whatsapp Style Checkboxs) File :

    Whatsapp Style Checkboxs.zip
    File Size 3.36 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    That's it i thing you may have got your answer and i think this will help you alot if it did leave your feedback in the comment section below i will be glad to hear from you.
    Thank you !




    Related Posts

    Disqus Codes

    No comments

    Subscribe Our Newsletter

    Notifications

    Disqus Logo