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
    • 397
    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>
    <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="" rel="stylesheet">
    <div class="container">
    <h1>Creating <span>Animated</span> Checkbox</h1>
    <div class="section" style=" margin-left:27px;">
    <i class="fa fa-question-circle"></i>
    What is your profession?
    <ul >
    <li><input id="manager" type="checkbox" name="manager">
    <label for="manager">Project Manager</label>
    <li><input id="Webdesigner" type="checkbox" name="Webdesigner">
    <label for="Webdesigner">Web Designer</label>
    <li><input id="Webdeveloper" type="checkbox" name="Webdeveloper">
    <label for="Webdeveloper">Web Developer</label>


    Below is the CSS Code:-

    background: #b3d4fc none repeat scroll 0 0;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    h1 span{
    color: #2980b9;
    font-weight: bold;
    font-size: 30px;
    font-weight: 300;
    ul li {
    font-family: "Lato";
    list-style: outside none none;
    margin: 10px auto;
    /*Hide the Odinary Checkbox*/
    display: none;
    color: #222;
    /*Chechbox icons*/
    label {
    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.


    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.


    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

Sign up using

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: