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>Restyling the trigger
asp-button-class puts your own classes on the button, and asp-button-text changes its label. Between them the trigger can match your design system without any CSS overrides fighting the component's own.
Do not lose the focus ring
Hover, focus and disabled all carry information, and focus is the one most often dropped when a button is restyled. Without a visible focus indicator the control becomes unusable with a keyboard — a much bigger regression than it looks in a design review.