Costume Checkbox CSS & Costume Radio Button CSS
close
Costume Checkbox CSS & Costume Radio Button CSS

Costume Checkbox CSS & Costume Radio Button CSS

Costume Checkbox CSS & Costume Radio Button CSS

You may have seen costume checkbox and costume radio buttons on different websites and today in this article I am going to tell you how you can use that into your website or blog.

Yes you have heard it correctly, today I am going to share with you costume checkbox CSS or pure CSS costume checkbox are you can also be having costume radio button CSS or pure CSS costume radio button.

I have created that for you and I am going to provide you a CSS code and HTML code of these costume radio buttons and costume checkbox.

You can use these costume checkbox CSS and costume radio button CSS on your blogger blog or on wordpress site.

If you want to add this costume radio button or costume checkbox into your blogger blog or in wordpress you can do that but as you know i am a blogger user so i will tell you how you can use that into blogger.

Steps to add Costume Checkbox and Costume radio buttons in blogger:


  1. Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Click Edit HTML
  4. Now Search for </head>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Now copy the css code provided below and paste it just above the tag we funded in step 4
  7. Save Theme/Template
  8. Copy any one html code provided that you like to use and paste it where you want your costume checkbox or costume radio button.

Now as I have discussed with you how you can add these costume checkbox CSS in costume radio button CSS into your blogger blog now I am going to provide you the code which you will need for these costume checkbox and costume radio buttons.

