Как на Tilda сделать кнопку, которая меняется по времени: «Зарегистрироваться» → «Регистрация закрыта»

Кнопка сначала зелёная "Регистрация" и ведёт на страницу регистрации, а после указанной даты сама меняет цвет и надпись на «Регистрация закрыта».

Где использовать такую кнопку

• Регистрация на вебинар / мастер-класс — кнопка закрывается в момент старта.
• Акции и распродажи — «Купить со скидкой» → «Акция завершена».
• Продажа билетов — «Купить билет» → «Продажа закрыта».
• Формы заявок — «Оставить заявку» → «Приём заявок завершён».

🔹 Что менять в коде

1. href="..." — ссылка, куда ведёт кнопка до закрытия.
2. 2025-09-22T15:50:00+03:00 — дата и время закрытия (указываем по Москве, UTC+3).
3. Цвета (не обязательно менять):

• зелёная кнопка → background-color:green;
• красная кнопка → button.style.backgroundColor = "red";

4.Тексты:

• до → Зарегистрироваться
• после → Регистрация закрыта

5.Замените ссылку на ваш Телеграм в строке: Следите за новыми событиями в нашем .....https://t.me/mybusinessby.....

<div style="text-align:center; margin:50px 0;">
<div id="countdown" style="font-size:16px; margin-bottom:15px; color:#333;">
Регистрация закроется через: <span id="timeRemaining">—:—:—</span> (по МСК)
</div>

<a href="https://mybusiness.by/tpost/m51zazjue1-kak-dobavit-svoi-sait-v-poisk-vnutri-cha"
id="regButton"
style="display:inline-block; padding:15px 30px; font-size:18px; font-weight:bold;
color:#fff; background-color:green; border-radius:8px; text-decoration:none;
transition:all 0.3s ease; cursor:pointer;">
Зарегистрироваться
</a>

<div id="afterCloseText" style="display:none; margin-top:15px; font-size:14px; color:#555;">
Следите за новыми событиями в нашем <a href="https://t.me/mybusinessby" target="_blank" style="color:#0077cc;">Telegram</a>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
const targetDate = new Date("2025-11-01T15:50:00+03:00");
const button = document.getElementById("regButton");
const countdown = document.getElementById("timeRemaining");
const afterCloseText = document.getElementById("afterCloseText");

function updateTime() {
const now = new Date();
const timeDiff = targetDate - now;

if (timeDiff <= 0) {
// Регистрация закрыта
button.innerText = "Регистрация закрыта";
button.style.backgroundColor = "red";
button.style.cursor = "not-allowed";
button.style.pointerEvents = "none";
button.removeAttribute("href");
button.setAttribute("aria-disabled", "true");
countdown.innerText = "Регистрация завершена";
afterCloseText.style.display = "block";
} else {
// Отображаем таймер
const hours = String(Math.floor(timeDiff / (1000 * 60 * 60))).padStart(2, '0');
const minutes = String(Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
const seconds = String(Math.floor((timeDiff % (1000 * 60)) / 1000)).padStart(2, '0');
countdown.innerText = `${hours}:${minutes}:${seconds}`;
}
}

updateTime();
setInterval(updateTime, 1000); // обновляем каждую секунду
});
</script>

🧠 Остались вопросы?

Вы можете обратиться к нашему AI‑помощнику Алексу — он подскажет, как сделать кнопку, разобраться с Tilda и не только.

👉 Перейти к помощнику Алексу