<h1>
The Social Drawer
</h1>
<span>Hover over the drawer to open</span>
<div class="drawer">
  <div class="box">
    <a href="https://twitter.com/Nour_ASoud" class="ball ball-1 twitter"><svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M52.837,15.065c-1.811,0.805-3.76,1.348-5.805,1.591c2.088-1.25,3.689-3.23,4.444-5.592c-1.953,1.159-4.115,2-6.418,2.454  c-1.843-1.964-4.47-3.192-7.377-3.192c-5.581,0-10.106,4.525-10.106,10.107c0,0.791,0.089,1.562,0.262,2.303  c-8.4-0.422-15.848-4.445-20.833-10.56c-0.87,1.492-1.368,3.228-1.368,5.082c0,3.506,1.784,6.6,4.496,8.412  c-1.656-0.053-3.215-0.508-4.578-1.265c-0.001,0.042-0.001,0.085-0.001,0.128c0,4.896,3.484,8.98,8.108,9.91  c-0.848,0.23-1.741,0.354-2.663,0.354c-0.652,0-1.285-0.063-1.902-0.182c1.287,4.015,5.019,6.938,9.441,7.019  c-3.459,2.711-7.816,4.327-12.552,4.327c-0.815,0-1.62-0.048-2.411-0.142c4.474,2.869,9.786,4.541,15.493,4.541  c18.591,0,28.756-15.4,28.756-28.756c0-0.438-0.009-0.875-0.028-1.309C49.769,18.873,51.483,17.092,52.837,15.065z"/></svg></a>
    <a href="https://github.com/nourabusoud" class="ball ball-2 github">
      <svg height="67px" id="Layer_1" style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="67px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M20.543,34.568c-0.054,0,0.592,1.367,0.61,1.367  c1.41,2.516,4.128,4.08,8.713,4.514c-0.654,0.488-1.44,1.414-1.549,2.484c-0.823,0.523-2.478,0.696-3.764,0.297  c-1.803-0.559-2.493-4.066-5.192-3.566c-0.584,0.107-0.468,0.486,0.037,0.809c0.823,0.523,1.597,1.178,2.194,2.571  c0.459,1.07,1.423,2.981,4.473,2.981c1.21,0,2.058-0.143,2.058-0.143s0.023,2.731,0.023,3.793c0,1.225-1.682,1.57-1.682,2.159  c0,0.233,0.557,0.255,1.004,0.255c0.884,0,2.723-0.725,2.723-1.998c0-1.011,0.017-4.41,0.017-5.006c0-1.3,0.709-1.712,0.709-1.712  s0.088,6.94-0.169,7.872c-0.302,1.094-0.847,0.939-0.847,1.427c0,0.726,2.214,0.179,2.948-1.416c0.567-1.239,0.319-8.05,0.319-8.05  l0.605-0.012c0,0,0.034,3.117,0.013,4.542c-0.021,1.476-0.123,3.342,0.769,4.222c0.586,0.579,2.484,1.594,2.484,0.666  c0-0.539-1.04-0.982-1.04-2.441v-6.715c0.831,0,0.706,2.208,0.706,2.208l0.061,4.103c0,0-0.184,1.494,1.645,2.119  c0.645,0.223,2.025,0.283,2.09-0.09c0.065-0.373-1.662-0.928-1.678-2.084c-0.01-0.707,0.032-1.119,0.032-4.187  c0-3.068-0.419-4.202-1.88-5.106c4.508-0.455,7.299-1.551,8.658-4.486c0.106,0.003,0.555-1.371,0.496-1.371  c0.305-1.108,0.47-2.419,0.502-3.971c-0.008-4.21-2.058-5.699-2.451-6.398c0.58-3.187-0.098-4.637-0.412-5.135  c-1.162-0.406-4.041,1.045-5.615,2.067c-2.564-0.737-7.986-0.666-10.019,0.19c-3.751-2.639-5.736-2.235-5.736-2.235  s-1.283,2.259-0.339,5.565c-1.234,1.546-2.154,2.64-2.154,5.539C19.906,31.83,20.102,33.292,20.543,34.568z M33,64  C16.432,64,3,50.568,3,34C3,17.431,16.432,4,33,4s30,13.431,30,30C63,50.568,49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff;"/></svg></a>
    <a href="https://www.nourabusoud.com" class="ball ball-3 website"><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><g><path d="M256.5,208H256v0C256.2,208,256.3,208,256.5,208z"/><path d="M368.5,160H320c0,0,26,17,31.6,48H368h0.5c17.6,0,31.5,13.9,31.5,31.5v32c0,17.6-13.9,32.5-31.5,32.5h-112   c-17.6,0-32.5-14.9-32.5-32.5V240h-48v31.5c0,11.5,2.5,22.5,6.9,32.5c12.6,28.2,40.9,48,73.6,48h112c44.2,0,79.5-36.3,79.5-80.5   v-32C448,195.3,412.7,160,368.5,160z"/><path d="M329.6,208c-12.1-28.3-40.1-48-73.1-48h-112c-44.2,0-80.5,35.3-80.5,79.5v32c0,44.2,36.3,80.5,80.5,80.5H192   c0,0-25.8-17-32.1-48h-15.4c-17.6,0-32.5-14.9-32.5-32.5v-32c0-17.6,14.9-31.5,32.5-31.5H256h0.5c17.6,0,31.5,13.9,31.5,31.5v32   c0,0.2,0,0.3,0,0.5h48c0-0.2,0-0.3,0-0.5v-32C336,228.3,333.7,217.6,329.6,208z"/></g></svg></a>
  </div>
  <div class="cover"><span></span></div>
