Добавляем свою круглую анимированную кнопку в Tilda

Данный код помогает добавить свою анимированную кнопку в zero-block Tilda. Также возможно поменять цвет, надпись и вставить ссылку

Как выглядит :

Поменяйте название кнопки, цвет и стили на свое усмотрение

Добавили html-код в zero-блок и вставили в него код ниже

1
2

Что делаем :

Код для вставки в  HTML
<div class="wrap"><button class="Отправить">submit</button></div>

<style>
.wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button {
    min-width: 132px;
    min-height: 132px;
    font-size: 16px;
    letter-spacing: 1.3px;
    font-weight: 700;
    color: #313133;
    background: #4FD1C5;
    background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
    border: none;
    border-radius: 1000px;
    box-shadow: 0px 0px 24px rgba(79,209,197,.64);
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 10px;
}
button {
    width: 100px;
    height: 100px;
    z-index: inherit;
    overflow: visible;
}
button::before {
    content: '';
    border-radius: 1000px;
    min-width: calc(150px + 12px);
    min-height: calc(150px + 12px);
    border: 6px solid #00FFCB;
    box-shadow: 0 0 60px rgba(0,255,203,.64);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all .3s ease-in-out 0s;
}
.button:hover, .button:focus {
    color: #313133;
    transform: translateY(-6px);
}
button:hover::before, button:focus::before {
    opacity: 1;
}
button::after {
    content: '';
    width: 30px; height: 30px;
    background: transparent;
    border-radius: 100%;
    border: 6px solid #00FFCB;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring 1.5s infinite;
}
button:hover::after, button:focus::after {
    animation: none;
    display: none;
}
@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}
</style>
Больше модификаций

Возможно вы поверили в себя и сегодня нужно больше знаний. Посмотрите что есть еще интересного