stripe hover animation

by Pranab Dey

HTML

<div class="main">
<button class="btn1" onclick="window.open('http://codepen.io')">
  CodePen
</button>
<button class="btn2" onclick="window.open('http://google.com')">
  See all customers
</button>
<button class="btn3" onclick="window.open('https://github.com/Phe0nix')">
  Github
</button>
<div class="icon">
  <img class="kickstarter" alt="kickstarter" src="https://stripe.com/img/v3/home/customer-logos/kickstarter.svg">
  <img class="kickstarter" alt="kickstarter" src="https://stripe.com/img/v3/home/customer-logos/kickstarter.svg">
  <img class="kickstarter" alt="kickstarter" src="https://stripe.com/img/v3/home/customer-logos/kickstarter.svg">
  <img class="kickstarter" alt="kickstarter" src="https://stripe.com/img/v3/home/customer-logos/kickstarter.svg">
  <img class="kickstarter" alt="kickstarter" src="https://stripe.com/img/v3/home/customer-logos/kickstarter.svg">
  <img class="kickstarter" alt="kickstarter" src="https://stripe.com/img/v3/home/customer-logos/kickstarter.svg">
</div>

</div>

CSS

.main{
  top: 50%;
  left: 50%; transform: translate(-50%,-50%); position: absolute; width: 100%;
}
button {
  color: #fff;
  background: #6772e5;
  border: 0;
  white-space: nowrap;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 14px; 
  position: absolute;
  transform: translateX(-50%);
  border-radius: 6px; cursor: pointer;
  z-index: 2; visibility: hidden; opacity: 0; transition: .7s cubic-bezier(.19,1,.22,1);
}
.btn1, .btn2, .btn3{
  top: 12%; left: 50%;
}

.icon {
  text-align: center;
  padding: 20px; transition: .7s cubic-bezier(.19,1,.22,1);
}

.icon img {
  width: 100px;
  margin-right: 12px; transition: .7s cubic-bezier(.19,1,.22,1);
}

.main:hover .icon{
  filter: blur(5px);transition: .7s cubic-bezier(.19,1,.22,1);
}

.main:hover .icon img{
  margin-right: 7px;transition: .7s cubic-bezier(.19,1,.22,1);
}

.main:hover .btn2{
  top: 5%; visibility: visible; opacity: 1; transition: .7s cubic-bezier(.19,1,.22,1);
}

.main:hover .btn1{
  top: 5%; left: 35%; visibility: visible; opacity: 1; transition: .7s 0.2s cubic-bezier(.19,1,.22,1);
}

.main:hover .btn3{
  top: 5%; left: 65%; visibility: visible; opacity: 1; transition: .7s 0.4s cubic-bezier(.19,1,.22,1);
}

@media screen and (max-width: 1371px) and (min-width: 1200px){
  .main:hover .btn2{
  top: 5%; visibility: visible; opacity: 1; transition: .7s cubic-bezier(.19,1,.22,1);
}

.main:hover .btn1{
  top: 5%; left: 30%; visibility: visible; opacity: 1; transition: .7s 0.2s cubic-bezier(.19,1,.22,1);
}

.main:hover .btn3{
  top: 5%; left: 70%; visibility: visible; opacity: 1; transition: .7s 0.4s cubic-bezier(.19,1,.22,1);
}
}

@media screen and (max-width: 1199px) and (min-width: 768px){
  .main:hover .btn2{
  top: 5%; visibility: visible; opacity: 1; transition: .7s cubic-bezier(.19,1,.22,1);
}

.main:hover .btn1{
  top: 5%; left: 35%; visibility: visible; opacity: 1; transition: .7s 0.2s cubic-bezier(.19,1,.22,1);
}

.main:hover .btn3{
  top: 5%; left: 64%; visibility:...