SVG Stroke Animation is an easy, lightweight Pure CSS Social sharing plugin with amazing animation effect, surely it will lead your user to stick once.
See the Pen Social Sharing Button by Mohammad Ishtiaq (@Mybloggertricks) on CodePen.
1. Add HTML Markup
<div id="wrapper">
<div id="share"><span>Share : </span>
<a href="#" class="container twitter">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="50"/>
</svg>
<div class="social">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#" class="container facebook">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="50"/>
</svg>
<div class="social">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#" class="container google">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="50"/>
</svg>
<div class="social">
<i class="fa fa-google-plus"></i>
</div>
</a>
<a href="#" class="container pinterest">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="50"/>
</svg>
<div class="social">
<i class="fa fa-pinterest"></i>
</div>
</a>
<a href="#" class="container linkedin">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="50"/>
</svg>
<div class="social">
<i class="fa fa-linkedin"></i>
</div>
</a>
</div>
</div>
2. Change the # with your respective social sharing fuctions.
3. CSS is as following:
<style>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
</style>
#wrapper {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 100px;
#share {
background: rgba(0,0,0,0.5);
position: relative;
margin:0 auto;
width: 620px;
span {
width: 100px;
height: 100px;
float: left;
line-height:100px;
text-align: center;
color:white;
}
}
}
.container {
position: relative;
display:inline-block;
width: 100px;
height: 100px;
line-height:100px;
text-align:center;
margin:0 auto;
.circle {
fill: none;
stroke: #ffffff;
stroke-width:5px;
stroke-dasharray: 40;
transition: all .2s ease-in-out;
animation: outWaveOut 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards;
}
.social {
color:white;
font-size:1.8em;
position: absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
transition: all .5s ease-in-out;
}
&:hover {
cursor:pointer;
}
}
.twitter:hover {
.circle {
fill:#ffffff;
fill-opacity : 1;
animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorTwitter 1s linear forwards;
}
.social {color:#3aaae1;}
}
.facebook:hover {
.circle {
fill:#ffffff;
fill-opacity :1;
animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorFacebook 1s linear forwards;
}
.social {color:#3b5998;}
}
.google:hover {
.circle {
fill:#ffffff;
fill-opacity : 1;
animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorGoogle 1s linear forwards;
}
.social {color:#dd4b39;}
}
.pinterest:hover {
.circle {
fill:#ffffff;
fill-opacity : 1;
animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorPinterest 1s linear forwards;
}
.social {color:#cb2027;}
}
.linkedin:hover {
.circle {
fill:#ffffff;
fill-opacity : 1;
animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorLinkedin 1s linear forwards;
}
.social {color:#007bb6;}
}
@keyframes colorTwitter {
from {stroke: #ffffff;}
to {stroke:#3aaae1;}
}
@keyframes colorFacebook {
from {stroke: #ffffff;}
to {stroke:#3b5998;}
}
@keyframes colorGoogle {
from {stroke: #ffffff;}
to {stroke:#dd4b39;}
}
@keyframes colorPinterest {
from {stroke: #ffffff;}
to {stroke:#cb2027;}
}
@keyframes colorLinkedin {
from {stroke: #ffffff;}
to {stroke:#007bb6;}
}
@keyframes outWaveIn {
to {
stroke-width:10px;
stroke-dasharray: 400;
}
}
@keyframes outWaveOut {
from {
stroke-width:10px;
stroke-dasharray: 400;
}
to {
stroke: #ffffff;
stroke-width:5px;
stroke-dasharray: 40;
}
}
Got something troubling let us know in the comment box, Peace and blessings till next post.
This awesome SVG Animation plugin is developed by Stephane Lyver. For more Advanced Usages, please check the demo page or visit the official website.
on
No comments Post Yours!
Post a Comment