SEO
Разработка
UX/UI Дизайн
Интеграции
Другое
Брендинг
+2
Добавляем свою круглую анимированную кнопку в Tilda
Данный код помогает добавить свою анимированную кнопку в zero-block 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>