<button class="constany-cangin">ZorNet.Ru</button>

.constany-cangin {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
    font-family: 'Lobster', cursive;
    font-size: 16px;
    color: #fd6bff;
    width: 150px;
    height: 50px;
    border-radius: 50px;
    border: none;
    border-bottom: 0px solid #4e8bed;
    border-top: 0px solid #f5a733;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: 1s;
}

button:hover, button:focus {
    border-top: 25px solid #f5a733;
    border-bottom: 25px solid #4e8bed;
    height: 100px;
    width: 100px;
    background: white;
}

button:focus {
    outline: none;
    animation: bounce 2s infinite;
}

button:focus:before {
    width: 100px;
    height: 100px;
    transform: translateX(-15px) translateY(15px) rotateX(80deg);
    background: rgb(0,0,0);
    background: -moz-radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%);
    background: -webkit-radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%);
    background: radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#b8d3f0",GradientType=1);
    content: '';
    position: absolute;
    animation: shadow 2s infinite;
}

@keyframes bounce {
    33% {
  transform: translateY(-40px);
  height: 105px;
  width: 95px;
    }
    66% {
  transform: translateY(0px);
  height: 95px;
  width: 105px;
    }
    100% {
  transform: translateX(0px);
  height: 100px;
  width: 100px;
    }
}

@keyframes shadow {
    33% {
  transform: translateX(10px) translateY(55px) rotateX(80deg);
  width: 50px;
    }
    66% {
  transform: translateX(-40px) translateY(15px) rotateX(80deg);
  width: 150px;
    }
    100% {
  transform: translateX(-15px) translateY(15px) rotateX(80deg);
  width: 100px;
    }
}