How to make a share button html | Awesome button effect CSS | Modern web Coding Tutorial

Hello, I am kunaal, glad you are here. Today we will see how to make share button for your website. We'll see how can we make a share options in HTML for our website.

Share Button is very useful in this days as everything is online and everybody uses social media. Share button is used to enable sharing image, audio, link or anything. We'll make share options UI only in this article.

So without wasting more time let's start. You can see the demo of the button in the video below or you can watch video for better understanding.

Video Tutorial

Let's Code This

So to start we need 3 files HTML, CSS and JS file. Create an index.html file and paste this code.

<div class="container">
        <button class="share-btn">
            <i class="fas fa-share-alt"></i>
        </button>
        <div class="share-options">
            <p class="title">share</p>
            <div class="social-media">
                <button class="social-media-btn"><i class="far fa-folder-open"></i></button>
                <button class="social-media-btn"><i class="fab fa-whatsapp"></i></button>
                <button class="social-media-btn"><i class="fab fa-instagram"></i></button>
                <button class="social-media-btn"><i class="fab fa-twitter"></i></button>
                <button class="social-media-btn"><i class="fab fa-facebook-f"></i></button>
                <button class="social-media-btn"><i class="fab fa-linkedin-in"></i></button>
            </div>
            <div class="link-container">
                <p class="link">https://example.com/share</p>
                <button class="copy-btn">copy</button>
            </div>
        </div>
    </div>

This is our share button structure now let's style this. For that create a style.css file. Inside that code this.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff7d7d;
}

.share-btn{
    position: relative;
    border: none;
    background: #fff;
    color: #ff7d7d;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 30px;
    padding-top: 2.5px;
    padding-right: 3px;
    cursor: pointer;
    z-index: 2;
}

.share-options{
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: auto;
    height: auto;
    transform-origin: bottom left;
    transform: scale(0);
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: rgba(15, 15, 15, 0.5);
    color: #fff;
    padding: 20px;
    font-family: 'roboto';
    transition: .5s;
    transition-delay: .5s;;
}

.share-options.active{
    transform: scale(1);
    transition-delay: 0s;
}

.title{
    opacity: 0;
    transition: .5s;
    transition-delay: 0s;
    font-size: 20px;
    text-transform: capitalize;
    border-bottom: 1px solid #fff;
    width: fit-content;
    padding: 0 20px 3px 0;
}

.social-media{
    opacity: 0;
    transition: .5s;
    transition-delay: 0s;
    width: 250px;
    height: 120px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0;
}

.social-media-btn{
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    line-height: 50px;
    font-size: 25px;
    cursor: pointer;
    margin: 0 5px;
    text-align: center;
}

.social-media-btn:nth-child(1){
    background: #FFA654;
}

.social-media-btn:nth-child(2){
    background: #25D366;
}

.social-media-btn:nth-child(3){
    background: #E4405F;
}

.social-media-btn:nth-child(4){
    background: #1DA1F2;
}

.social-media-btn:nth-child(5){
    background: #1877F2;
}

.social-media-btn:nth-child(6){
    background: #0A66C2;
}

.link-container{
    opacity: 0;
    transition: .5s;
    transition-delay: 0s;
    width: 100%;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 40px;
    background-color: #fff;
    overflow: hidden;
    padding: 0 10px;
}

.link{
    width: 80%;
    height: 100%;
    line-height: 40px;
    color: #000;
}

.copy-btn{
    position: absolute;
    right: 0;
    cursor: pointer;
    background: #000;
    color: #fff;
    border: none;
    height: 100%;
    width: 30%;
    text-transform: capitalize;
    font-size: 16px;
}

.share-options.active .title,
.share-options.active .social-media,
.share-options.active .link-container{
    opacity: 1;
    transition: .5s;
    transition-delay: .5s;
}

We are done with styles also. Now we need JS to toggle our share button's active class. Now create app.js and code this.

const shareBtn = document.querySelector('.share-btn');
const shareOptions = document.querySelector('.share-options');

shareBtn.addEventListener('click', () => {
    shareOptions.classList.toggle('active');
})

That's all We are done with our share button. Great work.

Thank you for reading If you like the article show your support by following me. And if you have any doubts feel free to ask me in comments.

Have a nice day.

You may like reading these.

1. 🔥Awesome 3d navbar you have never seen it before 🔥🔥

2. 🔥🔥backend for login form. Easy to make fully working form

3.Awesome animation 🔥🔥 you have never seen it before

4.Awesome header design you have never seen it before

Source Code, Follow me on Instagram, Subscribe my youtube channel

Comments

[Bambulé]

Looks great! But unfortunately I can´t find the attached file with the icons, you talked in the video about (1:18min.)?