Hello readers, welcome to my other blog, today in this blog I’m going to create an Animated Share Button with help of HTML & CSS only. In a previous blog, I have shared How to Create a Website in HTML & CSS and I’m going to create an animated share button.
Simply we can understand that share button means a button on the screen which help user to send images, videos, music to the friends through the social media. There may be any social media like Facebook, Twitter, Instagram, YouTube, and others. Nowadays share buttons are used the maximum website and mobile app to make user’s sharing convenient.
As you can see on the given image of the share button with social media icons on the webpage. Actually, in the first in this program[Animated Share Button], there is only one button on the screen, when that button is clicked upper tooltip appears with these four social media icons with smooth sliding animation from top to button which really awesome. When this social media button hovered three colors are changed into the original color and these icons move a little upside.
If you are feeling difficulties understanding that what I’m saying, you can watch a full video tutorial of this program[Share Button Animation with Social Media Icons], which is given below.
Full Video of Animated Share Button using only HTML & CSS
As you have seen in the video of this program. At first, three is a button with text share, and when that button is clicked one tooltip appears smoothly down to the close of that share button with some social media icons. When we hover these four social media icons there color was changed into original color.
And have you guys notice that the share button with text share was changed into cancel. When we clicked on the cancel button that social media icon tooltip id disappeared and the cancel button changed into share. To control that tooltip of social media icons I have used an HTML input checkbox and to do checked or unchecked the input I have used the label tag of the HTML
Friend if you know basic HTML and CSS then you can easily make this program[Animated Share Button], or if you have knowledge of JavaScript you can add more functions to this program as you like. Those my friend who are feeling difficulty to create this program, don’t worry I have provided all source codes given below and this is free, you can use this program as your purpose.
You Might Like This:
Animated Share button [Source Codes]
To paste the given codes of this program [ Animated Share Button Design], first of all, you need to create two files one is an HTML file and another is a CSS file. After creating these two files you can easily copy-paste the given codes in your HTML & CSS files. You can also download all source code files directly from the given “Download Button”.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Animated Share Button | CodingLab </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">
</head>
<body>
<div class="mainbox">
<input type="checkbox" id="check">
<label for="check">Share</label>
<div class="media-icons">
<a href="#"><i class="fab fa-facebook"></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-youtube"></i></a>
</div>
</div>
</body>
</html>
@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{
background: #0984e3
}
.mainbox{
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
}
label{
position: relative;
background: #fff;
height: 50px;
width: 150px;
border-radius: 35px;
line-height: 50px;
text-align: center;
font-size: 22px;
font-weight: 500;
text-transform: uppercase;
display: block;
color: #0984e3;
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
label:hover{
letter-spacing: 1px;
}
label::before{
content: 'Cancel';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: #fff;
border-radius: 35px;
opacity: 0;
}
#check{
display: none;
}
#check:checked ~ label::before{
opacity: 1;
}
.media-icons{
position: absolute;
left: 50%;
top: -120px;
transform: translateX(-50%);
background: #fff;
width: 140%;
height: 110%;
text-align: center;
display: flex;
align-items: center;
justify-content: space-evenly;
border-radius: 35px;
padding: 4px;
z-index: 1;
opacity: 0;
pointer-events: none;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
#check:checked ~ .media-icons{
opacity: 1;
pointer-events: auto;
top: -84px;
}
.media-icons::before{
content: '';
width: 18px;
height: 18px;
position: absolute;
left: 50%;
background: #fff;
bottom: -9px;
transform: translateX(-50%) rotate(45deg);
z-index: -1;
}
.media-icons a{
font-size: 22px;
color: #0984e3;
transition: all 0.3s ease;
}
.media-icons a:hover{
transform: translateY(-2px);
}
.media-icons a:nth-child(1):hover{
color: #426782;
}
.media-icons a:nth-child(2):hover{
color: #1da1f2;
}
.media-icons a:nth-child(3):hover{
color: #e1306c;
}
.media-icons a:nth-child(4):hover{
color: #ff0000;
}
If you face any difficulties while creating your Share Button or your code is not working as expected, you can download the source code files for this Animated Share Button for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
