Popup Social share button by using HTML, CSS & JAVASCRIPT

Hello Viewers, welcome to my other blog. In this blog, I'm going to create a Popup Social share button by using HTML, CSS & JAVASCRIPT. Earlier I have shared the Responsive Side Navigation bar With transparent effect by using HTML And CSS and now this time I will design a social share button.

These projects are used for diploma and other engineering students like B.E., B-tech, M.E., M-tech to complete their microprojects and other developers to create something new.

The social share button means if you share something on social media that time you can social share button. On the web page, you can see some social icons these icons redirects to social media to share this web information. You share this information but you can also Copy these links.

As you can see on the given image on the webpage, there is one background image you can see above the image one box and write these box 'View model' after clicking these box to show the big box and see some social icons and copy link button.

You might also read :

How Social share button look:

Popup Social share buttons by using HTML, CSS & JAVASCRIPT | Free Source Code

To copy-paste the given codes of this Popup Social share buttons, first of all, you need to create three files, one is an HTML, CSS file and another is a JAVASCRIPT file. You can also download all source code files from the given download button.

Document

HTML CODE:

                <!DOCTYPE html>
                <html lang="en">
                
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Popup Share Modal | CodingNepal</title>
                    <link rel="stylesheet" href="style.css">
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
                    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
                </head>
                
                <body>
                    <button class="view-modal">View Model</button>
                    <div class="popup">
                        <header>
                            <span>Share Model</span>
                            <div class="close"><i class="uil uil-times"></i></div>
                        </header>
                        <div class="content">
                            <p>Share this link via</p>
                            <ul class="icons">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-instagram"></i></a>
                                <a href="#"><i class="fab fa-whatsapp"></i></a>
                                <a href="#"><i class="fab fa-telegram-plane"></i></a>
                            </ul>
                            <p>Or copy link</p>
                            <div class="field">
                                <i class="url-icon uil uil-link"></i>
                                <input type="text" readonly value="https://spiritualcodeofficial.blogspot.com/">
                                <button>Copy</button>
                            </div>
                        </div>
                    </div>
                </body>
                </html>

