Dear friends in this video we will discus about how to create turn on off button using css with animation. So if you like this article then visit more interested articles.
Table of Contents
Button Design
First of all learn html and css for make this turn on off button using css because it is make by using html and css. If you want to lean html and css then visit w3school website. It a best site for learning programing languages and them get the manual try run button. After this doownload visual studio code for coding and install it in your system then you are ready for make it.
I hope you understand about ionicon cdn link. If you don’t know about ionicon then go to your browser and type htttps://ionicons.com/ then press the enter button for open this site. Then go to usage page and get the cdn link on top and now go to your system searchbar section then type vs code an open it. I hope you installed code editor in your system. After this go to the new file and save it with filename.html. Then press the ctrl+1 and get html syntex just 1 second only this feature inbuild vs code and go to the body end tag then paste ionicon cnd link below.
Best Articles..
How to make neumorphism registration form?
How to make portfolio website header with dark mode enable or desable?
How to make footer for website?
HTML For Button
In this article we are using minimum html code and make it easy for using our website or any project just copy our code and paste you projects and website your turn on off button using css create easily. Now first of all o to your starting body tag and give the label tag after this give the input tag with checkbox then give one more tag like span tag. After this go to the ionicon website and go to icons page then search power button and get the button html code and paste under span tag then save it. Go to your file and press the right and open with browser. You see only checkbox and ionicon.
Source Code.
<label>
<input type="checkbox">
<span><ion-icon name="power-outline"></ion-icon></span>
</label>CSS For Design Button
If you want to give the style then you have three ways for using css first you can give using inline css and third you can give the internal css and fourth you can guve the external css. But we are using internal css in this project so if you want to choose another way for give the css style then this is depend on of your requirement. Here we are using internal css so go to your starting head tag and give the style tag under head tag in this tag give *{} tag and give margin 0, padding 0, box-sizing border-box. Then give the body tag and give display flex, justify-content center, align-items center, min-height 100vh, background #333.
Now we have to take the label and give the position relative to it. After that the width has to be given 150px and the height is to be given 75px. The background is to be #212121 and the border radius is 10px. Something like this.
label{
position: relative;
width: 150px;
height: 75px;
background: #212121;
border-radius: 10px;
}
After this we will take the label again and then take the span tag and position absolute in it and keep it 0 from top and 0 from left also. Then we will take width 75px and height as 75px then background color #333 border 6px solid #212121 border radius 14px take cursor pointer after that we will take transition 5s it will flex the display and center justify content then center align items too .
label span{
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 75px;
background-color: #333;
border: 6px solid #212121;
border-radius: 14px;
cursor: pointer;
transition: 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
Then we have to take the label and take the input inside the label after that we will style the input. First of all we will make its appearance none.
Again we will take the label tag and check the input tag in it then take the span tag inside it we will do 75px from the left so that whenever we check the button, it will move 75px from the left. Something like this.
label input{
appearance: none;
}
label input:checked ~ span{
left: 75px;
}
This time we have to take the label and then the span tag. After that we have to take ion icon, in this we will write the code of css so that we can give style to our icon. First of all, keep the color rgba and then keep the font size 2em. Then transition 5s has to be done. Because whenever we click on our button, it will run smooth, so we use Trisiti to play any of our content smoothly. For example.
label span ion-icon{
color: rgba(255,255,255,0.25);
font-size: 2em;
transition: 0.5s;
}
Again we have to take label and after that we have to take input tag then we will check it after that we have to take span tag. And then we will save it by taking ion icon, then after doing all this we have to give color #fff inside it, then give filter drop shadow so that we can filter it, this will increase the designing of our button, so big we do it with curly braces Will close and save. Something like this.
label input:checked ~ span ion-icon{
color: #fff;
filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 15px #fff);
}
Hope you have understood very well after reading this article of ours because we have explained everything step by step and we have also given examples together so that if you have trouble understanding then if you still do not understand. So copy the following css code and paste it in your code editor.
So that you get your work done as soon as possible. So friends, if you are happy with this article of ours, then read the rest of our articles too so that you get to learn something more.
Source Code.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #333;
}
label{
position: relative;
width: 150px;
height: 75px;
background: #212121;
border-radius: 10px;
}
label span{
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 75px;
background-color: #333;
border: 6px solid #212121;
border-radius: 14px;
cursor: pointer;
transition: 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
label input{
appearance: none;
}
label input:checked ~ span{
left: 75px;
}
label span ion-icon{
color: rgba(255,255,255,0.25);
font-size: 2em;
transition: 0.5s;
}
label input:checked ~ span ion-icon{
color: #fff;
filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 15px #fff);
}
