Bu şekilde yerleştirirsen çalışır.

<html>
<head>

    <title></title>
    
    <style>
        .button {
        background-color: #ddcccc;
        border: 1px solid black;
        color: black;
        font-family: Arial;
        font-size: small;
        text-decoration: none;
        padding: 3px;
    }
    </style>

</head>
<body>

<a href="downloadFile.zip" id="download" class="button">Download the file...</a>

<script>

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;

downloadButton.parentNode.replaceChild(newElement, downloadButton);

id = setInterval(function() {
    counter--;
    if(counter < 0) {
        newElement.parentNode.replaceChild(downloadButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
    }
}, 1000);


</script>
</body>
</html>