Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Animated checkbox using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 341
    Comment on it

    Hello,readers I had created a simple animated checkbox using Font Awesome ( CSS Bootstrap file), along with pseudo elements, CSS3 Transition property and opacity.

    In my example, I had created an unordered list and placed checkbox tag along with the label tag.

    Below is the Html code:-

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    
    <title>Checkbox using CSS3</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    
    </head>
    
    <body>
    
    <div class="container">
    
    <h1>Creating <span>Animated</span> Checkbox</h1>
    
    <div class="section" style=" margin-left:27px;">
    
    <h2>
    
    <i class="fa fa-question-circle"></i>
    
    What is your profession?
    
    </h2>
    
    <ul >
    
    <li><input id="manager" type="checkbox" name="manager">
    
    <label for="manager">Project Manager</label>
    
    </li>
    
    <li><input id="Webdesigner" type="checkbox" name="Webdesigner">
    
    <label for="Webdesigner">Web Designer</label>
    
    </li>
    
    <li><input id="Webdeveloper" type="checkbox" name="Webdeveloper">
    
    <label for="Webdeveloper">Web Developer</label>
    
    </li>
    
    </ul>
    
    </div>
    
    </div>
    
    </body>
    
    </html>

     

    Below is the CSS Code:-

    body{
    
    background: #b3d4fc none repeat scroll 0 0;
    
    }
    
    h1{
    
    font-size: 40px;
    
    font-weight: 600;
    
    text-align: center;
    
    }
    
    h1 span{
    
    color: #2980b9;
    
    font-weight: bold;
    
    }
    
    h2{
    
    font-size: 30px;
    
    font-weight: 300;
    
    }
    
    ul li {
    
    font-family: "Lato";
    
    list-style: outside none none;
    
    margin: 10px auto;
    
    }
    
    /*Hide the Odinary Checkbox*/
    
    input[type="checkbox"]{
    
    display: none;
    
    color: #222;
    
    }
    
    /*Chechbox icons*/
    
    label {
    
    color:black;
    
    cursor: pointer;
    
    font-size: 30px;
    
    padding: 16px 28px 0 0;
    
    position: relative;
    
    }
    
    label::before {
    
    content: '\f096';
    
    }
    
    label::before, label::after {
    
    font-family: FontAwesome;
    
    font-size: 50px;
    
    left: -45px;
    
    position: absolute;
    
    top: 9px;
    
    }
    
    label::after {
    
    color: #6c5300;
    
    content: '\f00c';
    
    font-size: 27px;
    
    left: -42px;
    
    max-width: 0;
    
    opacity: 0.5;
    
    overflow: hidden;
    
    top: 16px;
    
    transition: all 0.5s ease 0s;
    
    }
    
    /* Animating the Checkbox Icons*/
    
    input[type="checkbox"]:checked + label::after {
    
    margin-right: 90px;
    
    max-width: 25px;
    
    opacity: 1;
    
    width: 25px;
    
    }

    In the CSS code I had added style to the list and the label tags using the pseudo code before and after for this we need to set the checkbox font to font-awesome basically for icon. Instead of using the icon tag I have used unicode version with the Transition and opacity property to show and the hide the icon used.

    In the final step I had set the text-box and after pseudo code for checkbox by giving it the max-width of 25px and opacity to 1 for the check icon when once clicked.

    Conclusion:-

    With the use of CSS3 I had created creative checkbox using the pseudo elements,Transition and animation properties that are interactive, simple to understand wihout the using javascript.

    Note:-

    Some browsers with the older versions of IE do not support animation but In the browsers such as in Safari 3.2+,Chrome ,Firefox 4+, Opera 10.5+, and IE 10 it can easily work.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: