SVG Filter Gooey Share, Social Media Button
How do I make an svg filter gooey share, social media button?
Click to see the goo magic :DKinda inspired from this Dribbble shot. What is a svg filter gooey share, social media button? How do you make a svg filter gooey share, social media button? This script and codes were developed by Sasha on 12 June 2022, Sunday.
SVG Filter Gooey Share, Social Media Button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Filter Gooey Share, Social Media Button</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="button">Share</div> <div class="social twitter"><a href="https://twitter.com/sa_sha26" target="_blank"><i class="fa fa-twitter"></i></a></div> <div class="social facebook"><i class="fa fa-facebook"></i></div> <div class=" social google"><i class="fa fa-google-plus"></i></div> <div class="social youtube"><a href="https://www.youtube.com/channel/UCCATAa8MWoBuH-sR_Jlx29A" target="_blank"><i class="fa fa-youtube"></i></a></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> <feBlend in="SourceGraphic" in2="goo" /> </filter> </defs>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
SVG Filter Gooey Share, Social Media Button - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600");
body { font-family: 'Source Sans Pro', sans-serif; background: linear-gradient(#B388EB, #8093F1, #00B2CA); background: #4A5759; overflow: hidden;
}
.container { display: flex; justify-content: center; align-items: center; height: 100vh; filter: url("#goo");
}
.button { z-index: 99; position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 40px; background: linear-gradient(45deg, #B388EB, #8093F1); border-radius: 20px; color: #FFF; font-size: 20px; letter-spacing: 1px; font-weight: 200;
}
.social { opacity: 0; position: relative; margin: 8px; width: 40px; height: 40px; border-radius: 100%; display: inline-block; color: #FFF; font-size: 20px; text-align: center;
}
.social i { margin-top: 10px;
}
.social a { color: #FFF;
}
.twitter { background: #00aced;
}
.facebook { background: #3b5998;
}
.google { background: #dd4b39;
}
.youtube { background: #bb0000;
}
.clicked { opacity: 1; transition: 1.2s all ease; transform: translateY(56px);
}
SVG Filter Gooey Share, Social Media Button - Script Codes JS Codes
$(".button").click(function(){ $(".social.twitter").toggleClass("clicked"); $(".social.facebook").toggleClass("clicked"); $(".social.google").toggleClass("clicked"); $(".social.youtube").toggleClass("clicked");
})
![SVG Filter Gooey Share, Social Media Button - Script Codes](http://shots.codepen.io/sashatran/pen/WpbGEE-512.jpg)
Developer | Sasha |
Username | sashatran |
Uploaded | June 12, 2022 |
Rating | 4.5 |
Size | 3,275 Kb |
Views | 44,528 |
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 |
Pages of 2017 | 3,411 Kb |
CSS Girl | 3,535 Kb |
VueJS Todo List | 2,158 Kb |
Flexgrow illustration | 3,503 Kb |
CSS Gallery Hover Effect | 2,938 Kb |
Svg Stars Experiment | 4,245 Kb |
VueJS Zip Code Finder | 3,554 Kb |
Instagram Inspired Loader | 2,271 Kb |
Input UI Animation | 3,234 Kb |
Animated CSS Tooltip | 2,818 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 |
Spin | Elalemanyo | 8,262 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
TestTube CSS | EZPK | 2,710 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
Twitch API | Coderpilot | 3,412 Kb |
Countdown Timer | Massiebn | 3,001 Kb |
Awesome | Samarthpd | 2,901 Kb |
Header | Er40 | 1,542 Kb |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 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!