Checkbox Animation Using CSS3

HTML
<header class="codeconveyHeader"> <h1>Animated CSS3 Checkbox<span>Styling without Javascript</span></h1> </header> </p> <div class="chickyboxes"> <input type="checkbox" id="box-1"> <label for="box-1">Pellentesque sit amet quam</label> <input type="checkbox" id="box-2" checked> <label for="box-2">Morbi faucibus interdum magna vel</label> <input type="checkbox" id="box-3"> <label for="box-3">Donec ultrices diam sed</label> </div> <div class="flatboxes"> <form action="#"> <p><input type="checkbox" id="test1" /><label for="test1"><span class="ui"></span>Donec lacinia diam sit amet</label></p> <p><input type="checkbox" id="test2" /><label for="test2"><span class="ui"></span>Praesent id lorem vitae ipsum</label></p> <p><input type="checkbox" id="test3" /><label for="test3"><span class="ui"></span>Nullam sodales vitae enim</label></p> </form> </div> <div class="juiceboxes "> <form> <p> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Praesent commodo ullamcorper</label> </p> <p> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Class aptent taciti sociosqu torquent</label> </p> <p> <input id='check-3' type="checkbox" name='check-1' /> <label for="check-3">Fusce congue lorem non purus venenatis</label> </p> </form> </div>
CSS
/* Read more here http://codeconvey.com/animated-css3-checkbox-styling/ */ @import url(http://fonts.googleapis.com/css?family=Open+Sans); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'); /*Page styles*/ html { height: 100%; } body { height: 100%; margin: 0; background: #363636; align-items: center; } /*Chickky Checkboxes styles*/ .chickyboxes { background: #494949 none repeat scroll 0 0; float: left; padding: 5%; width: 40%; height:100px; } .chickyboxes input[type="checkbox"] { display: none; } .chickyboxes input[type="checkbox"] + label { display: block; position: relative; padding-left: 35px; margin-bottom: 20px; font: 14px/20px 'Open Sans', Arial, sans-serif; color: #ddd; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .chickyboxes input[type="checkbox"] + label:last-child { margin-bottom: 0; } .chickyboxes input[type="checkbox"] + label:before { content: ''; display: block; width: 20px; height: 20px; border: 1px solid #6cc0e5; position: absolute; left: 0; top: 0; opacity: .6; -webkit-transition: all .12s, border-color .08s; transition: all .12s, border-color .08s; } .chickyboxes input[type="checkbox"]:checked + label:before { width: 10px; top: -5px; left: 5px; opacity: 1; border-top-color: transparent; border-left-color: transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /*Flat UI Design Checkboxes*/ .flatboxes { background: #494949 none repeat scroll 0 0; float: left; padding: 5%; width: 40%; height:100px; } .flatboxes p { display: block; height: 30px; vertical-align: middle; } .flatboxes [type="checkbox"]:not(:checked), .flatboxes [type="checkbox"]:checked { position: absolute; left: -9999px; } .flatboxes [type="checkbox"]:not(:checked) + label, .flatboxes [type="checkbox"]:checked + label { position: relative; padding-left: 95px; cursor: pointer; color:#ddd; } .flatboxes [type="checkbox"]:not(:checked) + label:before, .flatboxes [type="checkbox"]:checked + label:before, .flatboxes [type="checkbox"]:not(:checked) + label:after, .flatboxes [type="checkbox"]:checked + label:after { content: ''; position: absolute; } .flatboxes [type="checkbox"]:not(:checked) + label:before, .flatboxes [type="checkbox"]:checked + label:before { left: 0; top: 0; width: 80px; height: 30px; background: #DDDDDD; transition: background-color .2s; } .flatboxes [type="checkbox"]:not(:checked) + label:after, .flatboxes [type="checkbox"]:checked + label:after { width: 30px; height: 30px; transition: all .2s; background: #7F8C9A; top: 0; left: 0; } /* on checked */ .flatboxes [type="checkbox"]:checked + label:before { background:#34495E; } .flatboxes [type="checkbox"]:checked + label:after { background: #6cc0e5; top: 0; left: 51px; } .flatboxes [type="checkbox"]:checked + label .ui, .flatboxes [type="checkbox"]:not(:checked) + label .ui:before, .flatboxes [type="checkbox"]:checked + label .ui:after { position: absolute; left: 6px; width: 65px; font-size: 14px; font-weight: bold; line-height: 22px; transition: all .2s; } .flatboxes [type="checkbox"]:not(:checked) + label .ui:before { font-family: 'FontAwesome'; content: "\f00d"; left: 46px; margin-top: 3px; } .flatboxes [type="checkbox"]:checked + label .ui:after { font-family: 'FontAwesome'; content: "\f00c"; color: #6cc0e5; margin-top: 3px; left: 12px; } .flatboxes [type="checkbox"]:focus + label:before { border: 0; outline: 0; box-sizing: border-box; } /*Juice Checkboxes*/ .juiceboxes { background: #3f3f3f none repeat scroll 0 0; float: left; padding: 5%; width: 40%; height:100px; } .juiceboxes input[type='radio'], .juiceboxes input[type='checkbox'] { display: none; cursor: pointer; } .juiceboxes input[type='radio']:focus, input[type='radio']:active, .juiceboxes input[type='checkbox']:focus, .juiceboxes input[type='checkbox']:active { outline: none; } .juiceboxes input[type='radio'] + label, .juiceboxes input[type='checkbox'] + label { cursor: pointer; display: inline-block; position: relative; padding-left: 30px; margin-right: 10px; color: #ddd; } .juiceboxes input[type='radio'] + label:before, input[type='radio'] + label:after, .juiceboxes input[type='checkbox'] + label:before, .juiceboxes input[type='checkbox'] + label:after { content: ''; font-family: helvetica; display: inline-block; width: 20px; height: 20px; left: 0; bottom: 0; text-align: center; position: absolute; } .juiceboxes input[type='radio'] + label:before, .juiceboxes input[type='checkbox'] + label:before { background-color: #fafafa; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .juiceboxes input[type='radio'] + label:after, .juiceboxes input[type='checkbox'] + label:after { color: #fff; } .juiceboxes input[type='radio']:checked + label:before, .juiceboxes input[type='checkbox']:checked + label:before { -moz-box-shadow: inset 0 0 0 10px #6cc0e5; -webkit-box-shadow: inset 0 0 0 10px #6cc0e5; box-shadow: inset 0 0 0 10px #6cc0e5; } /*Checkbox Specific styles*/ .juiceboxes input[type='checkbox'] + label:hover:after, .juiceboxes input[type='checkbox']:checked + label:after { content: "\2713"; line-height: 18px; font-size: 14px; } .juiceboxes input[type='checkbox'] + label:hover:after { color: #c7c7c7; } .juiceboxes input[type='checkbox']:checked + label:after, .juiceboxes input[type='checkbox']:checked + label:hover:after { color: #fff; } /* demo */ .codeconveyHeader { margin: 0 auto; text-align: center; } .codeconveyHeader h1 { color: #fff; font-size: 2em; font-weight: 700; margin: 50px 0 40px; } .codeconveyHeader h1 span { display: block; padding: 0 0 0.6em 0.1em; font-size: 0.6em; opacity: 0.7; } .demo { font-family: 'Raleway', sans-serif; color:#fff; display: block; margin: 0 auto; padding: 15px 0; text-align: center; } .demo a{ font-family: 'Raleway', sans-serif; color: #2ecc71; }
JAVASCRIPT
Expand for more options Login