CoodeVerse Animated Upload Button is a free, downloadable HTML CSS JS UI component. Features: CSS glassmorphism (background:rgba(255,255,255,0.06), backdrop-filter:blur(10px), subtle white border), CSS gradient border glow via ::before pseudo-element using CSS mask / mask-composite:exclude technique (inset:-2px, padding:2px, gradient background, mask punches out content area), sweeping shine animation (.shine element with skewX(-18deg), transitions from left:-120% to left:130% on hover via CSS transition:1s), simulated upload progress bar (JavaScript recursive setTimeout loop, random increments 5–20, runs every 120ms, updates div width, shows Upload Complete → resets after 2s), hidden file input triggered by wrapping label. Zero libraries. CSS variables, radial-gradient background. Free under CC BY 4.0.
The CoodeVerse Animated Upload Button is a free, downloadable HTML CSS JS UI component featuring CSS glassmorphism (backdrop-filter blur, glass background), a gradient border glow on hover built with the CSS mask pseudo-element technique, a sweeping shine animation (skewed element transitioning across on hover), and a simulated upload progress bar triggered by JavaScript when a file is selected. Zero libraries — pure HTML, advanced CSS, and vanilla JS. Full source code is free to download.
Tech Stack
HTML + CSS + JS
Price
$0 — Free Forever
Libraries
None — Vanilla only
CSS Technique
mask-composite:exclude
Progress Reset
After 2 seconds
Sign-up
None required
Welcome! CoodeVerse Animated Upload Button is 100% free — CSS glassmorphism, gradient glow, shine effect, full source code, no sign-up.
Free downloadable animated upload button built with pure HTML, advanced CSS (glassmorphism with backdrop-filter blur, gradient border via mask-composite:exclude pseudo-element, skewX shine sweep animation), and vanilla JavaScript (setTimeout progress simulation, Upload Complete state, auto-reset). No libraries. Download full source code free.
Animated Upload Button
Updated March 2026
Windows Tip: After downloading the ZIP, right-click the folder → Properties → check "Unblock" (if visible) → Apply → OK. This removes the "file came from another computer" warning so everything works perfectly!
background:rgba(255,255,255,0.06) for translucency, backdrop-filter:blur(10px) to blur content behind, border:1px solid rgba(255,255,255,0.12) for the glass edge, and box-shadow for depth — the four pillars of modern glassmorphism.
Gradient Border via CSS mask
::before with inset:-2px, padding:2px, gradient background. CSS mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) with mask-composite:exclude punches out the inner area, leaving only the gradient ring.
Shine Sweep Animation
.shine element with transform:skewX(-18deg) and a white gradient. Default left:-120% hides it off-screen. On :hover, left:130% with transition:1s sweeps it diagonally across. pointer-events:none prevents interaction.
CSS overflow:hidden clipping
overflow:hidden on the parent .upload-btn clips both the .shine element and the .progress bar to the button boundaries — essential for both effects to work correctly within the rounded corners.
Hidden File Input via Label
Wrapping <input type="file"> inside a <label> and setting display:none on the input allows any click on the label to open the file picker — no JavaScript .click() needed. The cleanest way to style file inputs.
JS Progress Simulation
Recursive setTimeout(simulate, 120) loop. Each call: p += 5 + Math.random() * 15 (random increment), progress.style.width = Math.min(p,100) + '%'. CSS transition:width 0.15s linear smooths each jump. Stops at 100, resets after 2s.
How to Build an Animated Glassmorphic Upload Button
1
Create the HTML structure
Use a <label> as the outer container. Inside: hidden <input type="file">, an SVG icon, a text <span id="labelText">, an empty <span class="shine">, and an empty <div class="progress">.
2
Apply glassmorphism styling
Set background:rgba(255,255,255,0.06), backdrop-filter:blur(10px), border:1px solid rgba(255,255,255,0.12), border-radius:14px, overflow:hidden, and a dark box-shadow. Add transition:0.25s ease for hover smoothness.
3
Build the gradient border glow
On ::before: set inset:-2px, border-radius:inherit, padding:2px, gradient background. Apply mask with two linear-gradient(#fff 0 0) values and mask-composite:exclude. Animate opacity from 0 to 1 on :hover.
4
Add the shine sweep
Style .shine with position:absolute, left:-120%, width:50%, height:100%, transform:skewX(-18deg), and a 3-stop transparent-white-transparent gradient. On :hover set left:130% with transition:1s.
5
Simulate upload with JavaScript
Listen to input.addEventListener('change'). Set labelText.textContent = 'Uploading...'. Run recursive simulate() with setTimeout(120ms), incrementing p by random 5–20. Update progress.style.width. On completion: show "Upload Complete ✓", reset after 2s.
The modern technique uses a ::before pseudo-element with inset:-2px, padding:2px, and a gradient background. Apply CSS mask: two linear-gradient(#fff 0 0) values — one with content-box, one without — and set mask-composite:exclude. This punches out the content area, leaving only the gradient border ring. No border-image required. This is exactly how the CoodeVerse Animated Upload Button creates its glow ring.
backdrop-filter:blur(Npx) applies a Gaussian blur to whatever is rendered behind the element. The element itself must be semi-transparent (using rgba or lower opacity background) for the blur to be visible through it. It's the core CSS property behind glassmorphism design. Supported in Chrome 76+, Edge 79+, Safari 9+, Firefox 103+.
Add an absolutely-positioned child element with overflow hidden on the parent. Give the child a white gradient, transform:skewX(-18deg) for the slant, and set left:-120% by default. On :hover, CSS transition moves left to 130%. The parent's overflow:hidden clips it to the button bounds. The CoodeVerse Animated Upload Button uses this exact .shine technique.
Wrap the file input inside a label element and set display:none on the input. Any click on the label triggers the file dialog. Style the label as your custom button with any CSS you want. The CoodeVerse Animated Upload Button uses this technique — the entire glassmorphic label is the button, with the actual input hidden inside.
Glassmorphism is a UI design trend creating frosted glass card effects using CSS. Key properties: background:rgba(255,255,255,0.06) for translucency, backdrop-filter:blur(10px) for background blur, a subtle white border (border:1px solid rgba(255,255,255,0.12)), and a soft box-shadow. Popular in SaaS dashboards, landing pages, and UI components in 2024–2026.
Frequently Asked Questions
Is this animated upload button free?
Yes. 100% free — no account, payment, or sign-up. Download ZIP with HTML, CSS, and JS. Use freely in personal or commercial projects under CC BY 4.0.
Can I use this in a React or Vue project?
Yes. The CSS classes and structure translate directly. In React: convert to JSX (class → className), move the JS logic into a useState/useEffect handler, and import the CSS. In Vue: use the template and place the JS in methods. The core CSS techniques work in any framework.
How do I connect this to a real file upload server?
Replace the simulate() function with a real fetch() or XMLHttpRequest call. Use the upload.onprogress event on XHR to get real progress percentages: progress.style.width = (event.loaded / event.total * 100) + '%'. The CSS and HTML structure stays exactly the same.
How do I change the gradient colours?
Edit the CSS variable: --accent: linear-gradient(135deg, #06b6d4, #7c3aed, #ec4899). Replace the three hex values with your brand colours. This single variable controls the gradient border glow AND the progress bar, so both update automatically.
Why does backdrop-filter not work in my browser?
The element must have a semi-transparent background (not solid white or solid black) for backdrop-filter to be visible. Also ensure the parent doesn't have overflow:hidden clipping it. In older Firefox (below 103), enable gfx.webrender.all in about:config, or use the @supports (backdrop-filter: blur(1px)) at-rule for a fallback.
How do I make the progress bar show real file name?
Inside the input.addEventListener('change') handler, read the filename: const name = input.files[0].name. Truncate if needed: name.length > 20 ? name.slice(0,17)+'...' : name. Display in the labelText span before starting the simulate loop.
Can I add drag-and-drop support to this button?
Yes. Add dragover, dragleave, and drop event listeners to the label element. On dragover: e.preventDefault() and add an active class. On drop: read e.dataTransfer.files[0] and pass it to the same simulate() progress function. The visual styling stays identical.
What is mask-composite:exclude in CSS?
mask-composite:exclude (standard) and -webkit-mask-composite:xor (webkit prefix) combine two mask layers by showing areas covered by only one, not both. When combined with two gradient masks (one with content-box, one without), it hides the centre of the pseudo-element and reveals only the outer ring — creating the gradient border effect.