DEV Community

Cover image for How to make a share button html | Awesome button effect CSS | Modern web Coding Tutorial
Modern Web
Modern Web

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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');
})
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
bambule___ profile image
Bambulé

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