<%@ Page Title="Icon-Only Button" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Icon-Only Button - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Icon-Only Button</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Icon-Only Upload Button</div> <div class="demo-card-body"> <p class="demo-description"> A compact icon-only upload button using a Unicode icon.
 Ideal for toolbars or tight UI areas where text labels are unnecessary.
 </p> <style> .icon-uploader .au-select-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 48px;
 height: 48px;
 border-radius: 50%;
 padding: 0;
 font-size: 1.25rem;
 background-color: #0d6efd;
 color: #fff;
 border: none;
 box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
 transition: background-color 0.2s, transform 0.2s;
 }
 .icon-uploader .au-select-btn:hover {
 background-color: #0b5ed7;
 transform: scale(1.1);
 }
 </style> <div class="icon-uploader"> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ButtonText="&#x2B06;"
 ShowProgress="true" /> </div> <p class="text-muted mt-2"><small>Click the circular button above to upload files.</small></p> <div class="code-panel"> <pre><code>&lt;style&gt;
 .icon-uploader .au-select-btn {
 width: 48px; height: 48px;
 border-radius: 50%;
 padding: 0;
 font-size: 1.25rem;
 background-color: #0d6efd;
 color: #fff;
 border: none;
 }
 .icon-uploader .au-select-btn:hover {
 transform: scale(1.1);
 }
&lt;/style&gt;

&lt;div class="icon-uploader"&gt;
 &lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 ButtonText="&amp;#x2B06;"
 ShowProgress="true" /&gt;
&lt;/div&gt;</code></pre> </div> </div>
</div> 
</asp:Content>
