Animated social media links

animated-social-media-links.markdown

Animated social media links

A Pen by Kholoud Ameen on CodePen.

License.

index.html

<div class="wrapper">
  <div class="twitter item">twitter</div>
  <div class="blogger item">blogger</div>
   <div class="facebook item">facebook</div>
  <div class="google item">google</div>
  <div class="share ">share</div>
  
</div>

style.css

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 300px;
  margin:0 auto;
  margin-top:50px;
}
.wrapper div {
  box-sizing: border-box;
  background: #282832;
  color:#fff;
  text-transform:capitalize;
  font-size:0.8em;
  text-align: center;
  line-height: calc(120px - 2em);
}

  .wrapper div:nth-child(5) {
    grid-column: 2 / 3;
        grid-row: 2;
        background:#222;
  }
.wrapper div:nth-child(4){
  grid-column:2/3;
  grid-row:3;
}
.wrapper div:hover:nth-child(4){
     background:#dd4b39;
}
.wrapper div:nth-child(1){
  grid-column:1/2;
  grid-row:2;
}
.wrapper div:hover:nth-child(1){
  background:#00aced;
}
.wrapper div:nth-child(3){
  grid-column:3/4;
  grid-row:2;
}
.wrapper div:hover:nth-child(3){
  background: #3b5998;
}
.wrapper div:nth-child(2){
  grid-column:2/3;
  grid-row:1;
}
.wrapper div:hover:nth-child(2){
  background:#fb8f3d;
}
.wrapper div:nth-child(1),
.wrapper div:nth-child(3){
  //display:none;
}
.share{
  z-index:99;
}

.facebook{
  transform:translateX(-100px);
}
 .twitter {
   transform:translateX(100px);
   //z-index:-1;
}
.blogger{
  transform:translateY(94px);
}
.google{
   transform:translateY(-94px);
}
.wrapper:hover .item {
  transform: translateX(0px);
}
.item {
  transition: transform .3s ease-in;
}