<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A button with a countdown timer</title>
    <style>
        /* Устанавливаем размер холста */
        html, body {
            width: 2560px;
            height: 1440px;
            margin: 0;
            padding: 0;
            background: transparent; /* Прозрачный фон */
            display: flex;
            justify-content: center; /* Выравнивание по горизонтали */
            align-items: flex-start; /* Выравнивание по вертикали (вверху) */
            overflow: hidden; /* Скрываем всё, что выходит за пределы холста */
        }

        /* Стили для кнопки */
        .glare-button {
            border: none;
            border-radius: 20px;
            padding: 5px 20px;
            background: linear-gradient(120deg, #275bca, #1a3e96); /* Градиентный фон кнопки для объемного эффекта */
            color: #fff; /* Белый цвет текста на кнопке */
            position: relative;
            overflow: hidden;
            width: 300px;
            font-size: 20px;
            padding: 20px; /* Отступы внутри кнопки */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Добавляем тень для трехмерного эффекта */
            cursor: pointer; /* Изменение курсора при наведении */
            margin-top: 20px; /* Отступ сверху */
        }

        /* Стили для создания блика на кнопке */
        .glare-button:before {
            content: "";
            position: absolute;
            width: 100px;
            height: 100%;
            background-image: linear-gradient(
                120deg,
                rgba(255, 255, 255, 0) 30%, /* Прозрачность начала блика */
                rgba(255, 255, 255, 0.8), /* Цвет блика */
                rgba(255, 255, 255, 0) 70% /* Прозрачность конца блика */
            );
            top: 0;
            left: -100px;
            animation: shine 2s infinite linear; /* Анимация блика */
        }

        /* Ключевые кадры для анимации блика */
        @keyframes shine {
            0% {
                left: -100px; /* Начальная позиция блика (левая сторона кнопки) */
            }
            20% {
                left: 100%; /* Позиция блика в конце (правая сторона кнопки) */
            }
            100% {
                left: 100%; /* Завершение анимации */
            }
        }
    </style>
</head>
<body>
    <button class="glare-button" id="timer-button">05:00:00</button>

    <script>
        // Устанавливаем время обратного отсчета в секундах (5 часов = 5 * 60 * 60)
        let timeLeft = 5 * 60 * 60;

        // Функция для обновления таймера
        function updateTimer() {
            const hours = Math.floor(timeLeft / 3600);
            const minutes = Math.floor((timeLeft % 3600) / 60);
            const seconds = timeLeft % 60;

            // Форматируем время в формат HH:MM:SS
            const formattedTime = 
                String(hours).padStart(2, '0') + ':' +
                String(minutes).padStart(2, '0') + ':' +
                String(seconds).padStart(2, '0');

            // Обновляем текст на кнопке
            document.getElementById('timer-button').textContent = formattedTime;

            // Уменьшаем оставшееся время на 1 секунду
            timeLeft--;

            // Если время вышло, останавливаем таймер
            if (timeLeft < 0) {
                clearInterval(timerInterval);
                document.getElementById('timer-button').textContent = "Время вышло!";
            }
        }

        // Запускаем таймер с интервалом 1 секунда
        const timerInterval = setInterval(updateTimer, 1000);

        // Инициализируем таймер сразу
        updateTimer();
    </script>
</body>
</html>