Кнопка в Тильде: как сделать, настроить ссылку и анимацию

Как сделать кнопку в стандартном блоке Тильды

Большинство блоков Тильды — обложки, блоки с текстом, карточки, формы — уже содержат одну или две кнопки. Порядок такой:

1. Добавьте блок с кнопкой. Подходящие блоки есть в категориях «Обложка», «Заголовок», «Форма и кнопка», «Карточки». Если нужна просто отдельная кнопка, ищите блок в категории «Форма и кнопка».
2. Откройте вкладку «Контент». Найдите поля кнопки: текст и ссылку. Если поле текста пустое, кнопка не отображается.
3. Впишите текст кнопки. Глагол и результат: «Рассчитать стоимость», а не «Подробнее».
4. Укажите ссылку. Какие варианты есть — в таблице ниже.
5. Откройте «Настройки» блока. Там цвет кнопки и текста, обводка, скругление углов, тень и эффект при наведении.
6. Сохраните и опубликуйте страницу. Проверьте кнопку на опубликованной версии, а не только в редакторе.

Если нужна вторая кнопка рядом, например «Позвонить» и «Написать», выбирайте блок, где предусмотрены две кнопки. Вторую обычно делают менее заметной: контуром вместо заливки.

Как сделать кнопку в Zero Block

Zero Block — редактор Тильды со свободным расположением элементов. По справке Тильды в нём каждый элемент ставится вручную, а кнопка — отдельный тип элемента.

1. Добавьте элемент «Кнопка» через плюс в панели редактора.
2. Задайте текст и ссылку в панели настроек элемента справа.
3. Настройте внешний вид: размер, цвет фона и текста, обводку, скругление, шрифт.
4. Настройте состояние при наведении: цвет фона, текста и обводки меняются, когда на кнопку наводят курсор.
5. Проверьте все ширины экрана. В Zero Block положение и размер кнопки задаются отдельно для каждой ширины. Если дизайнер настроил только компьютер, на телефоне кнопка может уехать за край или наложиться на текст.
6. Включите отслеживание кликов, если к сайту подключена аналитика: в настройках элемента есть параметр отправки данных в аналитику.

Когда стоит делать блок в Zero Block, а когда хватит стандартного, разобрали в статье Zero Block в Тильде. Для одной кнопки Zero Block обычно не нужен: стандартный блок даёт аккуратный результат, а мобильная версия собирается автоматически.

Ссылка кнопки в Тильде: все варианты

Хвост «ссылка кнопки тильда» в поиске — один из самых частых. Вот что можно поставить в поле ссылки:

Кнопка, которая открывает попап

Самый частый сценарий на лендингах: кнопка «Оставить заявку» открывает окно с формой. По ответу Тильды о попапах порядок такой: добавить на страницу попап-блок, скопировать ссылку, указанную на блоке, и вставить её в кнопку. У каждого попапа ссылка должна быть уникальной. Если на странице два попапа с одинаковой ссылкой, откроется не тот.

Что предлагать в окне и как не раздражать посетителей, — в статье попап на Тильде.

Кнопка с якорем

Якорь прокручивает страницу к нужному блоку. Пример: кнопка «Рассчитать стоимость» на первом экране ведёт к калькулятору в середине страницы. Номер блока виден в его настройках, ссылка выглядит как #rec123456789. Можно задать и своё понятное имя якоря в настройках блока — тогда ссылка будет вида #calc.

Кнопка мессенджера

Кнопки мессенджеров — отдельная тема: какие ставить в 2026 году, в фирменных ли цветах, как считать нажатия и не терять переписки в аналитике. Мы подробно разобрали её в статье кнопки мессенджеров на сайте. Один совет здесь: добавьте в ссылку заготовленный текст первого сообщения, если мессенджер это поддерживает. Человеку проще отправить готовую фразу, чем придумывать, с чего начать.

Анимация и эффект при наведении

Ховер — изменение кнопки при наведении курсора. Он подсказывает, что элемент кликабельный.

В стандартных блоках эффект при наведении задаётся в «Настройках» блока: цвет фона, текста и обводки в момент наведения. Делайте изменение заметным, но спокойным: чуть темнее или светлее основного цвета.

