Social Buttons

Easy and elegant share buttons

Copy and paste the following code in your .CSS file
Download icons

/*=== MB share buttons ===*/
.mb_share .button {
  background:#DCE0E0;
  position:relative;
  float:left;
  margin:0 7px 14px;
  width:150px;
  height:40px; 
  overflow:hidden;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.mb_share .button .icon {
  float:left;
  z-index:200;
  position:relative;
  width:40px;
  height:40px;
  -webkit-border-radius:3px 0px 0px 3px;
  -moz-border-radius:3px 0px 0px 3px;
  border-radius:3px 0px 0px 3px;
  background-repeat:no-repeat;
  background-image: url(path_to/svg);
}
.mb_share .button .native_button {
  width:110px;
  height:40px;
  float:left;
  background:#DCE0E0 !important;
  display:table;
}
.mb_share .button .native_button > div {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
.mb_share .button .slide {
  position:absolute;
  right:0;
  top:0;
  z-index:100;
  float:left;
  width:110px;
  height:40px;
  transition:.2s transform linear;
  -webkit-transition:.2s -webkit-transform linear;
  -moz-transition:.2s -moz-transform linear;
}
.mb_share .button .slide span {
  color:#fff;
  display:block;
  cursor:default;
  width:100%;
  text-align:center;
  margin:10px 0;
  padding:2px 0;
  font-size:16px;
  border-left:1px solid rgba(255,255,255,0.35);
}
/* Transitions */
.mb_share .button.slide_x:hover .slide {
  -webkit-transform:translateX(110px);
  -moz-transform:translateX(110px);
  transform:translateX(110px);
}
.mb_share .button.slide_nx:hover .slide {
  -webkit-transform:translateX(-110px);
  -moz-transform:translateX(-110px);
  transform:translateX(-110px);
}
.mb_share .button.slide_y:hover .slide {
  -webkit-transform:translateY(40px);
  -moz-transform:translateY(40px);
  transform:translateY(40px);
}
.mb_share .button.slide_ny:hover .slide {
  -webkit-transform:translateY(-40px);
  -moz-transform:translateY(-40px);
  transform:translateY(-40px);
}
/*========================*/
/*=== Colors ===*/
/* FACEBOOK */
.mb_share .button.facebook .icon {
  background-position:-40px 0;
}
.mb_share .button.facebook > div {
  background-color:#305c99;
}
/* TWITTER */
.mb_share .button.twitter .icon {
  background-position:0 0;
}
.mb_share .button.twitter > div {
  background-color:#00cdff;
}
/* YOUTUBE */
.mb_share .button.youtube .icon {
  background-position:-80px 0;
}
.mb_share .button.youtube > div {
  background-color:#e22b26;
}
/* GOOGLE PLUS */
.mb_share .button.gplus .icon {
  background-position:0 -40px;
}
.mb_share .button.gplus > div {
  background-color:#3f3d3e;
}
/* LINKEDIN */
.mb_share .button.linkedin .icon {
  background-position:-40px -40px;
}
.mb_share .button.linkedin > div {
  background-color:#007bb6;
}
/* TUMBLR */
.mb_share .button.tumblr .icon {
  background-position:-80px -40px;
}
.mb_share .button.tumblr > div {
  background-color:#2c4762;
}
/* GITHUB */
.mb_share .button.github .icon {
  background-position:0 -80px;
}
.mb_share .button.github > div {
  background-color:#42c0fb;
}
/* PINTEREST */
.mb_share .button.pinterest .icon {
  background-position:-40px -80px;
}
.mb_share .button.pinterest > div {
  background-color:#dc0d0a;
}
/*==============*/

HTML Code

  <div class="mb_share">
  <div class="button facebook slide_x">
        <div class="icon"></div>
        <div class="slide">
            <span>
                facebook
            </span>
        </div>
        <div class="native_button">
            <div>
                Content here
            </div>
        </div>
    </div>
</div>

Where

• mb_share - parent class
• facebook - button design which can be facebook/twitter/youtube/gplus/linkedin/tumblr/github/pinterest
• slide_x - the transition which can be slide_x/slide_y/slide_nx/slide_ny
• Content here - your social button code (ex: like button)