Custom Button Design

Create a visually striking upload button with gradients, rounded corners, and hover effects using CSS overrides on the uploader button.

Drag & drop files here, or paste from clipboard

<style>
  .gradient-uploader .ajaxuploader-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(102,126,234,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .gradient-uploader .ajaxuploader-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.5);
  }
</style>

<div class="gradient-uploader">
  <au:AjaxFileUpload ID="Uploader1" runat="server"
      AllowMultiple="true"
      ButtonText="Upload Your Files"
      ShowProgress="true" />
</div>