<center>
  <div class="scale" id="text"><span></span></div>
  <div class="scale" id="text2"><span></span></div>
  <div class="scale" id="text3"><span></span></div>
</center>
<br><br><br><br>

<div id="outer">
  <div class="inner"><button class="Btn"><i class="fab fa-affiliatetheme fa-10x"></i>
    </button></div>
  <div class="inner"><button class="Btn"><i class="fab fa-algolia fa-10x"></i></button></div>
  <div class="inner"><button class="Btn"><i class="fas fa-anchor fa-10x"></i></button></div>
</div>
<div id="outer">
  <div class="inner"><button class="Btn"><i class="fab fa-app-store-ios fa-10x"></i></button></div>
  <div class="inner"><button class="Btn"><i class="fab fa-angrycreative fa-10x "></i></button></div>
  <div class="inner"><button class="Btn"><i class="fab fa-apple fa-10x"></i></button></div>
</div>

* {
  background-color: #e0e0e0;
  font-family: "Quicksand", sans-serif;
  font-weight: bolder;
}

/*Button styling*/
#outer {
  width: 100%;
  text-align: center;
}

.inner {
  display: inline-block;
}

.Btn {
  padding: 0;
  border: none;
  width: 350px;
  transition: 0.9s;
  height: 250px;
  margin: 25px;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: -6px 6px 12px #a4a4a4, 6px -6px 12px #ffffff;
}

.Btn:hover {
  cursor: pointer;
  width: 350px;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: inset -6px 6px 12px #a4a4a4, inset 6px -6px 12px #ffffff;
}

/* hover scale animation*/
.scale {
  margin: 50px;
}

#text {
  border-radius: 6px;
  background: #e0e0e0;
  box-shadow: -19px 19px 38px #afafaf, 19px -19px 38px #ffffff;

  width: 250px;
  height: 100px;
  transform: skew(44deg, -5deg);
  transition: 0.9s ease-in-out;
}

#text2 {
  border-radius: 6px;
  background: #e0e0e0;
  box-shadow: -19px 19px 38px #afafaf, 19px -19px 38px #ffffff;
  width: 250px;
  height: 100px;

  transition: 0.9s ease-in-out;
}

#text3 {
  border-radius: 6px;
  background: #e0e0e0;
  box-shadow: -19px 19px 38px #afafaf, 19px -19px 38px #ffffff;
  width: 250px;
  height: 100px;
  transform: skew(44deg, -5deg);
  transition: 0.9s ease-in-out;
}

#text:hover {
  transform: scale(1.1);
  border-radius: 6px;
  background: #e0e0e0;
  box-shadow: inset -19px 19px 38px #afafaf, inset 19px -19px 38px #ffffff;
}

#text2:hover {
  transform: scale(-1.1);
  border-radius: 6px;
  background: #e0e0e0;
  box-shadow: inset -19px 19px 38px #afafaf, inset 19px -19px 38px #ffffff;
}

#text3:hover {
  transform: scale(1.5);
  border-radius: 6px;
  background: #e0e0e0;
  box-shadow: inset -19px 19px 38px #afafaf, inset 19px -19px 38px #ffffff;
}
span {
  text-align: center;
  margin-top: auto;
}
/*End*/

$(document).ready(function(){
    setTimeout(function(){
       swal("Hey!! you made it so far; like and comments, I will appreciate that !!");
    },5000); 
 });