Costume Checkboxes With Toggle Radial Effect
close
Costume Checkboxes With Toggle Radial Effect

Costume Checkboxes With Toggle Radial Effect

Costume Checkboxes With Toggle Radial Effect

These simple CSS checkbox is basically costume checkbox is which have toggle radial animation.

Music boxes are made with pure CSS you can get a source code and have a demo of these.

You can see the demo of these checkboxes in the above thumbnail.

What's up guys today we are going to make Costume Checkboxes With Toggle Radial Effect

As you know the HTML code is mandatory for that so we should have some HTML code first. Below is the HTML code.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files in case if there is any error with the working of code.

There are some external files used in the code provided below you can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css

HTML code for Costume Checkboxes With Toggle Radial Effect :

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css'><div class="container"><h3>Toggle Me!</h3><div class="checkbox-container yellow"><input type="checkbox" checked id="toggle" /><label for="toggle"></label><div class="active-circle"></div></div></div><div class="container"><h3>No! Toggle me instead!</h3><div class="checkbox-container green"><input type="checkbox" checked id="toggle2" /><label for="toggle2"></label><div class="active-circle"></div></div></div><div class="container"><h3>Why not me?</h3><div class="checkbox-container purple"><input type="checkbox" checked id="toggle3" /><label for="toggle3"></label><div class="active-circle"></div></div></div><footer><p> Created with <i class="fa fa-heart"></i> by <a target="_blank" href="https://www.softwebtuts.com">Muhammad Muzammil</a> - More on <a target="_blank" href="https://www.softwebtuts.com">www.softwebtuts.com</a> - Follow me on <a target="_blank" href="https://twitter.com/softwebtuts">Twitter</a></p></footer> 

AttributeBelongs to Description
charset<meta>, <script>Specifies the character encoding
classGlobal AttributesSpecifies one or more classnames for an element (refers to a class in a style sheet)
for<label>, <output>Specifies which form element(s) a label/calculation is bound to
href<a>, <area>, <base>, <link>Specifies the URL of the page the link goes to
idGlobal AttributesSpecifies a unique id for an element
langGlobal AttributesSpecifies the language of the element's content
rel<a>, <area>, <link>Specifies the relationship between the current document and the linked document
target<a>, <area>, <base>, <form>Specifies the target for where to open the linked document or where to submit the form
type<a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>Specifies the type of element


In the code provided above i have added some icons using fontawesome css library that's why i have included the fontawesome library if you will remove it then you will see squares instead icons.

I have included 3 with different background color you can increase or decrease the counting according to your requirement.
Without CSS our this script (Costume Checkboxes With Toggle Radial Effect) will never look ravishing. So here we are, our HTML code is ready now we have to customize our HTML and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Costume Checkboxes With Toggle Radial Effect you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Costume Checkboxes With Toggle Radial Effect :

@import url('https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei');*{box-sizing:border-box}body{background:#34495e;font-family:'ZCOOL XiaoWei', serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0}.container{background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;text-align:center;width:280px;height:170px}.container h3{color:#111;margin:0 0 25px;position:relative;z-index:2}.checkbox-container{display:inline-block;position:relative}.checkbox-container label{background-color:#aaa;border:1px solid #fff;border-radius:20px;display:inline-block;position:relative;transition:all 0.3s ease-out;width:45px;height:25px;z-index:2}.checkbox-container label::after{content:' ';background-color:#fff;border-radius:50%;position:absolute;top:1.5px;left:1px;transform:translateX(0);transition:transform 0.3s linear;width:20px;height:20px;z-index:3}.checkbox-container input{visibility:hidden;position:absolute;z-index:2}.checkbox-container input:checked + label + .active-circle{transform:translate(-50%, -50%) scale(15)}.checkbox-container input:checked + label::after{transform:translateX(calc(100% + 0.5px))}.active-circle{border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(calc(-50% - 10px), calc(-50% - 2px)) scale(0);transition:transform 0.6s ease-out;width:30px;height:30px;z-index:1}.checkbox-container.green .active-circle,
.checkbox-container.green input:checked + label{background-color:#47B881}.checkbox-container.yellow .active-circle,
.checkbox-container.yellow input:checked + label{background-color:#F7D154}.checkbox-container.purple .active-circle,
.checkbox-container.purple input:checked + label{background-color:#735DD0}@media (max-width:840px){body{flex-direction:column}}footer{background-color:#222;color:#fff;font-size:14px;bottom:0;position:fixed;left:0;right:0;text-align:center;z-index:999}footer p{margin:10px 0}footer i{color:red}footer a{color:#3c97bf;text-decoration:none}

We will customise these checkboxes using pure CSS code without any JavaScript code is very easy using CSS :checked selector we can do that easily.

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

I have used @media rule in the above css code for making this project responsive for all kind of devices.

These are some css selectors that are used in the above css code with their description and example.
SelectorExampleExample description
:checkedinput:checkedSelects every checked <input> element

Customizations :

In the above codes provided you have to make customizations replace following things:
Replace https://www.softwebtuts.com with your own website url.

Completion :

So here we are, We have done and our project Costume Checkboxes With Toggle Radial Effect is ready now you can copy and combine all the codes provided above and combine them into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Costume Checkboxes With Toggle Radial Effect) File :

Costume Checkboxes With Toggle Radial Effect.zip
File Size 2.67 KB
Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

That's it guys if you face any difficulty while running this project you can simply write a comment below I will try to answer it as soon as possible and keep visiting this site for more this kind of tutorials.
Thank you !
Disqus Codes

No comments

Notifications

Disqus Logo