Ultra-cool checkbox for pure CSS3 checkbox and radio Radio box

Before you shared a lot of CSS3 implementation of the button. What we're going to share with you today is the checkbox check box for pure CSS3 and the Radio radio box, which is super cool. Let's take a look at the chart first!

Online preview Source Download

This instance is completely implemented by CSS3 without any JS code. Let's look at the implementation code together.

HTML code:

 <Divstyle= "width:200px; float:left">            <label>                <inputtype= "checkbox"class= "Option-input checkbox"checked="">Checkbox</label>            <label>                <inputtype= "checkbox"class= "Option-input checkbox">Checkbox</label>            <label>                <inputtype= "checkbox"class= "Option-input checkbox">Checkbox</label>        </Div>        <Divstyle= "width:200px; float:left">            <label>                <inputtype= "Radio"class= "Option-input Radio"name= "Example">Radio Option</label>            <label>                <inputtype= "Radio"class= "Option-input Radio"name= "Example">Radio Option</label>            <label>                <inputtype= "Radio"class= "Option-input Radio"name= "Example">Radio Option</label>        </Div>

CSS3 Code:

@-webkit-keyframes Click-wave{0% {width:40px;Height:40px;Opacity:0.35;position:relative; }100%{width:200px;Height:200px;Margin-left:-80px;Margin-top:-80px;Opacity:0.0; }}@-moz-keyframes Click-wave{0% {width:40px;Height:40px;Opacity:0.35;position:relative; }100%{width:200px;Height:200px;Margin-left:-80px;Margin-top:-80px;Opacity:0.0; }}@-o-keyframes Click-wave{0% {width:40px;Height:40px;Opacity:0.35;position:relative; }100%{width:200px;Height:200px;Margin-left:-80px;Margin-top:-80px;Opacity:0.0; }} @keyframes Click-wave{0% {width:40px;Height:40px;Opacity:0.35;position:relative; }100%{width:200px;Height:200px;Margin-left:-80px;Margin-top:-80px;Opacity:0.0; }}.option-input{-webkit-appearance:None;-moz-appearance:None;-ms-appearance:None;-o-appearance:None;appearance:None;position:relative;Top:13.33333px;width:40px;Height:40px;-webkit-transition:All 0.15s ease-out 0;-moz-transition:All 0.15s ease-out 0;transition:All 0.15s ease-out 0;background:#cbd1d8;Border:None;Color:#fff;cursor:Pointer;Display:Inline-block;Outline:None;position:relative;Margin-right:0.5rem;Z-index: +;}. Option-input:hover{background:#9faab7;}. option-input:checked{background:#40e0d0;}. Option-input:checked::before{width:40px;Height:40px;position:Absolute;content:' \2716 ';Display:Inline-block;font-size:26.66667px;text-align:Center;Line-height:40px;}. Option-input:checked::after{-webkit-animation:Click-wave 0.65s;-moz-animation:Click-wave 0.65s;Animation:Click-wave 0.65s;background:#40e0d0;content:"';Display:Block;position:relative;Z-index: -;}. Option-input.radio{Border-radius:50%;}. Option-input.radio::after{Border-radius:50%;}Body{Display:-webkit-box;Display:-moz-box;Display:Box;-webkit-box-orient:Horizontal;-moz-box-orient:Horizontal;box-orient:Horizontal;-webkit-box-pack:Start;-moz-box-pack:Start;Box-pack:Start;-webkit-box-align:Stretch;-moz-box-align:Stretch;box-align:Stretch;background:#e8ebee;Color:#9faab7;font-family:"Helvetica Neue", Helvetica, Arial, Sans-serif;text-align:Center;}Body Div{padding:5rem;}Body Label{Display:Block;Line-height:40px;}

is not very simple. Just copy the above HTML code and CSS code onto the page. Run to see the effect. Give it a try. Ha ha

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/5384

Ultra-cool checkbox for pure CSS3 checkbox and radio Radio box