<%@ Page Title="Custom Button Design" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Custom Button Design - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Custom Button Design</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Custom Button Design</div> <div class="demo-card-body"> <p class="demo-description"> Create a visually striking upload button with gradients, rounded corners,
 and hover effects using CSS overrides on the uploader button.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the browse button fully restyled (&quot;Upload Your Files&quot;) while staying keyboard-reachable and wired to the same hidden input.</div> <style>
 .gradient-uploader .au-uploader .au-select-btn,
 .gradient-uploader .au-select-btn {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
 color: #ffffff !important;
 border: none !important;
 border-radius: 2rem !important;
 padding: 0.75rem 2rem !important;
 font-size: 1rem !important;
 font-weight: 600 !important;
 letter-spacing: 0.03em !important;
 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
 cursor: pointer;
 transition: transform 0.2s, box-shadow 0.2s !important;
 }
 .gradient-uploader .au-uploader .au-select-btn:hover,
 .gradient-uploader .au-select-btn:hover {
 transform: translateY(-2px) !important;
 box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
 background: linear-gradient(135deg, #5568d3 0%, #653a8c 100%) !important;
 }
 .gradient-uploader .au-uploader .au-select-btn:active,
 .gradient-uploader .au-select-btn:active {
 transform: translateY(0) !important;
 }
 </style> <div class="gradient-uploader"> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ButtonText="Upload Your Files"
 ShowProgress="true" /> </div> <div class="code-panel"> <pre><code>&lt;style&gt;
 .gradient-uploader .au-select-btn {
 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 .au-select-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(102,126,234,0.5);
 }
&lt;/style&gt;

&lt;div class="gradient-uploader"&gt;
 &lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ButtonText="Upload Your Files"
 ShowProgress="true" /&gt;
&lt;/div&gt;</code></pre> </div> </div>
</div> 
</asp:Content>
