Skip to content
Advertisements

JavaScirpt Animation-Social Button

HTML CODE:

  <div class="share">
    <div class="toggle"></div>
      <ul>
        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
        <li><a href="#"><i class="fab fa-google-plus"></i></a></li>
        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
        <li><a href="#"><i class="fab fa-skype"></i></a></li>
        <li><a href="#"><i class="fab fa-tumblr"></i></a></li>
        <li><a href="#"><i class="fab fa-whatsapp"></i></a></li>
      </ul>
  </div>

CSS CODE:

body{
  margin:0;
  padding: 0;
  background: #003040;
}
.share{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  width: 100px;
  height: 100px;
}
.share ul{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.share ul li{
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: .5s;
  overflow: hidden;
  transform: scale(0.95);
  border-radius: 10px;
}
.share ul li a{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
  color: #262626;
  transition: .5s;
}
.share ul li a .fab{
  transform: rotate(45deg);
}
.share ul li a:hover{
  color: #fff;
  background: #2196f3;
  transform: rotate(0deg);
}
.share ul.active li{
  transform: scale(0.95);
}
.share ul.active li:nth-child(1){
  top: -100%;
  left: -100%;
  transition-delay: 0s;
}
.share ul.active li:nth-child(2){
  top: -100%;
  left: 0%; 
  transition-delay: 0.2s;
}
.share ul.active li:nth-child(3){
  top: -100%;
  left: 100%;
  transition-delay: 0.4s;
}
.share ul.active li:nth-child(4){
  top: 0%;
  left: 100%;
  transition-delay: 0.6s;
}
.share ul.active li:nth-child(5){
  top: 100%;
  left: 100%;
  transition-delay: 0.8s;
}
.share ul.active li:nth-child(6){
  top: 100%;
  left: 0%;
  transition-delay: 1s;
}
.share ul.active li:nth-child(7){
  top: 100%;
  left: -100%;
  transition-delay: 1.2s;
}
.share ul.active li:nth-child(8){
  top: 0%;
  left: -100%;
  transition-delay: 1.4s;
}
.toggle{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e91e63;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  z-index: 1;
}
.toggle:before{
  content: '\f1e0';
  font-family: fontAwesome;
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size:40px;
  transform: rotate(-45deg);
}
.toggle.active:before{
  content: '\f00d';
  font-family: fontAwesome;
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size:60px;
}

JavaScript CODE:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".toggle").click(function(){
        $(".toggle").toggleClass("active")
        $("ul").toggleClass("active")
      })
    })
  </script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: