Make Popup button Using Html CSS JAVAScript || HTML+CSS+JAVA

In this article we are make a "Popup Button Using Html CSS and Java" . It is make your web page completly unique and more attractive for your user.

HTML Code

First We are using hmtl code for our project bcoz it is the primary language for any web page.

<button class="popup-button" id="main-button">Click Me</button>

This is the Primary button for our web page use this code anywhere in your own code. after then we are creating popup screen for our web page

 

<!-- Main Popup -->

    <div class="popup-container" id="main-popup">

        <div class="popup">

            <button class="close-button" id="close-main-popup">X</button>

            <button class="popup-button" id="join-us-button">Join Us</button>

            <br><br><br>

            <button class="popup-button" id="follow-us-button">Follow Us</button>

        </div>

    </div>

This is the main Popup window , in our code we are add 2 buttons "Join us" & "Follow Us". You can use more buttons accordnig to your requirement.

Now we are add another 2 popup window for each button. In my case i have 2 buttons so i can make only two popup screen, you can adjust it according to yourself.

    <!-- Join Us Popup -->

    <div class="popup-container" id="join-us-popup">

        <div class="popup join-us-popup">

            <button class="close-button" id="close-join-us-popup">X</button>

            Your Content for Join Us goes here.

        </div>

    </div>

    <!-- Follow Us Popup -->

    <div class="popup-container" id="follow-us-popup">

        <div class="popup follow-us-popup">

            <button class="close-button" id="close-follow-us-popup">X</button>

            You Can Edit This Container according to yourself

        </div>

    </div>

So this is our complete HTML Code. In my case i can also use Close button with each popup screen to close a Popup screen/window.

CSS Code 

Now we are add some CSS effect for our every elements. You can also modifie this CSS.

      

  body {

            background-color: #111;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

        }

This is code for our Body content. Here we are using "justify-content:center" this is make sure that our all content is added in body center. You can adjust this according to your button position

        .popup-button {

            background-color: #0ff;

            border: none;

            color: #000;

            font-size: 24px;

            padding: 15px 30px;

            cursor: pointer;

            border-radius: 10px;

            animation: neon-glow 1.5s ease-in-out infinite;

        }

        .popup-container {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.7);

            z-index: 1;

            justify-content: center;

            align-items: center;

        }

        .popup {

            background-color: #111;

            border: 2px solid #0ff;

            border-radius: 10px;

            padding: 40px;

            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);

            position: relative;

        }

        .close-button {

            position: absolute;

            top: 10px;

            right: 10px;

            background: none;

            border: none;

            color: #0ff;

            font-size: 20px;

            cursor: pointer;

        }

        @keyframes neon-glow {

            0% {

                box-shadow: 0 0 5px 5px #0ff;

            }

            50% {

                box-shadow: 0 0 20px 20px #0ff;

            }

            100% {

                box-shadow: 0 0 5px 5px #0ff;

            }

        }

This code for button animation and another CSS effects.

Now we are adding diffrent CSS Style for our Two buttons.

  /* Unique CSS for Join Us popup */

        .join-us-popup {

            background-color: greenyellow;

            border: 2px solid #0f0;

            border-radius: 10px;

            padding: 100px;

            box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);

        }

        /* Unique CSS for Follow Us popup */

        .follow-us-popup {

            background-color: deepskyblue;

            border: 2px solid #f0f;

            border-radius: 10px;

            padding: 100px;

            box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);

        }

JAVA Script Code 

Now we are adding some functioning for our web page buttons, like Close button working , Popup Window showing.

const mainButton = document.getElementById('main-button');

        const mainPopup = document.getElementById('main-popup');

        const closeMainPopup = document.getElementById('close-main-popup');

        const joinUsButton = document.getElementById('join-us-button');

        const followUsButton = document.getElementById('follow-us-button');

        const joinUsPopup = document.getElementById('join-us-popup');

        const closeJoinUsPopup = document.getElementById('close-join-us-popup');

        const followUsPopup = document.getElementById('follow-us-popup');

        const closeFollowUsPopup = document.getElementById('close-follow-us-popup');

        mainButton.addEventListener('click', () => {

            mainPopup.style.display = 'flex';

        });

        closeMainPopup.addEventListener('click', () => {

            mainPopup.style.display = 'none';

        });

        joinUsButton.addEventListener('click', () => {

            joinUsPopup.style.display = 'flex';

        });

        closeJoinUsPopup.addEventListener('click', () => {

            joinUsPopup.style.display = 'none';

        });

        followUsButton.addEventListener('click', () => {

            followUsPopup.style.display = 'flex';

        });

        closeFollowUsPopup.addEventListener('click', () => {

            followUsPopup.style.display = 'none';

        });

This is our new project for you copy this code enjoy .