how to create custom bulb check box using html css | hiisgraphics

how to create Simple custom 

bulb check box using html css.

Good morning internet👋in this article today we are going to see how to creat custom bulb check box using only html and css.

Preview

html code

 <div class="container">

 <input type="checkbox" id="bulb">

<label for:="bulb" class="bulb">

<span class="bulb-cap"></span>

 <span class="bulb-fotter-contact"></span>

</label>

< /div>

Css Code

*{

margin: 0%; padding: 0;

 box-sizing: border-box; }

 body{

 background: rgb(39, 39, 46);

 display: flex;

 justify-content: center;

 . container{

 position : absolute;

 left: 50%;

 top : 50%;

 transform: translate(-50%, -59%);

 /* input type = checkbox */

 #bulb{

 display: none;

}

 .bulb{

 position: absolute;

 display: flex;

 justify-content: center;

 width: 200px;

 height: 200px;

 border-radius: 50%:

 left: 50%; top: 40%;

 transform: translate(-50%, -50%);

 background: rgb(255, 255, 255);

 cursor: pointer;

 transition: all 0.35 ease-in-out;}

 .bulb: :before{

 position: absolute;

 content ""

 width: 90px;

 border-top: 79px solid rgb(255, 255, 255); 

 border-left: 35px solid transparent;

 border-right: 35px solid transparent;

 bottom: -30px;

 transition: all 0.35 ease-in-out;

 z-index: 4;

 .bulb-cap{

 position: absolute;

 width : 90px;

 height: 80px;

 background: rgb(85, 85, 85);

 top :13rem ;

 border-radius: 0 0 20px 20px ;

 z-index: 2; }

 .bulb-cap: :after {

 position: absolute;

 content: ""

 width: 98px;

 height: 6px;

 background: rgb(141, 141, 141);

 toP : 4e%;

 left: 50%;

 border-radius: 10px;

 transform: translateX(-50%);

 box-shadow: 0px 13px 0 0 rgb(141, 141, 141),

 0px 26px 0 0 rgb(141, 141, 141);

 .bulb-fotter-contact(

 content : "";

 position : absolute ;

 height: 25px;

 width: 50px;

 background: rgb(141, 141, 141);

 left : 50%;

 bottom : -6.2rem;

 transform: translateX(-50%);

 border-radius: 0 0 50px 50px; }

 /* THIS IS FOR CLICK FUNCTION '/

 #bulb:checked + .bulb {

 background : #ffdf42;

 box-shadow: 0px 0px 50px 20px rgba(255, 191, 17, 0.9);

 transition: all 0.3s ease-in-out;}

 #bulb : checked + .bulb : : before {

 border-top-color: #ffdf42;

/* theburundiz/*

____________________________________________________

Conclusion 

So thats what I wanted to share with you guys 👦

And thank you for your time and support.

I wish you guys to enjoy your journey.

Also don't hesitate to share this post with your interested ones.

Gracias