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.
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;
}
It’s not a pure css checkbox if it uses an image….
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.
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