Hello, guys in this tutorial we will create an animated share button using HTML CSS & jQuery
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 http-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;
}
Animated Share Button Video Output:
Animated Share Button CodePen Output:
Oldest comments (0)