JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Button</title>
    <link rel="stylesheet" href="styles.css"> <!-- Подключите ваш CSS файл -->
</head>
<body>
    <button class="tasks__item-btn" id="taskButton">Start</button>

    <script>
        // Пример данных задачи
        const task = {
            title: 'Task Title',
            status: 'active' // Измените на 'started', 'claim' или 'claimed' для тестирования
        };

        const taskButton = document.getElementById('taskButton');
        taskButton.setAttribute('data-title', task.title);

        if (task.status === 'start') {
            taskButton.textContent = 'Start';
        } else if (task.status === 'started') {
            taskButton.innerHTML = `<img src="static/img/ellipsis.svg" alt="Started">`;
        } else if (task.status === 'claim') {
            taskButton.textContent = 'Claim';
            taskButton.classList.add('active');
        } else if (task.status === 'claimed') {
            taskButton.innerHTML = `<img src="static/img/check_mark.svg" alt="Claimed">`;
        }
    </script>
    
</body>
</html>

CSS

.tasks__item-btn {
    border-radius: 30px;
    background: rgb(46, 46, 46);
    color: rgb(255, 255, 255);
    font-size: 13px;
    font-weight: 590;
    line-height: 169.230769%;
    padding: 7px 16px;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 63px;
    height: 36px; /* Установите высоту, если нужно */
}

.tasks__item-btn.active {
    background-color: #ffff00;
    color: #000;
}

.tasks__item-btn:active {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}

.tasks__item-btn img {
    margin-right: 5px; /* Отступ между изображением и текстом, если нужно */
}