Cara Membuat Social Share Button Animation CSS

Posted By Admin 2 months ago
Halo Sahabat Blogger , sudah lama sekali tidak update website ini hahah .. gara-gara adsense saya terkena invalid click. alhasil jadi males deh ngeblognya :p . Akhirnya saya bisa melepas hiatus tersebut dengan mengupdate blog ini kembali. Kali ini saya akan mengupdate cara membuat Social Share button Animation Dengan CSS , Dengan mengandalkan sistem animation nya dengan css saya akan membagikan caranya langsung saja disimak yah.  

1. Pertama-tama silahkan masukkan css nya di style.css kalian masing-masing

@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);

#share {background: #333;position: relative;margin:0 auto;width: 620px;}
#share span {width: 100px;height: 100px;float: left;line-height:100px;text-align: center;color:#fff;font-family:Arial}
.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;}
.social: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;}
.twitter:hover .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;}
.facebook:hover .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;}
.google:hover .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;}

@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 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; 
  }
}
Lalu save.

2. Setelah itu masukkan HTMLnya

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

</div>
Nanti hasilnya akan seperti dibawah ini. Selamat Mencoba 😀

Cukstudio adalah Website dimana kami membagikan Project Theme Anime WordPress dan Bermacam – macam Tutorial Trik Tips dari seputar dunia Blogging.