</div>

$drawer-width: 180px;
$drawer-height: 60px;
$drawer-color: #2196F3;
$drawer-open-transition: all cubic-bezier(0.92,-0.15, 0.21, 0.86) 0.25s;

*{
  box-sizing: border-box;
}

body{
  font-family: Tahoma,Verdana,Segoe,sans-serif; 
  background: #2d0379;
  color: #fff;
  text-align: center;
  padding: 20px;
}
a{
  color: #fff;
}

.drawer{
  width :$drawer-width;
  height: $drawer-height;
  margin: 80px auto;
  position: relative;
  cursor: pointer;
}

.box{
  width: $drawer-width;
  height: $drawer-height - 20;
  background-color: darken($drawer-color, 10%);
  position: relative;
  border-radius: 2px;
  padding: 0.5em 0;
  transition: all ease-in-out 0.25s;
  transform-style: preserve-3d;
  perspective: 600px;

  &:before{
    position: absolute;
    content: '';
    width: 0;
    height: 40px;
    background-color: darken($drawer-color, 5%);
    bottom: 0;
    left: 0;
    transform-origin: left center;
    transform: rotateY(285deg) rotate(12deg) rotateX(0deg);
    transition: $drawer-open-transition;
   }

  &:after{
    position: absolute;
    content: '';
    width: 0;
    height: 40px;
    background-color: darken($drawer-color, 15%);
    bottom: 0;
    right: 0;
    transform-origin: top right;
    transform: rotateY(86deg) rotate(-12deg) rotateX(0deg);
    transition: $drawer-open-transition;
  }
}

.ball {
  display: inline-block;
  position: absolute;
  bottom: -10px; 
  left: 50%;
  width: 45px;
  height: 45px;
  margin: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 120%, #ff5690, #d61a5a 80%, #941a44 100%);
  transition: all cubic-bezier(1,-0.49, 0.46, 0.8) 0.25s;
  overflow: hidden;
  
  &.twitter{
   background-image: radial-gradient(circle at 50% 120%, #25a1ce, #0084b4 80%, #0080af 100%);
  }
  
  &.github{
    background-image: radial-gradient(circle at 50% 120%, #312121, #151213 80%, #000000 100%);
  }
  &.website{
    background-image: radial-gradient(circle at 50% 120%, #fb486a, #d40028 80%, #b70728 100%);
  }
  svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
  }
}

.ball:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  bottom: 15%;
  left: 30%;
  opacity: 0.6;
  height: 100%;
  width: 90%;
  -webkit-filter: blur(5px);
}

.cover{
  position:absolute;
  left: 0;
  top: 0;
  width: $drawer-width;
  height: $drawer-height;
  background-color: $drawer-color;
  border-radius: 2px;
  z-index: 1;
  box-shadow: 0 3px 5px 3px rgba(0, 0, 0, 0.2);
  transition: $drawer-open-transition;
  &:before{
    position: absolute;
    content: '';
    width: 90%;
    height: 80%;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    transform: translate(-50%, -50%);
    border-radius: 4px;
  }
  &:after{
    position: absolute;
    content: '';
    width: 30px;
    height: 2px;
    border-style: solid;
    border-color: rgba(255,255,255,0.8);
    border-width: 0 1px 2px 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-bottom-right-radius: 2px;
    border-bottom-right-radius: 2px;
    box-shadow: 4px 0px 6px 0px rgba(0, 0, 0, 0.2);
  }
}

.drawer:hover{ 
  .box{
    box-shadow: 0 25px 10px 0 rgba(0,0,0,0.2);
  }
  .box:before, .box:after{
    width: 90%;
  }
  
 .ball-1{
    -webkit-transform: translate3d(-80px, -45px, 0);
    -moz-transform: translate3d(-80px, -45px, 0);;
    -o-transform: translate3d(-80px, -45px, 0);
    transform: translate3d(-80px, -45px, 0);
  } 
  .ball-2{
    -webkit-transform: translate3d(-10px, -30px, 0);
    -moz-transform: translate3d(-10px, -30px, 0);;
    -o-transform: translate3d(-10px, -30px, 0);
    transform: translate3d(-10px, -30px, 0);
  } 
  .ball-3{
    -webkit-transform: translate3d(50px, -50px, 0);
    -moz-transform: translate3d(50px, -50px, 0);;
    -o-transform: translate3d(50px, -50px, 0);
    transform: translate3d(50px, -50px, 0);
  } 
 .cover{
    -webkit-transform: translate3d(20px, 30px, 250px);
    -moz-transform:  translate3d(20px, 30px, 250px);
    -o-transform: translate3d(20px, 30px, 250px);
    transform: translate3d(20px, 30px, 250px);
  }
}