File Upload Button
A styled file input: a dashed label, an upload icon whose arrow keeps rising out of the tray, and a hint line. The real input sits inside the label, visually hidden, so it still opens the picker.
Also known as: css upload button, style input file button, custom file input css.
HTML
<label class="btn-file-upload">
<input class="btn-file-upload-input" type="file" multiple>
<span class="btn-file-upload-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4"/></svg>
<svg class="btn-file-upload-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V5M7.5 9.5 12 5l4.5 4.5"/></svg>
</span>
<span class="btn-file-upload-text">Upload files<small>PNG, JPG or PDF up to 10 MB</small></span>
</label>CSS
.btn-file-upload {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
gap: 0.8em;
padding: 0.75em 1.3em 0.75em 0.8em;
border: 2px dashed color-mix(in srgb, var(--c) 45%, transparent);
border-radius: 0.9em;
background: color-mix(in srgb, var(--c) 5%, transparent);
color: inherit;
text-align: left;
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.15s ease;}
.btn-file-upload-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
clip-path: inset(50%);
white-space: nowrap;
}
.btn-file-upload-icon {
position: relative;
flex: none;
overflow: hidden;
width: 2.5em;
height: 2.5em;
border-radius: 0.7em;
background: color-mix(in srgb, var(--c) 14%, transparent);
color: var(--c);
}
.btn-file-upload-icon svg {
position: absolute;
inset: 0.45em;
width: 1.6em;
height: 1.6em;
}
.btn-file-upload-arrow { animation: btn-file-upload-rise 2s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.btn-file-upload-text {
display: grid;
gap: 0.2em;
}
.btn-file-upload-text small {
font-size: 0.72em;
font-weight: 400;
opacity: 0.65;
}
.btn-file-upload:is(:hover, :focus-within) {
border-color: var(--c);
background: color-mix(in srgb, var(--c) 10%, transparent);
}
.btn-file-upload:focus-within {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.btn-file-upload:active { transform: scale(0.98); }
@keyframes btn-file-upload-rise {
0% { opacity: 0; transform: translateY(0.9em); }
20%, 55% { opacity: 1; transform: translateY(0); }
80%, 100% { opacity: 0; transform: translateY(-0.9em); }
}
@media (prefers-reduced-motion: reduce) {
.btn-file-upload, .btn-file-upload *, .btn-file-upload::before, .btn-file-upload::after, .btn-file-upload *::before, .btn-file-upload *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.