Download Progress
The button body itself fills left-to-right like a true progress indicator while the arrow bounces, then morphs into a "Complete" state with a checkmark.
Download Progress the 2nd of 43 designs in the 43 CSS Button Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="btn-dl-surface">
<button class="btn-dl">
<span class="btn-dl-fill" aria-hidden="true"></span>
<span class="btn-dl-label">
<span class="btn-dl-arrow" aria-hidden="true">↓</span>
<span>Download File</span>
</span>
<span class="btn-dl-done">✓ Complete</span>
</button>
</div> .btn-dl-surface {
display: flex;
align-items: center;
justify-content: center;
padding: 32px 40px;
background: #f2efe9;
border-radius: 16px;
}
.btn-dl {
position: relative;
width: 200px;
height: 52px;
border: 2px solid #1a1814;
border-radius: 26px;
background: transparent;
cursor: pointer;
overflow: hidden;
user-select: none;
}
.btn-dl-fill {
position: absolute;
inset: 0;
background: #1a1814;
border-radius: 24px;
transform: translateX(-100%);
}
.btn-dl-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 1;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
color: #1a1814;
transition: color 0.2s;
}
.btn-dl-arrow { font-size: 16px; }
.btn-dl-done {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
color: #fff;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s, transform 0.3s;
}
.btn-dl.is-loading .btn-dl-fill {
transform: translateX(0);
transition: transform 1.4s cubic-bezier(.4,0,.2,1);
}
.btn-dl.is-loading .btn-dl-label { color: #fff; }
.btn-dl.is-loading .btn-dl-arrow { animation: btn-dl-bounce 0.6s infinite alternate; }
@keyframes btn-dl-bounce {
from { transform: translateY(-3px); }
to { transform: translateY(3px); }
}
.btn-dl.is-done .btn-dl-fill { transform: translateX(0); }
.btn-dl.is-done .btn-dl-label { opacity: 0; }
.btn-dl.is-done .btn-dl-done { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
.btn-dl.is-loading .btn-dl-arrow { animation: none; }
} document.querySelectorAll('.btn-dl').forEach(function (btn) {
var busy = false;
btn.addEventListener('click', function () {
if (busy) return;
busy = true;
btn.classList.add('is-loading');
setTimeout(function () {
btn.classList.remove('is-loading');
btn.classList.add('is-done');
setTimeout(function () {
btn.classList.remove('is-done');
busy = false;
}, 2500);
}, 1600);
});
});