How To Create A Glowing Bulb Effect With Switch ON/OFF using only HTML & CSS.

1
Glowing Bulb With Switch

Hello readers, I am OMBHUSAL from codewithnepal.com in Today’s blog, you’ll learn How To Create A Glowing Bulb Effect With the Switch ON/OFF using only HTML & CSS. Previously, I shared a blog on How To Create Skeleton Loading Screen Animation Using Only HTML & CSS. And now I’m going to create a glow effect on the bulb.

In this program (Glowing Bulb Effect using HTML and CSS only), on the web page, there is a light bulb with a light effect and a button to also turn the incandescent bulb on or off. This is a pure CSS program which means I only used HTML and CSS to create this glowing effect. To create this effect, I used two images of light bulbs and swapped these images by clicking the button.

You Might This Blog:

I hope you have understood the basic codes behind creating this program. To create this button clickable and change the state of the bulb on click, I used HTML and combined it with the label. You can also use JavaScript to change the state of the bulb.

If you’re a beginner and you only HTML & CSS then you can also create this type of effect and expand your learning skills so far. If you like this program (Glowing Bulb Effect using only HTML & CSS) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

To Create A Glowing Bulb With Switch ON/OFF Effect Follow These Steps:

Step 1

To create this program: (  (Glowing Bulb Effect using HTML and CSS only)  ). Initially you need to create two files one HTML (.html) and another CSS file (.css). After creating these files, just paste the following codes into your VS IDE code sample and create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<!-- Created By CodeWithNepal - www.codewithnepal.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glowing Bulb Effect | CodeWithNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <input type="checkbox" id="btn">
      <img id="bulb-off" src="bulb-off.png">
      <img id="bulb-on" src="bulb-on.png">
      <label for="btn" class="btn">
        <span></span>
      </label>
    </div>
  </body>
</html>

Step 2

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #111;
}
.wrapper{
  width: 450px;
  height: 500px;
  position: relative;
}
img{
  margin-top: -50px;
  height: 450px;
  width: 100%;
  position: absolute;
}
img#bulb-on{
  opacity: 0;
  animation: glow 3s linear infinite;
}
@keyframes glow {
  0%{
    opacity: 1;
  }
  5%{
    opacity: 1;
  }
  70%{
    opacity: 1;
  }
  74%{
    opacity: 0;
  }
  80%{
    opacity: 1;
  }
  84%{
    opacity: 0;
  }
  90%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}
.btn{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.btn span{
  height: 50px;
  width: 180px;
  display: block;
  text-align: center;
  line-height: 48px;
  background:none;
  color: #fff;
  text-transform: uppercase;
  font-size: 20px;
  cursor: pointer;
  border: 2px solid #fff;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.btn span:hover{
  background: #fff;
  color: #111;
}
#btn:checked ~ .btn span{
  background: #fff;
  color: #111;
}
.btn span:before{
  content: "Turn Off";
}
#btn:checked ~ img#bulb-on{
  animation: none;
}
#btn:checked ~ .btn span:before{
  content: "Turn on";
}
.wrapper input{
  display: none;
}

Output Of A Glowing Bulb

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here