В Zero Block у кнопки есть отдельное состояние при наведении, а для сложных эффектов — анимация. Тильда поддерживает базовую, пошаговую и триггерную анимацию, и среди условий запуска есть наведение и клик. Как настроить анимацию и не замедлить сайт, — в статье анимация в Тильде.

Что работает:

• плавная смена цвета за 0,2–0,3 секунды;
• лёгкая тень или небольшое увеличение кнопки;
• стрелка внутри кнопки, которая сдвигается вправо.

Что мешает:

• кнопка, которая постоянно пульсирует или качается: её замечают, но она раздражает;
• эффекты длиннее полсекунды;
• ховер, который меняет размер кнопки и сдвигает соседние элементы.

И важное: на телефоне наведения нет. Кнопка должна выглядеть кликабельной без ховера — с заливкой или явной обводкой.

Как сделать кнопку, на которую нажимают

Техническая настройка — половина дела. Вторая половина — сама кнопка как предложение. Вот что мы проверяем на разборах.

Текст кнопки продолжает заголовок. Если заголовок «Ремонт ванной под ключ за 14 дней», кнопка «Рассчитать стоимость моей ванной» продолжает мысль. Кнопка «Подробнее» обрывает её.

Микротекст под кнопкой снимает страх: «Ответим за 15 минут», «Без звонков, пришлём смету в мессенджер», «Бесплатно и ни к чему не обязывает». Это одна строка мелким шрифтом, но она часто влияет на решение нажать.

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

Как отследить клики по кнопке в Метрике

Без целей в Метрике вы не узнаете, нажимают ли на кнопку и какая из трёх кнопок работает лучше.

1. Подключите Метрику к сайту в настройках Тильды. Пошагово — в статье Яндекс Метрика на Тильде.
2. Для кнопок стандартных блоков Тильда передаёт в Метрику событие клика в виде виртуального адреса вида /tilda/click/recНОМЕР/button1. Цель типа «Посещение страниц» с этим адресом посчитает нажатия именно этой кнопки.
3. Для кнопок в Zero Block включите в настройках элемента отправку данных в аналитику, как описано в ответе Тильды о целях.
4. Проверьте цель: нажмите на кнопку на опубликованном сайте и посмотрите, засчиталась ли цель в Метрике.
5. Сравните кнопки. Через пару недель видно, какая кнопка собирает клики, а какая просто занимает место.

Отдельная цель на клик полезна, но главная цель — отправка формы или переход в мессенджер. Клик по кнопке без заявки говорит о проблеме в форме или попапе.

Условный пример: одна кнопка вместо трёх

Пример условный, цифры ориентировочные. Лендинг студии маникюра на Тильде, 1 500 визитов в месяц.

Было: на первом экране три одинаково ярких кнопки: «Записаться», «Наши работы», «Прайс». Текст «Записаться» ведёт в попап с формой из пяти полей. Цели в Метрике — только на отправку формы. Конверсия — 2%, 30 записей.

Стало: одна главная кнопка «Выбрать время на этой неделе» ведёт сразу в онлайн-запись. «Наши работы» и «Прайс» — текстовыми ссылками ниже. Под кнопкой — «Мастер подтвердит запись в течение часа». Цели на клик по главной кнопке и на завершение записи.

Допустим, конверсия выросла до 3,2% — это 48 записей вместо 30. При среднем чеке 2 500 ₽ разница — 45 000 ₽ в месяц. А цели показали, что 40% нажавших не завершают запись. Следующий шаг понятен: упрощать саму запись.

Частые ошибки с кнопками в Тильде

• Пустая ссылка. Кнопка есть, а нажатие ничего не делает. Чаще всего после копирования блока.
• Ссылка на попап, которого нет на странице. Попап удалили или переименовали, а кнопки остались.
• Две кнопки открывают разные попапы с одинаковой ссылкой. Открывается не та форма.
• Телефон с пробелами в ссылке tel: — на некоторых телефонах не срабатывает.
• Кнопка в Zero Block не настроена на мобильных ширинах — уезжает за экран.
• Внешняя ссылка открывается в той же вкладке — человек уходит на чужой сайт и не возвращается.

Если кнопки работают, а заявок мало, проблема может быть в форме или в пути заявки до менеджера. Мы проверим сайт целиком: от кнопки до сообщения в CRM.