Up to 70% off on hosting for WordPress Websites $2.95 /mo

Csshint recommends hosting
css Jquery

Social Media Share Button With Gooey Effect Using SVG

Check out This Cool Social Media Share Button With Gooey Effect Using SVG for your projects. Designed by Sasha.

social media svg

social media svg


[code language=”html”]

<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>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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" />



[code language=”css”]

@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 {
justify-content: center;
align-items: center;
height: 100vh;

.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;
i {
margin-top: 10px;

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);



[code language=”js”]


SVG Filter Gooey Share, Social Media Button Snippet