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