<%@ 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.0 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>

        <style>
            .gradient-uploader .ajaxuploader-button {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: #ffffff;
                border: none;
                border-radius: 2rem;
                padding: 0.75rem 2rem;
                font-size: 1rem;
                font-weight: 600;
                letter-spacing: 0.03em;
                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
                cursor: pointer;
                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);
            }
            .gradient-uploader .ajaxuploader-button:active {
                transform: translateY(0);
            }
        </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 .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);
  }
&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>
