Вы узнаете и сможете скачать кнопку для сайта с красивым эффектом волнистой анимации используя только CSS. Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать.

Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

В архиве находится:

• Все демонстрационные изображения
• Исходные файлы HTML
• Исходные файлы CSS
• Исходные файлы jаvascript
• Иконки шрифтов
• Файлы библиотеки и плагинов

HTML КОД:

<a href="#" target="_blank">
<span>Button</span>
<div class="wave"></div>
</a>

CSS КОД:

body {
margin: 0;
height: 100vh;
display: grid;
place-items: center;
background: #191a1c;
}

a {
font: 700 30px consolas;
color: #fff;
text-decoration: none;
text-transform: uppercase;
padding: 20px 60px;
position: relative;
overflow: hidden;
border-radius: 5px;
transition: 0.2s;
transform: scale(2);
}

a span {
position: relative;
z-index: 0;
color: #fff;
}

a .wave {
position: absolute;
top: -65px;
left: 0;
width: 100%;
height: 200px;
background: #00ccff;
box-shadow: inset 0 0 50px rgba(113, 13, 13, 0.7);
z-index: -1;
transition: 0.9s;

}

a .wave::after,
a .wave::before {
position: absolute;
content: "";
width: 200%;
height: 200%;
top: 0;
left: 0;
transform: translate(-25%, -75%);
}

a .wave::after {
border-radius: 45%;
background: rgb(26, 23, 23);
box-shadow: 0 0 10px 5px #96e1ef, inset 0 0 5px #067cdc;
animation: animate 5s linear infinite;
opacity: 0.9;

}

a .wave::before {
border-radius: 50%;
box-shadow: 0 0 10px rgba(26, 26, 26, 0.5),
inset 0 0 5px rgba(26, 26, 26, 0.5);
background: rgba(26, 26, 26, 0.5);

animation: animate 7s linear infinite;
}

@keyframes animate {
0% {
transform: translate(-25%, -75%) rotate(0);
}
100% {
transform: translate(-25%, -75%) rotate(360deg);
}
}
a:hover .wave {
top: -120px;
}

a:hover {
box-shadow: 0 0 5px #21aaef, inset 0 0 5px #61b3ff;
transition-delay: 0.2s;
}