Glowing Bulb Effect using only HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Glowing Bulb Effect using only HTML & CSS. Earlier I have shared a blog on how to create a Glowing Effect on Social Media Buttons using HTML CSS. And now I'm going to create a glowing effect on the Bulb.

In this program (Glowing Bulb Effect using only HTML & CSS), on the webpage, there is a bulb with a glowing effect and a button also to turn on or off the glowing bulb. This is a pure CSS program that means I used only HTML & CSS to create this glowing effect. To create this effect I used two images of the bulb and swap these images on button click.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Glowing Bulb Effect using only HTML & CSS).

Video Tutorial of Glowing Bulb Effect using only HTML & CSS

In this video, you have seen the glowing effect of the bulb and 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 <input type="checkbox"> and combined 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.

Glowing Bulb Effect using only HTML & CSS [Source Codes]

To create this program (Glowing Bulb Effect using only HTML & CSS). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get the images of this program. Click here to download source code files.

I recommend you to download the source code files from the above link instead of copying codes.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Glowing Bulb Effect | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <input type="checkbox" id="btn">
      <img id="bulb-off" src="#">
      <img id="bulb-on" src="#">
      <label for="btn" class="btn">
        <span></span>
      </label>
    </div>
</body>
</html>

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;
}

Thanks for visiting, Keep visiting.

6 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Baba Shankar S N August 11, 2020 at 10:22 PM
Bro for CSS file copy button is not working and after running the code I m not getting the effect
SATHISHSURAJAugust 17, 2020 at 6:43 PM
Bro where did u get bulb image in internet.please could you say where to get...
DakshAugust 28, 2020 at 8:28 AM
Thanks App Apne Subscribers ka kitna khayal rakhte ho coding se laker image aur video sab de ho..................Thank U

Video Tutorial of Glowing Bulb Effect using only HTML & CSS

You might like this:

Glowing Bulb Effect using only HTML & CSS [Source Codes]

Thanks for visiting, Keep visiting.

6 Comments

Post a Comment

About Us

Contact Form