Freebie – Pure CSS Checkbox

Today, we have a nice freebie from Tom Grochowski as he released his code for this pure CSS checkbox. Amazingly simple, great-looking and easy-to-use checkbox.

pure css checkbox freebie

THE HTML

<body>
 <h1>Pure CSS Checkbox</h1>
 <div class="container">
 <label>
 <input type="checkbox" name="" value="" class="protype1"/>
 <span>CHECKBOX</span>
</label>
 </div>
</body>

 

THE CSS

body{
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #D6D6D6 100%);
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #D6D6D6 100%);
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #D6D6D6 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #FFFFFF), color-stop(1, #D6D6D6));
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #D6D6D6 100%);
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #D6D6D6 100%);
}
input[type=checkbox] {display:none;}
.container {margin-top:100px;}
h1 {
font-family:'PT Sans', sans-serif;
text-align:center;
font-size:2em;
color:#ff5847;
margin-top:30px;
}
span {
background-color:#373740;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
font-weight:700;
color:#FFF;
font-size:.85em;
letter-spacing:2px;
text-decoration:none;
font-family:'PT Sans', sans-serif;
text-align:center;
width:280px;
height:40px;
line-height:40px;
cursor:pointer;
display:block;
margin: 0 auto;
-webkit-transition:background-color 150ms ease-in;
-moz-transition:background-color 150ms ease-in;
-ms-transition:background-color 150ms ease-in;
-o-transition:background-color 150ms ease-in;
transition:background-color 150ms ease-in;
}
span:hover {
background-color:#ff5847;
}
input[type=checkbox]:checked + span {
background-color:#ff5847;
text-decoration:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background:#ff5847 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC) no-repeat 7% center;
background-size:15px 13px;
}
input[type=checkbox]:checked:hover + span {
background-color:#dd5244;
color:rgba(255,255,255,0.5);
text-decoration:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background:#dd5244 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNq8110OgjAMAGBGvIY3VESjt9jPg95PT+LccBIZ7dYOWJPGB+g+Ymg3hLW2QeLkcu/y2pSFdvl0eQevehjI3uXbfkMh96TShFq/xhG6J4faAtxEtSBOQTm4QWpnOBWl4CZT69fuYpiCpnBDrB1xLhrjgoFO8F1oGcFslUv4bV32zFoxmOHJta0XMn65dC0UaiddA8UGiN4axeC1cUkdmWviEls/NwL1FqjPNtNvoimPdC3yRCUTiTXbt0R/oSnw2iiK10BBvBY6w2uiE3xJr8oFtcrvxy/fVcyeVdGx98yotcOxN/znHeMUIhdMOG8c4reagssF43VEoT5O4ZJwvNUUFJtcEE5BMXyGpnanf5yDxjiI+hSJj7YunEBvhbuTCh9tD+jiR4ABAJ0SrJgNr1UAAAAAAElFTkSuQmCC) no-repeat 7% center;
background-size:15px 15px;
}

pure css checkbox

LIVE PREVIEW


You may also like...

3 Responses

  1. William Neely says:

    It’s not a pure css checkbox if it uses an image….

  2. tammudu20 says:

    Hi This is really good but can we do the same effect for Radio buttons. when i changed the type=radio it works, but it allows multiple selected options highlighted. for checkbox its perfect. please kindly help.

  3. designify says:

    Hey there!
    Thanks for visiting.
    Can you put your code on codepen or cssdeck and send me the link so I can be able to help you.

    Thanks,
    Petia

Leave a Reply

Your email address will not be published. Required fields are marked *