-->
Home
Posts

Make Glowing Bulb Using HTML/CSS with Code



Hello Everyone, Today you’ll find out how to form a Glowing Bulb Effect using only HTML and CSS. 

So in this HTML  program {- Glowing Bulb using HTML and CSS -}, on the webpage/website, there is a bulb with a glowing effect and a button is also there Just Below the Blub to show "on" or "off " the glowing bulb. this is a pure HTML CSS program meaning I used only  HTML and CSS to make this glowing blub without any javascript file. to make this blub I just used two images of the bulb and swap these images on button clicks.

If you’re feeling difficult to know what I'm saying. So That's Why I provided The Source Code And a  Cool Thing is it is an Independent SOurce Code Means You No need To Create a style.css File and No Need to Download the Pics Just Copy It And Paste It In Your Code Editor


(Source Code) Glowing Bulb Using HTML/CSS 


To create this program (Glowing Bulb using HTML and CSS). First, you no need to create two Files You Just Create an HTML FILE and Named It as "index.html" After you Created The File just paste the following codes into your file. i again Repeat 
  • create an HTML file with the name of index.html and paste the given codes in your HTML file
  • Remember, you’ve to form a file with .html extension and also the images that are used on this glowing bulb won’t appear.
  • And Final Step is to Enjoy Your Code Do some changes to improve it From your Own Side



<!DOCTYPE html>
<!-- The YOURCODE -->
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Glowing Bulb Effect | YOURCODE </title>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
    /* THis Source COde Downloaded From TheYourCode
            "http://theyourcode.blogspot.com/"
    */

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

    /* THis Source COde Downloaded From TheYourCode
            "http://theyourcode.blogspot.com/"
    */

    .wrapper {
      width: 450px;
      height: 500px;
      position: relative;
    }

    img {
      margin-top: -50px;
      height: 450px;
      width: 100%;
      position: absolute;
    }

    /* THis Source COde Downloaded From TheYourCode
            "http://theyourcode.blogspot.com/"
    */
    img#bulb-on {
      opacity: 0;
      animation: glow 3s linear infinite;
      transition: all 1s ease;
    }

    @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%);
    }

    /* THis Source COde Downloaded From TheYourCode
            "http://theyourcode.blogspot.com/"
    */

    .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 1s ease;
    }

    .btn span:hover {
      background: #fff;
      color: #111;
    }

    #btn:checked~.btn span {
      background: #111;
      color: #fff;
    }

    .btn span:before {
      content: "Turn Off";
    }

    #btn:checked~img#bulb-on {
      animation: none;
    }


    #btn:checked~.btn span:hover {
      background-color: #fff;
      color: #111;
    }

    #btn:checked~.btn span:before {
      content: "Turn on";
    }

    .wrapper input {
      display: none;
    }

    /* THis Source COde Downloaded From TheYourCode
            "http://theyourcode.blogspot.com/"
    */
  </style>
</head>

<body>
  <!-- THis Source COde Downloaded From TheYourCode
  "http://theyourcode.blogspot.com/" -->
  <!-- Header Starts-->
  <!--Remove header To Remove Our extra Sentences-->
  <header>
    <div>
      <h1 style="color: white; vertical-align: top ">
        Glowing Bulb Effect using only HTML & CSS { With Source Codes}
    </h1>
  <br>
  <h2 style="margin-left: 50%; color: white; vertical-align: top; padding: 0;">
-TheYourCode
</h2>
    </div>
  </header>
  <!-- Header Ends-->


  <!-- Blub Area Starts -->
  <div class="wrapper">
    <input type="checkbox" id="btn">
    <img id="bulb-off" src="https://blogger.googleusercontent.com/img/a/AVvXsEgR6iEB4t4vaOAHGQ2rsc2eDMgecFFfxRr7t5XroopAJuwTnNadawJjCL-YVSYwtAd_lrbCB8YbW6ZFbL31DGUtyNartTSfNZQ_-i11_GNcSTYO2DKFwPNY1PDndWgYKr4GB67Dp0PCZjwEWy_Tmk6KCB4sm09AVVUZ6K9QoDYD2MH10CUpF32E66AH8w=s395"
alt="  THis Source COde Downloaded From TheYourCode http://theyourcode.blogspot.com/">
    <img id="bulb-on" src="https://blogger.googleusercontent.com/img/a/AVvXsEjQkdZsc3nI8sutKC8WcxqkaYiWaOVO4nmECCNjc6aJ8lZw0Tla3UazmAF6l-yMdMDb9I81fPQAojdgZHweBaClFIuT36zGeHilGhbuw22doro792yvkh9_cLkqP8O0QpA2HtV9qV312Ue-TXWJ6mPTc0sWi-zxxTpVT7gdI_lsmfTX2P5qeWjm_nKxow=s395"
alt="  THis Source COde Downloaded From TheYourCode http://theyourcode.blogspot.com/">
    <label for="btn" class="btn">
      <span></span>
    </label>
  </div>

  <!-- Blub Area Ends -->
</body>

</html>




So Hope You Like This Project For More Projects stay Tuned

Post a Comment