Custom Button Style

Replace the default button appearance with fully custom styling. Use CSS variables to control colors, borders, and hover states.

What you should see: a fully restyled button that still behaves like the built-in one: focusable, keyboard-activatable and wired to the same hidden input.

Drag & drop files here, or paste from clipboard

Outlined Button

Drag & drop files here, or paste from clipboard

<!-- Rounded purple button -->
<div style="--cu-btn-bg: #7c3aed;
 --cu-btn-text: #ffffff;
 --cu-btn-hover-bg: #6d28d9;
 --cu-btn-border: #7c3aed;
 --cu-btn-radius: 9999px;
 --cu-btn-padding: 0.625rem 1.5rem;
 --cu-btn-font-weight: 600;">
 <core-upload asp-upload-url="/api/upload/upload"
 asp-multiple="true"
 asp-progress="true">
 </core-upload>
</div>

<!-- Outlined button -->
<div style="--cu-btn-bg: transparent;
 --cu-btn-text: #0891b2;
 --cu-btn-hover-bg: #0891b2;
 --cu-btn-hover-text: #ffffff;
 --cu-btn-border: #0891b2;
 --cu-btn-radius: 0.5rem;">
 <core-upload asp-upload-url="/api/upload/upload"
 asp-progress="true">
 </core-upload>
</div>