Social Share With SVG

Social Share with svg for cordlife websites

by Thet Hlaing

HTML

<div class="top-social-share">

<a href="https://www.facebook.com/cordlifesg/" target="_blank"><span class="wrapper fb">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><g><path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd"></path></g></svg></span>
</a>

<a href="https://plus.google.com/+cordlifesingapore" target="_blank"><span class="wrapper twitter"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><g><path d="M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336" fill-rule="evenodd"></path></g></svg></span>
</a>

<a href="https://plus.google.com/+cordlifesingapore" target="_blank"><span class="wrapper gplus">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><g><path d="M12 15v2.4h3.97c-.16 1.03-1.2 3.02-3.97 3.02-2.39 0-4.34-1.98-4.34-4.42s1.95-4.42 4.34-4.42c1.36 0 2.27.58 2.79 1.08l1.9-1.83C15.47 9.69 13.89 9 12 9c-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.72-2.84 6.72-6.84 0-.46-.05-.81-.11-1.16H12zm15 0h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2z" fill-rule="evenodd"></path></g></svg></span></a>

</div>

CSS

.top-social-share a
{
  text-decoration:none;
  transform: translateY(7px);
}
.top-social-share a:hover .wrapper{ 
  transform:translateY(-5px);
}

.top-social-share a svg{
  fill: rgb(255, 255, 255); 
  width: 20px; height: 20px;
}
.top-social-share span.wrapper{
   transition:transform 0.2s ease;
    display: inline-block;
    width: 20px;
    height: 20px;
}
.top-social-share .fb{
  background-color:#3B5998;
}
.top-social-share .twitter{
  background-color:#1DA1F2;
}
.top-social-share .gplus{
  background-color:#DC4E41;
}