Step 1:Create Index.html file and implement below Code .
<div class="div1"> <input id='one' type='checkbox'/> <label for='one'> <span></span> PHP <ins><i>PHP</i></ins> </label> <input id='two' type='checkbox'/> <label for='two'> <span></span> JAVA SCRIPT <ins><i>JAVA SCRIPT</i></ins> </label> <input id='three' type='checkbox'/> <label for='three'> <span></span> AJAX <ins><i>AJAX</i></ins> </label> <input id='four' type='checkbox'/> <label for='four'> <span></span> CSS <ins><i>CSS</i></ins> </label> </div>
* { box-sizing: border-box; } body { background-color: #666699; display: flex; justify-content: center; align-items: center; font: 24px/1.4 "RobotoDraft", sans-serif; color: #fff; } *{ box-sizing: border-box; user-select: none; } .div1{ display: flex; flex-direction: column; background: black; border-radius: 5%; padding: 60px; } input[type='checkbox']{ height: 0; width: 0; } input[type='checkbox'] + label{ position: relative; display: flex; margin: .6em 0; align-items: center; color: #9e9e9e; transition: color 250ms cubic-bezier(.4,.0,.23,1); } input[type='checkbox'] + label > ins{ position: absolute; display: block; bottom: 0; left: 2em; height: 0; width: 100%; overflow: hidden; text-decoration: none; transition: height 300ms cubic-bezier(.4,.0,.23,1); } input[type='checkbox'] + label > ins > i{ position: absolute; bottom: 0; font-style: normal; color: #4FC3F7; } input[type='checkbox'] + label > span{ display: flex; justify-content: center; align-items: center; margin-right: 1em; width: 1em; height: 1em; background: transparent; border: 2px solid #9E9E9E; border-radius: 2px; cursor: pointer; transition: all 250ms cubic-bezier(.4,.0,.23,1); } input[type='checkbox'] + label:hover, input[type='checkbox']:focus + label{ color: #fff; } input[type='checkbox'] + label:hover > span, input[type='checkbox']:focus + label > span{ background: rgba(255,255,255,.1); } input[type='checkbox']:checked + label > ins{ height: 100%; } input[type='checkbox']:checked + label > span{ border: .5em solid #FFEB3B; animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1); } input[type='checkbox']:checked + label > span:before{ content: ""; position: absolute; top: .8em; left: .3em; border-right: 3px solid transparent; border-bottom: 3px solid transparent; transform: rotate(45deg); transform-origin: 0% 100%; animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards; } @keyframes shrink-bounce{ 0%{ transform: scale(1); } 33%{ transform: scale(.85); } 100%{ transform: scale(1); } } @keyframes checkbox-check{ 0%{ width: 0; height: 0; border-color: #212121; transform: translate3d(0,0,0) rotate(45deg); } 33%{ width: .2em; height: 0; transform: translate3d(0,0,0) rotate(45deg); } 100%{ width: .2em; height: .5em; border-color: #212121; transform: translate3d(0,-.5em,0) rotate(45deg); } }
<!DOCTYPE html> <html> <head> <title>How To Create Animated CheckBox Using CSS And HTML</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> </head> <body> <br/><br/> <div class="container"> <br> <div class="text-center"> <h1 id="color" style="color: white;">Create Animated CheckBox Using CSS And HTML</h1> </div> <div class="div1"> <input id='one' type='checkbox'/> <label for='one'> <span></span> PHP <ins><i>PHP</i></ins> </label> <input id='two' type='checkbox'/> <label for='two'> <span></span> JAVA SCRIPT <ins><i>JAVA SCRIPT</i></ins> </label> <input id='three' type='checkbox'/> <label for='three'> <span></span> AJAX <ins><i>AJAX</i></ins> </label> <input id='four' type='checkbox'/> <label for='four'> <span></span> CSS <ins><i>CSS</i></ins> </label> </div> </div> </body> </html>