Крутой эффект покачивания на кнопках | CSS-анимация — HTML и Css

Классный эффект покачивания на кнопках — Html и Css. В этом видео вы узнаете, как создать классный эффект покачивания для кнопок с помощью HTML и CSS. Этот эффект анимации кнопки будет великолепен, когда вы хотите, чтобы посетители вашего веб-сайта или веб-страницы заметили нажатие определенной кнопки. При наведении на кнопку анимация покачивания будет заморожена.

Пример:

---

Read More

HTML КОД:

<a href="" class="wiggle-btn">

    <span>Click Here!</span>

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTSnI7gqEsTbzRxvCsvlSBTe4YiZSc1khMtzLpIS4SADCpxONnw-wAp1mk6E9SR_L5xumVVlyBTntAJjG7z2HgOo9yMvoIHQYSBlsja1uDzgaQxJQkzzu23i5x4nE_XSPIyRoz-SrXNXf04l_cK9bshBzWOrkOBalKMLxCWDsXvuUcL9wSIxQugAuwO6g/s730/btn1.png" class="btn-img" alt="">

  </a>

  <a href="" class="wiggle-btn">

    <span>Download</span>

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZtpgWDs3rqJij3fNOLlcoZ7SqmKW2OEABkoRGo5UjhiYWtQEtR5R6yxp7T5tkFplf-i4xANM8OIGUU58uG5KqjdqPqxUdT4dmZtcHGXqWxhkufG_9c8vz6pLvXp6HF22OZDdWiDuUjWn-8-JOB-UJ36YawZoWSPZujYiEtQP6g-1fYOE-8gVm1g4o1-U/s730/btn2.png" class="btn-img" alt="">

  </a>

  <a href="" class="wiggle-btn">

    <span>Read More</span>

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC34oc0qZymEN0p_nBfYtcteuTIRIls46svSyCl6e64g30G3AbY7OIP-I-IoJ2hGZvsamp0CQjuzOlAEZGAIci5yZ9h2o7Jtcry0HptBln_Oauk4at-H9de2E1A5PcCrNFmoPJH0AvySeIC7Abhg5tT6YgfHPHG2JWMa49wbTnTY3UMxr9dKEt7ET9AS0/s730/btn3.png" class="btn-img" alt="">

  </a>

  <a href="" class="wiggle-btn">

    <span>View More</span>

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv0A60DK3bT325ZeNqNpY6O6XHhKIFjOt3ue2d8XxLjs5-3muvivNiztTzRyJqbZX9GlpcoSVAkL3PG00IbLB2eFl5T7-SpU-wrHK1JtvIh9_8gJ3vtnHdpZTte0SNtu1At4bHraUwMxG2P9woDnrIO1Gh289ZcU1MrwdyAuG-1oG7m5aY2gH8Sh1JfKY/s730/btn4.png" class="btn-img" alt="">

  </a>

  <a href="" class="wiggle-btn">

    <span>Hover Me!</span>

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Sh1LRKL09PCjnqQsRH4IojBfV45DS1L3GvV8wkwKQrVwUfrt8dNzI6Nn-IWN-CO8ktKHXp1rduE82QWgd-V8aog70Sb57fYlobIYwJYMwYEISJGC611Zn-KYUANTVpSxLAXNQsLAazOg2Ma8zcl6SNwu4-0uh9vkeCBhKhwoymOCNcQuD1T5rGsisRQ/s730/btn5.png" class="btn-img" alt="">

  </a>

CSS КОД:

.wiggle-btn{

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    animation: wiggle 2s linear infinite;

    transform-origin: 50% 8em;

    animation-delay: 1s;

}

.wiggle-btn:hover{

    animation: none;

}

@keyframes wiggle{

    0%, 5%{

        transform: rotateZ(0);

    }    

    15%{

        transform: rotateZ(-15deg);

    }

    20%{

        transform: rotateZ(10deg);

    }

    25%{

        transform: rotateZ(-10deg);

    }

    30%{

        transform: rotateZ(6deg);

    }

    35%{

        transform: rotateZ(-4deg);

    }

    40%,

    100%{

        transform: rotateZ(0);

    }

}

.wiggle-btn:before{

    z-index: 000;

    content: "";

    position: absolute;

    width: 220px;

    height: 50px;

    box-shadow: 0 5px 25px rgba(2, 2, 2, 0.5);

}

.wiggle-btn span{

    z-index: 222;

    position: absolute;

    color: #fff;

    text-transform: uppercase;

    font-size: 1.3em;

    font-weight: 300;

    letter-spacing: 1px;

    text-shadow: 0 5px 25px rgba(2, 2, 2, 1);

}

.wiggle-btn .btn-img{

    z-index: 111;

    width: 250px;

}