@keyframes grow {
  0% {width: 128px; height: 128px; margin: 64px;}
  25% {width: 128px; height: 128px; margin: 64px;}
  100% {width: 160px; height: 160px; margin: 48px;}
}
@-webkit-keyframes grow {
  0% {width: 128px; height: 128px; margin: 64px;}
  25% {width: 128px; height: 128px; margin: 64px;}
  100% {width: 160px; height: 160px; margin: 48px;}
}

@keyframes hop {
  from {margin: 64px;}
  to {margin: 16px 64px 112px;}
}
@-webkit-keyframes hop {
  from {margin: 64px;}
  to {margin: 16px 64px 112px;}
}

img {
  width: 128px;
  height: 128px;
  margin: 64px;
}

.button {
  width: 256px;
  height: 256px;
  margin: 50px 10% 0;
  display: inline-block;
  background: url('fond.png');
}

.button:hover img {
  animation: grow 1s ease -250ms infinite alternate;
  -webkit-animation: grow 1s ease -250ms infinite alternate;
}

section {
  text-align: center;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

@media all and (min-height: 280px) {
  .button {
    margin: 5px 10% 0;
  }
}

@media all and (min-height: 400px) {
  .button {
    margin: 100px 10% 0;
  }
}

@media all and (min-height: 500px) {
  .button {
    margin: 200px 10% 0;
  }
}