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

Divi WordPress Theme

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 *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close