How to Create lighting Bulb Using Materialize CSS


this article, we will show you How to Create lighting Bulb Using Materialize CSS. Materialize CSS is the framework like bootstrap. But this framework not as popular as bootstrap is. In this tutorial, we will focus on the materialized CSS. This switch is work like on and off button. Anyway, This article will give you the complete understanding of checkbox and switch.

So Now we will create this switch. This is just like a switch which we are using in our homes.

How to Create lighting Bulb Using Materialize CSS

So let’s understand how to create lighting bulb using materialize css.

let’s jump into the code.

Step 1:-

Now first, we will create HTML and CSS file. so we name this files as Index.html and Style.css. In the index.html file, we will create a simple snippet.

After that, we need to link materialize CSS file to index.html file to use material components.

So to link materialize css file we will go to the Materialize website and copy the CDN. You can also use the CDN from this cdnjs website also. we will also link the font-awesome website and custom css file. We are using font awesome to use light bulb icon. and style.css file to create a style for the HTML element

And just after that, we will make that link the script files also. In the script file, we will link Jquery.min.js and also link the materialize.js file

Here is the code to understand this better.

After that,  we will add the font awesome icon in the div and add bulb icon. Then add the material switch.

look out this code. place this code in the body tag.

In this code, we will add the icon to the bulb div class. and then inset switch using the switch class of materializes css.

This code will create the icon and the bulb on the index.html page.

Step 2:-

Now we will create some code into the style.css file. We are using this file for aligning the elements insert some style to it.

import this code into Style.css file.

Above code is just a simple code. In this code, we increased the size of bulb icon and align it an absolute position. and place it where we wanted to place it.

after that, we align the switch button also. To insert this button we used input type checkbox. Using materialize CSS classes checkbox is converted to switch.

Step 3:-

In the third and the last step, we will insert jquery script in the code. Insert this just after the closing Body tag.

let me demonstrate this code.

first, we create the document.ready function. this function will run after the DOM elements is completely loaded.

In this function, we inserted input type checkbox on click event. You can either use this code  $("input[type=checkbox]").click(function(){})  to generate click event.

Then we will check if the checkbox is checked or not. if the checkbox is checked then execute the first if statement either execute the second statement.

If the checkbox is checked then we just add the CSS property of bulb icon. So we will add color and shadow property of CSS. This property will change the color and insert shadow to the icon.

After that in the else statement, we just remove this CSS property from the icon. So we just added color black and shadow property none.

That’s it.
Now run your file and see the effect.
So when you click on the checkbox you will see the lighting bulb effect.
So that’s all for this tutorial see you in the next article with the new tutorial.
Thank You.