CSS Code For Costume Checkbox CSS & Costume Radio Button CSS is provided below.
CSS Code for both costume radio and checkbox:
<style>
.sg-checkbox+span:before,.sg-radio:after{content:''}.demo-switches--example{margin-bottom:40px;margin-left:30px;display:inline-block}.sg-switch-input{display:none}.sg-switch-input:checked+.sg-switch-label{background-color:#0E86FE;box-shadow:0 0 0 1px #0E86FE}.sg-switch-label{display:inline-block;width:53px;height:23px;border-radius:4px;background-color:#EEF2FC;padding:1px;box-shadow:0 0 0 1px #C3D1EB;cursor:pointer}.sg-switch-input:checked+.sg-switch-label .sg-switch-btn{transform:translate3d(30px,0,0);border-color:#0E86FE;box-shadow:0 0 0 3px rgba(14,134,254,.3)}.sg-switch-btn{width:22px;height:22px;border-radius:4px;background-color:#FFF;display:block;box-shadow:1px 0 0 1px rgba(195,209,235,.2);transition:all 120ms ease-in;box-sizing:border-box;border:1px solid #C3D1EB}.sg-switches--circle .sg-switch-label{border-radius:24px}.sg-switches--circle .sg-switch-btn{border-radius:50%}.sg-switch-input:disabled+.sg-switch-label{point-events:none;cursor:not-allowed}.sg-switch-input:disabled+.sg-switch-label .sg-switch-btn{background-color:#EEF2FC;box-shadow:none}.sg-switches--txt .sg-switch-label .text{position:absolute;top:3px;right:8px;width:18px;height:18px;line-height:14px;color:#C3D1EB;text-align:center;transition:all .1s ease-in;opacity:1;pointer-events:none}.sg-radio,.sg-radio-label,.sg-switches--txt .sg-switch-label{position:relative}.sg-switches--txt .sg-switch-label .text i{font-size:25px}.sg-switches--txt .sg-switch-label .text.on{left:8px;right:auto;color:#FFF;opacity:0}.sg-switches--txt .sg-switch-input:checked+.sg-switch-label .text{left:8px;right:auto;color:#FFF}.sg-switches--txt .sg-switch-input:checked+.sg-switch-label .text.on{opacity:1}.sg-switches--txt .sg-switch-input:checked+.sg-switch-label .text.off{opacity:0}.sg-switches--icon .sg-switch-btn{width:36px;height:36px;position:relative;top:-6px;left:-6px;text-align:center;line-height:28px;font-size:2.2rem;color:#C3D1EB}.sg-checkbox-label,.sg-radio-label{word-break:break-word;line-height:1.3333rem;cursor:pointer}.sg-switches--icon .sg-switch-input:checked+.sg-switch-label .sg-switch-btn{color:#0E86FE}.sg-radio-label{margin:0 5px 10px 0;color:#456296;font-size:1rem}.sg-radio{-webkit-appearance:none;appearance:none;outline:0;box-sizing:content-box;margin:-2px 0 0;width:15px;height:15px;border:1px solid #C3D1EB;border-radius:50%;background-color:#FFF;transition:all 120ms ease-out}.sg-radio:checked{border-color:#0E86FE}.sg-radio:checked:after{opacity:1;transform:scale(1);background:#0E86FE}.sg-checkbox+span:after,.sg-radio:after{opacity:0;transform:scale(0);transition:all 120ms ease-out;pointer-events:none}.sg-radio:after{position:absolute;width:9px;height:9px;top:calc((15px - 9px)/ 2);left:calc((15px - 9px)/ 2);border-radius:50%;background:0 0}.sg-radio-label span{padding-left:4px}.sg-checkbox{display:none}.sg-checkbox+span{position:relative}.sg-checkbox+span:before{position:relative;display:inline-block;width:1.066rem;height:1.066rem;border:1px solid #C3D1EB;border-radius:2px;background-color:#FFF;transition:all 120ms ease-out;margin:-2px .6em 0 0;vertical-align:middle}.sg-checkbox+span:after{font-size:.8rem;content:"x";position:absolute;width:.8rem;height:.8rem;top:0;left:.333rem;color:#0E86FE}.sg-checkbox:checked+span:before{border-color:#0E86FE}.sg-checkbox:checked+span:after{opacity:1;transform:scale(1)}.sg-checkbox-label{position:relative;min-width:1.066rem;min-height:1.066rem;margin:0 5px 0 0;color:#456296;font-size:1rem}.sg-checkbox-label:hover .sg-checkbox+span:before{box-shadow:0 0 0 2px rgba(14,134,254,.2);border-color:#0E86FE}.sg-checkbox-label.sg-state--disable{cursor:not-allowed;pointer-events:none;color:#95ABD3}.sg-checkbox-label.sg-state--disable:hover .sg-checkbox+span:before{box-shadow:none;border-color:#D8E2F5}.sg-checkbox-label.sg-state--disable .sg-checkbox+span:before{border-color:#D8E2F5}.sg-checkbox-label.sg-checkbox-label--circle.sg-state--disable .sg-checkbox+span:before,.sg-checkbox-label.sg-state--disable .sg-checkbox:checked+span:before{border-color:#C3D1EB}.sg-checkbox-label.sg-state--disable .sg-checkbox+span:after{color:#C3D1EB}.sg-checkbox-label.sg-checkbox-label--circle .sg-checkbox+span:before{border-radius:50%}.sg-checkbox-label.sg-checkbox-label--circle .sg-checkbox:checked+span:before{color:#FFF;background-color:#0E86FE}.sg-checkbox-label.sg-checkbox-label--circle .sg-checkbox:checked+span:after{color:#FFF}.sg-checkbox-label.sg-checkbox-label--circle.sg-state--disable .sg-checkbox:checked+span:before{background-color:#C3D1EB;border-color:#C3D1EB}
</style>

1 Costume Checkbox HTML Code:

Preview:


Code:
<!--/*First Checkbox*/-->
<div class="sg-switches demo-switches--example"><input class="sg-switch-input" type="checkbox" id="switch-1" checked="checked"><label class="sg-switch-label" for="switch-1"><div class="sg-switch-btn"></div></label></div>
<!--/*First Checkbox End*/-->

2 Costume Checkbox HTML Code:

Preview:


Code:
<!--/*Second Checkbox*/-->
<div class="sg-switches sg-switches--circle demo-switches--example"><input class="sg-switch-input" type="checkbox" id="switch-2"><label class="sg-switch-label" for="switch-2"><div class="sg-switch-btn"></div></label></div>
<!--/*Second Checkbox End*/-->

3 Costume Checkbox HTML Code:

Preview:


Code:
<!--/*Third checkbox disabled*/-->
<div class="sg-switches demo-switches--example"><input class="sg-switch-input" type="checkbox" id="switch-3" disabled="disabled"><label class="sg-switch-label" for="switch-3"><div class="sg-switch-btn"></div></label></div><br>
<!--/*Third checkbox end*/-->


4 Costume Checkbox HTML Code:

Preview:


Code:
<!--/*Fourth checkbox*/-->
<div class="sg-switches sg-switches--circle sg-switches--txt demo-switches--example"><input class="sg-switch-input" type="checkbox" id="switch-4"><label class="sg-switch-label" for="switch-4"><div class="text off"><i class="icon-close">×</i></div><div class="text on"><i class="icon-check">←</i></div><div class="sg-switch-btn"></div></label></div>
<!--/*fourth checkbox end*/-->


5 Costume Checkbox HTML Code:

Preview:


Code:
<!--/*fifth checkbox*/-->
<div class="sg-switches sg-switches--icon demo-switches--example"><input class="sg-switch-input" type="checkbox" id="switch-5" checked="checked"><label class="sg-switch-label" for="switch-5"><div class="sg-switch-btn"><i class="icon-wifi">×</i></div></label></div>
<!--/*fifth checkbox end*/-->

6 Costume Checkbox HTML Code:

Preview:


Code:
<!--/*sixth checkbox*/-->
<div class="sg-switches sg-switches--circle sg-switches--icon demo-switches--example"><input class="sg-switch-input" type="checkbox" id="switch-6" checked="checked"><label class="sg-switch-label" for="switch-6"><div class="sg-switch-btn"><i class="icon-wifi">×</i></div></label></div>
<!--/*sixth checkbox end*/-->

Costume Radio Html Code:

Preview:






Code:
<!--Radio-->
<label class="demo-radio-inline sg-radio-label"><input type="radio" class="sg-radio" name="basic-radio"><span>Radio 1</span></label>

<label class="demo-radio-inline sg-radio-label"><input type="radio" class="sg-radio" name="basic-radio"><span>Radio 2</span></label>
<!--Radio end-->

Costume Simple Checkbox:

Preview:



Code:
<!--checkbox-->
<label class="demo-checkbox-inline sg-checkbox-label"><input type="checkbox" class="sg-checkbox" name="basic-checkbox"><span>Checkbox 2</span></label>
<!--checkbox end-->

Conclusion:
That's it in today's post i think you like this post if you did then please share it with your friends if they are also having website they might love it.

Thanks and Good Luck!

Disqus Codes

No comments

Notifications

Disqus Logo