CSS Coding for Social Sharing

CSS Coding for Social Sharing


@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css';

body {
  background-color:#e5e7e7;
}

.SocialIcons {
  position:absolute;
  top:50%;
  left:50%;
  display: inline-block;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

/* Icons */

.SocialIcons a {
  color:#fff;
  display: inline-block;
  width:55px;
  height:34px;
  padding-top:20px;
  margin:0 2px;
  border-radius:5px;
  text-align:center;
  text-decoration:none;
  font-family:fontawesome;
  position: relative;
  -o-transition:all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
   -webkit-font-smoothing: antialiased;
}

.SocialIcons a:hover {
  opacity: 0.78;
}

/* pop-up text */

.SocialIcons a span {
  color:#666;
  position:absolute;
  font-family:sans-serif;
  bottom:0;
  left:-25px;
  right:-25px;
  padding:5px 7px;
  z-index:-1;
  font-size:14px;
  border-radius:2px;
  background:#fff;
  visibility:hidden;
  opacity:0;
  -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


.SocialIcons a span:before {
  content:'';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position:absolute;
  bottom:-5px;
  left:40px;
}


.SocialIcons a:hover span {
  bottom:65px;
  visibility:visible;
  opacity:1;
}

.SocialIcons .facebook{
background-color: #3a5795;

}
.SocialIcons .twitter{
background-color: #00acee;
}
.SocialIcons .googleplus{
background-color: #dd4b39;
}
.SocialIcons .github{
background-color: #DB6E82;
}
/* font awesome icons */

.SocialIcons .facebook:before {
content:'\f09a';
}
.SocialIcons .twitter:before {
content:'\f099';
}
.SocialIcons .googleplus:before {
content:'\f0d5';
}
.SocialIcons .github:before {
content:'\f113';
}