Hello, guys in this tutorial we will create an animated share button using HTML CSS & jQuery
——————– Related Tutorial ——————–
✅ Triangle Loading Animation Using HTML and CSS | Animated Loader With SVG Animation
Watch Now
✅ How to Use Slick Slider For Your Website | Slick Slider With Motion Blur Effect
Watch Now
✅ Profile card design HTML & CSS | Developer Profile Card
Watch Now
✅ Neon Light Button Animation Effects on Hover
Watch Now
✅ YouTube Loading animation using HTML and CSS
Watch Now
———————————————————————————————–
How do share buttons work?
Instead of copying and pasting a link to an item, blog post, or product on the page, a viewer can simply click the button and, often, an auto-populated tweet of Facebook status pops up. These buttons seem like a great idea – after all, they make sharing your content easy Download Report
First, we need to create two files index.html and style.css then we need to do code for it.
Animated Share Button Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sticky Share Buttons</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="sticky_share_btn">
<div class="fixed_share">
<ul class="listing">
<li class="facebook">
<a href="#">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li class="twitter">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="pinterest">
<a href="#">
<i class="fa fa-pinterest"></i>
</a>
</li>
<li class="linkedin">
<a href="#">
<i class="fa fa-linkedin-square"></i>
</a>
</li>
<li class="whatsapp">
<a href="#">
<i class="fa fa-whatsapp"></i>
</a>
</li>
</ul>
<span class="share-toggle">
<i class="fa fa-share-alt"></i>
</span>
</div>
</div>
<script type="text/javascript">
jQuery(".sticky_share_btn").click(function(){
jQuery(".listing").fadeToggle(600);
});
</script>
</body>
</html>
Animated Share Button Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
outline: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.sticky_share_btn {
position: fixed;
left: 30px;
bottom: 30px;
}
.share-toggle,
.fixed_share ul.listing > li {
font-size: 20px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 2px solid;
border-radius: 50%;
transition: all 0.5s ease-in-out;
}
ul.listing {
list-style: none;
display: none;
}
.fixed_share ul.listing > li {
margin-bottom: 10px;
}
.fixed_share ul.listing > li > a {
display: block;
width: 100%;
height: auto;
text-align: center;
}
.share-toggle:hover,
.fixed_share ul.listing > li:hover {
transform: scale(1.1) rotate(360deg);
}
.fixed_share .facebook,
.fixed_share .facebook > a{
color: #4267B2;
}
.fixed_share .twitter,
.fixed_share .twitter > a{
color: #00acee;
}
.fixed_share .pinterest,
.fixed_share .pinterest > a{
color: #E60023;
}
.fixed_share .linkedin,
.fixed_share .linkedin > a{
color: #0e76a8;
}
.fixed_share .whatsapp,
.fixed_share .whatsapp > a{
color: #25D366;
}