How to Implement the CSS3 Social Platform Sharing Button

How to Implement the CSS3 Social Platform Sharing Button: BY William4 Nov,2020; Tags:
CSS3 Button Share Button

Introduction

Today we will share with you a CSS3-based social platform sharing button, which can produce a changing background animation when hovering over the button, which is very creative.

How to Implement the CSS3 Social Platform Sharing Button

Instructions

HTML Body Code

<div class="social-btns">
    <a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
    <a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
    <a class="btn google" href="#"><i class="fa fa-google"></i></a>
    <a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
	<a class="btn pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>

Css Code

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#eee;}

.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  transition: all 0.35s;
  transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
  top: 90%;
  left: -110%;
}
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.twitter:before {
  background-color: #00aff0;
}
.social-btns .btn.twitter .fa {
  color: #00aff0;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.instagram:before {
  background-color: #bf00ff;
}
.social-btns .btn.instagram .fa {
  color: #bf00ff;
}

VIEW NOW