如何让按钮内容高亮显示动画？

<style>
    .btn {
        background-color: #ccc;
        color: #fff;
        transition: background-color 0.3s ease;
    }

    .btn:hover {
        background-color: #ff0000;
    }
</style>

<button class="btn">按钮</button>

<style>
    .btn {
        background-color: #ccc;
        color: #fff;
    }

    .btn.highlight {
        background-color: #ff0000;
    }
</style>

<button class="btn">按钮</button>

<script>
    const btn = document.querySelector('.btn');

    btn.addEventListener('mouseenter', () => {
        btn.classList.add('highlight');
    });

    btn.addEventListener('mouseleave', () => {
        btn.classList.remove('highlight');
    });
</script>