Узнать стоимость проекта

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

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

Заказать код
Вступить в чат
Поблагодарить
Видео-урок

Инструкция

1

Создайте кнопку в зеро-блок и присвойте класс : circle-btn

2

Вставьте код в блок Другое - "Т123"

3

Измените размер кнопки и цвет в коде на свое усмотрение

Код скопирован
<style>
.circle-btn {
  border: none;
  border-radius: 50%;
  background-color: #ff4081;
  color: #fff;
  font-size: 1rem;
  padding: 1rem 2rem;
  cursor: pointer;
  position: relative;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 64, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 64, 129, 0);
  }
}

/* добавляем стили для наведения */
.circle-btn:hover {
  background-color: #007bff; /* меняем цвет фона на синий */
}


/* добавляем комментарий */
/* стили для состояния наведения на кнопку */
</style>

Другие модификации