CSS CODE:

                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: 'Poppins', sans-serif;
                }
                
                body {
                    /* backgro#fe19002f3fb; */
                    background-image: linear-gradient(rgba(6, 3, 36, 0.29), rgba(6, 3, 36, 0.20)), url(1.jpg);
                    background-size: 100% 100vh;
                    background-repeat: no-repeat;
                    color: white;
                }
                
                ::selection {
                    color: rgb(0, 0, 0);
                    background-color: white;
                    border-radius: 10px;
                }
                
                .view-modal,
                .popup {
                    position: absolute;
                    left: 50%;
                }
                
                button {
                    outline: none;
                    cursor: pointer;
                    font-weight: 500;
                    S border-radius: 4px;
                    border: 2px solid transparent;
                    transition: all 0.1s linear, border-color 0.1s linear, color 0.1s linear;
                }
                
                .view-modal {
                    top: 50%;
                    color: #f5f5f5;
                    font-size: 18px;
                    border: 1px solid black;
                    border-bottom: 1px solid white;
                    border-radius: 10px;
                    padding: 10px 25px;
                    background: rgb(1, 2, 28);
                    transform: translate(-50%, -50%);
                }
                
                .popup {
                    background: rgb(1, 2, 28);
                    padding: 25px;
                    border-radius: 15px;
                    top: -150%;
                    max-width: 380px;
                    width: 100%;
                    opacity: 0;
                    pointer-events: none;
                    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
                    transform: translate(-50%, -50%) scale(1.2);
                    transition: top 0s 0.2s ease-in-out, opacity 0.2s 0s ease-in-out, transform 0.2s 0s ease-in-out;
                }
                
                .popup.show {
                    top: 50%;
                    opacity: 1;
                    pointer-events: auto;
                    transform: translate(-50%, -50%) scale(1);
                    transition: top 0s 0s ease-in-out, opacity 0.2s 0s ease-in-out, transform 0.2s 0s ease-in-out;
                }
                
                .popup :is(header,
                .icons,
                .field) {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                
                .popup header {
                    padding-bottom: 15px;
                    border-bottom: 1px solid #ebedf9;
                }
                
                header span {
                    font-size: 21px;
                    font-weight: 600;
                }
                
                header .close,
                .icons a {
                    display: flex;
                    align-items: center;
                    border-radius: 50%;
                    justify-content: center;
                    transition: all 0.3s ease-in-out;
                }
                
                header .close {
                    color: #878787;
                    font-size: 17px;
                    background: #f2f3fb;
                    height: 33px;
                    width: 33px;
                    cursor: pointer;
                }
                
                header .close:hover {
                    background: #ebedf9;
                }
                
                .popup .content {
                    margin: 20px 0;
                }
                
                .popup .icons {
                    margin: 15px 0 20px 0;
                }
                
                .content p {
                    font-size: 16px;
                }
                
                .content .icons a {
                    height: 50px;
                    width: 50px;
                    font-size: 20px;
                    text-decoration: none;
                    border: 1px solid transparent;
                }
                
                .icons a i {
                    transition: transform 0.3s ease-in-out;
                }
                
                .icons a:nth-child(1) {
                    color: #1877F2;
                    border-color: #b7d4fb;
                }
                
                .icons a:nth-child(1):hover {
                    background: #1877F2;
                }
                
                .icons a:nth-child(2) {
                    color: #46C1F6;
                    border-color: #b6e7fc;
                }
                
                .icons a:nth-child(2):hover {
                    background: #46C1F6;
                }
                
                .icons a:nth-child(3) {
                    color: #e1306c;
                    border-color: #f5bccf;
                }
                
                .icons a:nth-child(3):hover {
                    background: #e1306c;
                }
                
                .icons a:nth-child(4) {
                    color: #25D366;
                    border-color: #bef4d2;
                }
                
                .icons a:nth-child(4):hover {
                    background: #25D366;
                }
                
                .icons a:nth-child(5) {
                    color: #0088cc;
                    border-color: #b3e6ff;
                }
                
                .icons a:nth-child(5):hover {
                    background: #0088cc;
                }
                
                .icons a:hover {
                    color: #fff;
                    border-color: transparent;
                }
                
                .icons a:hover i {
                    transform: scale(1.2);
                }
                
                .content .field {
                    margin: 12px 0 -5px 0;
                    height: 45px;
                    border-radius: 10px;
                    padding: 0 5px;
                    border: 1px solid rgb(0, 0, 0);
                    border-bottom: 1px solid #e1e1e1;
                }
                
                .field.active {
                    border-color: #ffffff;
                }
                
                .field i {
                    width: 50px;
                    font-size: 18px;
                    text-align: center;
                }
                
                .field.active i {
                    color: #ffffff;
                }
                
                .field input {
                    width: 100%;
                    height: 100%;
                    border: none;
                    outline: none;
                    font-size: 15px;
                    background: rgb(1, 2, 28);
                    color: white;
                }
                
                .field button {
                    color: #fff;
                    padding: 5px 18px;
                    background: rgb(1, 2, 28);
                }
                
                .field button:hover {
                    background: #13013cc9;
                    color: rgb(255, 255, 255);
                }

JS CODE:

                const viewBtn = document.querySelector(".view-modal"),
                popup = document.querySelector(".popup"),
                close = popup.querySelector(".close"),
                field = popup.querySelector(".field"),
                input = field.querySelector("input"),
                copy = field.querySelector("button");
    
            viewBtn.onclick = () => {
                popup.classList.toggle("show");
            }
            close.onclick = () => {
                viewBtn.click();
            }
    
            copy.onclick = () => {
                input.select(); //select input value
                if (document.execCommand("copy")) { //if the selected text copy
                    field.classList.add("active");
                    copy.innerText = "Copied";
                    setTimeout(() => {
                        window.getSelection().removeAllRanges(); //remove selection from document
                        field.classList.remove("active");
                        copy.innerText = "Copy";
                    }, 3000);
                }
            }

Download Files

Popup Social share button by using HTML, CSS & JAVASCRIPT | Spiritual_codes

Post a Comment

Contact Form