SVG Filter Gooey Share Social Media Buttons

I always share interesting and beautiful stuff on this blog.

If you see my previous post you will see that all posts are useful for web designers and for those people who are having website.

Ok leave that let me tell you what we are going to do in our today's article.

In this articles I am going to share with you the source code of SVG Filter Gooey share social media buttons.

These social media buttons are having an animation that animation is called gooey effect.

If you are web designer then you will know better than me what is gooey effect. You can also search for this on google.

You can also use these social media buttons in your blogger blog simply by copying the code provided below and combining them into a single file and then implement that code wherever you want to implement these social media buttons.

As you know the HTML markup is required for that so we should have some HTML markup first. Below is the HTML markup.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files only if there is any error with the working of code.

There are some external files used in the code provided below you can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

HTML markup for Svg Filter Gooey Share Social Media Buttons :

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><div class="container"><button class="button">Share</button><div class="social twitter"><a href="#" onclick="share('twitter')" target="_blank"><i class="fa fa-twitter"></i></a></div><div class="social facebook"><a href="#" onclick="share('facebook')" target="_blank"><i class="fa fa-facebook"></i></a></div><div class=" social linkedin"><a href="#" onclick="share('gplus')" target="_blank"><i class="fa fa-linkedin"></i></a></div><div class="social reddit"><a href="#" onclick="share('reddit')" target="_blank"><i class="fa fa-reddit"></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 00 1 0 0 00 0 1 0 00 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'><-e30/script> 

Attribute	Belongs to	Description
charset	<meta>, <script>	Specifies the character encoding
class	Global Attributes	Specifies one or more classnames for an element (refers to a class in a style sheet)
href	<a>, <area>, <base>, <link>	Specifies the URL of the page the link goes to
id	Global Attributes	Specifies a unique id for an element
lang	Global Attributes	Specifies the language of the element's content
onclick	All visible elements.	Script to be run when the element is being clicked
rel	<a>, <area>, <link>	Specifies the relationship between the current document and the linked document
src	<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>	Specifies the URL of the media file
target	<a>, <area>, <base>, <form>	Specifies the target for where to open the linked document or where to submit the form

I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

In the code provided above i have added some icons using fontawesome css library that's why i have included the fontawesome library if you will remove it then you will see squares instead icons.

This is a simple HTML markup in this markup I have included only 4 social media buttons you can also increase them or decrease them according to your requirements you will have to copy and paste the code again to increase the button count.
Without CSS our this script (Svg Filter Gooey Share Social Media Buttons) will never look pleasing. So here we are, our HTML markup is ready now we have to customize our HTML markup and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Svg Filter Gooey Share Social Media Buttons you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Svg Filter Gooey Share Social Media Buttons :

.button{z-index:99;position:absolute;display:flex;justify-content:center;align-items:center;width:240px;height:40px;background:linear-gradient(45deg, #B388EB, #8093F1);border-radius:20px;color:#FFF;font-size:20px;letter-spacing:1px;font-weight:200;border:none;outline:none}.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}.linkedin{background:#0077b5}.reddit{background:#ff4500}.clicked{opacity:1;transition:1.2s all ease;transform:translateY(56px)}

The width of this button is not responsive you can make a responsive yourself whatever you like in my case I like only fixed width that's why I haven't made it responsive.

If you make the button responsive then you have to adjust all the settings that's why I haven't done that.

So we have written HTML markup and customised it using CSS and now we will add some functionality in this project (Svg Filter Gooey Share Social Media Buttons) to make it work as we want it to be.

To make this project (Svg Filter Gooey Share Social Media Buttons) work properly for that we will use JavaScript or jquery in some cases which is a javascript library.

This is the javascript code for our project you can also copy it by simple clicking once and code will be copied automatically.

JavaScript Code for Svg Filter Gooey Share Social Media Buttons :

$(".button").click(function(){
$(".social.twitter").toggleClass("clicked");
$(".social.facebook").toggleClass("clicked");
$(".social.linkedin").toggleClass("clicked");
$(".social.reddit").toggleClass("clicked");
});
function share(u){
var x = "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left="+((screen.width/2)-300),
s = "Hey Buddy Read this article its awesome i think you will like it : ";
if(u=="facebook"){
window.open("https://facebook.com/sharer.php?t="+document.title+"&u="+window.location.href, "", x);
}else if(u=="twitter"){
window.open("https://twitter.com/share?text="+document.title+"&url="+window.location.href, "", x);
}else if(u=="gplus"){
window.open("https://plus.google.com/share?url="+window.location.href, "", x);
}else if(u=="reddit"){
window.open("http://www.reddit.com/submit?url="+window.location.href+"&title="+document.title, "", x);
}else if(u=="linkedin"){
window.open("https://www.linkedin.com/cws/share?url="+window.location.href, "", x);
}else if(u=="email"){
window.open("mailto:?subject="+document.title+"&body="+s+window.location.href, "", x);
}else if(u=="pinterest"){
window.open("https://pinterest.com/pin/create/button/?description="+document.title+"&media=https://s0.wp.com/i/blank.jpg&url="+window.location.href, "", x);
}else if(u=="blogger"){
window.open("https://www.blogger.com/blog-this.g?n="+document.title+"&t="+s+"&u="+window.location.href, "", x);
}else if(u=="tumblr"){
window.open("https://www.tumblr.com/share?t="+document.title+"&u="+window.location.href, "", x);
}else if(u=="whatsapp"){
window.open("https://web.whatsapp.com/send?text="+window.location.href, "", x);
}else if(u=="vk"){
window.open("https://vk.com/share.php?url="+window.location.href, "", x);
}else if(u=="digg"){
window.open("https://digg.com/submit?url="+window.location.href, "", x);
}else if(u=="whatsapp"){
window.open("https://meneame.net/submit.php?url="+window.location.href, "", x);
}
}

I have used some javascript/Jquery BuiltIn functions in the above code here is the list of them with description.

Function	Description
click()	Attaches/Triggers the click event
on()	Attaches event handlers to elements

The JavaScript code provided above is a mixture of jQuery and JavaScript. Jquery code is used to toggle the class of all the social media buttons and JavaScript code is used to make these share button work properly by opening a popup window onclick event if you are a web designer or web developer you will know it well if you see the JavaScript code above.

If you want any other social media buttons be added you simply have to add onclick attribute and you will see that share function is already created with bunch of social media sites you can apply anyone that you like.

Conclusion :

So here we are, We have done and our project Svg Filter Gooey Share Social Media Buttons is ready now you can copy and combine all the codes provided above into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Svg Filter Gooey Share Social Media Buttons) File :

Svg Filter Gooey Share Social Media Buttons.zip

Download Started
( If Not Click Me )

File Size 4.08 KB

Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

That's it i thing you may have got your answer and i think this will help you alot if it did leave your feedback in the comment section below i will be glad to hear from you.
Thank you !

source:softwebtuts.com