Sharing Button Effects

index.jade

.container
  .box-1
    h1 hover me
    .share-buttons
      a.btn.facebook(href='#')
        i.fa.fa-facebook
      | 			
      a.btn.twitter(href='#')
        i.fa.fa-twitter
      | 			
      a.btn.google(href='#')
        i.fa.fa-google
    | 	

  .box-2
    .layer
      .inner
        h1 hover me
      | 			
      a.btn.facebook(href='#')
        i.fa.fa-facebook
      | 			
      a.btn.twitter(href='#')
        i.fa.fa-twitter
      | 			
      a.btn.google(href='#')
        i.fa.fa-google

  .box-3
    h1 hover me
    .share-buttons
      a.btn.facebook(href='#')
        i.fa.fa-facebook
      | 			
      a.btn.twitter(href='#')
        i.fa.fa-twitter
      | 			
      a.btn.google(href='#')
        i.fa.fa-google
    | 	
    .layer

script.js

// ===================================
// Created for Codepad.co
// https://codepad.co/snippet/hmnLN0x5
// ===================================

sharing-button-effects.markdown

Sharing Button Effects

Created for codepad.co - https://codepad.co/snippet/hmnLN0x5

A Pen by Dronca Raul on CodePen.

License.

style.scss

@import 'https://fonts.googleapis.com/css?family=Bungee';

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Bungee', cursive;
  background: #7474BF;
  background: linear-gradient(to left, #7474BF , #348AC7);                     
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}

h1 {
  margin: 0;
  text-transform: uppercase;
  color: #fff;
}

div[class*=box] {  
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
  margin-bottom: 60px;
  box-shadow: 6px 5px 30px -4px rgba(0,0,0,0.55);
}

.btn {
  width: 50px;
  height: 50px;
  text-align: center;
  padding-top: 8px;
  box-sizing: border-box;
  &.facebook {
    background-color: #3b5998;
  }
  &.twitter {
    background-color: #55acee;
  }
  &.google {
    background-color: #dd4b39;
  }
  .fa { 
    font-size: 35px;
    color: #fff;
  }  
}

/*
=========================
        BOX ONE
=========================
*/

.box-1 {
  background-color: #67AAF9;
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .share-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;

    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid transparent;
    width: 0;
    height: 0;
    z-index: 10;
    transition: all 0.4s 0s, 
                border 0.4s 0.6s, 
                height 0.4s 0.4s, 
                margin 0.4s 0.4s;
  }
  &:hover .share-buttons {
    height: 200px;
    width: 400px;
    
    margin-top: -100px;
    border-color: #dbdbdb;
    background-color: rgba(196, 224, 249, 1);
    transform: translateX(-200px);
    // transition: all 0.4s 0.4s, 
    //             border 0.4s 0s, 
    //             height 0.4s 0s, 
    //             margin 0.4s 0s;
  }
  
  .btn {
    opacity: 0;
  }
  &:hover .btn {
    opacity: 1;
    transition: 0.4s;
    transition-delay: 0.7s;
  }
}

/*
=========================
        BOX TWO
=========================
*/

.box-2 {
  background: #C4E0F9;
  
  .layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
    transition: 0.4s 0.8s;
  }
  &:hover .layer {
    transition: 0.4s 0s;
    transform: translateY(250px);
  }
  .layer .inner {
    background-color: #B95F89;
    width: 600px;
    height: 400px;
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn {
    position: absolute;
    top: 10px;
    opacity: 0;
    z-index: 2;
  }
  
  &:hover .btn {
    opacity: 1;
    transform: translateY(-150px);
  }
  .facebook {
    left: 20%;
    transition: 0.4s 0.6s;
  }
  .twitter {
    left: 45%;
    transition: 0.4s 0.4s;
  }
  .google {
    left: 70%;
    transition: 0.4s 0.2s;
  }
}

/*
=========================
       BOX THREE
=========================
*/

.box-3 {
  background-color: #2EC0F9;
  transition: 1s;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover .share-buttons {
    opacity: 1;
    padding: 0 18%;
  }

  .share-buttons {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.4s;
    z-index: 10;
  }

  .btn {
    display: inline-block;
    margin: 175px 40px;
  }

}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />