Social Share Button
How do I make an social share button?
Just another share button.. What is a social share button? How do you make a social share button? This script and codes were developed by Kyle Lavery on 26 August 2022, Friday.
Social Share Button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Share Button</title> <style>
body { background: #62BFF5; overflow: hidden; height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
}
</style> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="share"> <div class="fab no"></div> <div class="fab no"></div> <div class="fab no"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Social Share Button - Script Codes CSS Codes
.share, .share:before, .share:after, .fab { height: 56px; width: 56px; border-radius: 50%; position: absolute; cursor: pointer;
}
.share { position: relative;
}
.share:before, .share:after { content: ''; will-change: transform;
}
.share:before { background: url(https://cbwconline.com/IMG/Codepen/Plus-Light-Blue.svg) center/28px no-repeat; z-index: 5; -webkit-transition: 0.3s; transition: 0.3s;
}
.share:after { background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); z-index: -1; -webkit-transition: 0.39s; transition: 0.39s; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.share.active:before { -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.share.active:after { width: 3000px; height: 3000px;
}
.fab { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); -webkit-transition: 0.3s; transition: 0.3s; -webkit-animation: 0.3s down forwards; animation: 0.3s down forwards; opacity: 0; will-change: animation;
}
.fab:nth-child(1) { background: #1DA1F2 url(https://cbwconline.com/IMG/Codepen/Twitter.svg) center/28px no-repeat; top: -132px;
}
.fab:nth-child(2) { background: #46629E url(https://cbwconline.com/IMG/Codepen/Facebook.svg) center/28px no-repeat; top: -66px;
}
.fab:nth-child(3) { background: #DB4437 url(https://cbwconline.com/IMG/Codepen/Google.svg) center/28px no-repeat;
}
.fab.active { -webkit-animation: 0.48s up forwards; animation: 0.48s up forwards;
}
.fab.active:nth-child(1) { -webkit-animation-delay: 0.39s; animation-delay: 0.39s;
}
.fab.active:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
.fab.no { -webkit-animation: none; animation: none;
}
@-webkit-keyframes up { 50% { -webkit-transform: translateY(-170%); transform: translateY(-170%); } 100% { opacity: 1; -webkit-transform: translateY(-130%); transform: translateY(-130%); }
}
@keyframes up { 50% { -webkit-transform: translateY(-170%); transform: translateY(-170%); } 100% { opacity: 1; -webkit-transform: translateY(-130%); transform: translateY(-130%); }
}
@-webkit-keyframes down { 0% { opacity: 1; -webkit-transform: translateY(-130%); transform: translateY(-130%); } 100% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); top: 0; }
}
@keyframes down { 0% { opacity: 1; -webkit-transform: translateY(-130%); transform: translateY(-130%); } 100% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); top: 0; }
}
Social Share Button - Script Codes JS Codes
$(".share").on('click', function(e) { $(".fab").removeClass("no"); if(e.target != this) return; $('.share, .fab').toggleClass("active");
});
Developer | Kyle Lavery |
Username | koenigsegg1 |
Uploaded | August 26, 2022 |
Rating | 4.5 |
Size | 3,219 Kb |
Views | 32,384 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Material Design Signup Interaction | 4,138 Kb |
CSS Material Design Checkboxes | 2,660 Kb |
Idea | 8,917 Kb |
Radio-Style Selector | 3,153 Kb |
Header Navigation Menu | 3,629 Kb |
Error page | 2,033 Kb |
CSS Design Awards Button In CSS | 3,350 Kb |
Gradient Shadows | 3,236 Kb |
Button | 2,282 Kb |
Fixed FAB with Slide-up Back to Top Button | 3,607 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Parallax scrolling scene | Iharosi | 2,485 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
Price | Catcode | 2,623 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!