Gradient Button Appearance

			<%@ Page Language="C#" MasterPageFile="~/Demo.master" AutoEventWireup="true" 
    Inherits="SharpPieces.DemoApp.GradientBtnAppearance" 
    CodeBehind="gradientbtnappearance.aspx.cs" %>


<asp:Content ID="Content2" runat="Server" ContentPlaceHolderID="headPlaceHolder">
    <title>SharpPieces - Gradient Button Appearance - Live Demo</title>
</asp:Content>
<asp:Content ID="Content3" runat="Server" ContentPlaceHolderID="descriptionPlaceholder">
    <h1>Gradient Button Appearance</h1>
    
    <p>The Gradient 
        Button is perfect when you have to spend valuable time with Photoshop for the need of 
        relatively simple gradient effects for image buttons; out-of-the-box, it also inherits 
        dynamic image effects and also performance features like client and server cache persistence.
        Below you can find some examples, 'Example 4' simulates the hover effect.</p>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="demoPlaceholder" Runat="Server">
    <div>
        <div style="float:left;">
            <piece:GradientButton ID="GradientButton1" runat="server" Height="30px" Width="152px" 
                RotateFlip="Rotate270FlipNone" OnClick="GradientButton_Click">
                <GradientBackground BorderColor="#404000" BorderWidth="1" GradientEndColor="#404040"
                    GradientStartColor="#C0C000" RoundCornerRadius="1" Type="ForwardDiagonal" />
                <Text Color="White" Font="DejaVu Sans, 8.25pt, style=Bold" HorizontalAlign="Center"
                    Value="Example 1" VerticalAlign="Center" />
            </piece:GradientButton>
            &nbsp;
        </div>
        <div>
            <div>        
                <piece:GradientButton ID="GradientButton4" runat="server" Height="26px" Width="115px">
                    <GradientBackground GradientStartColor="White" GradientEndColor="#DFE4EF"
                        RoundCornerRadius="3" Type="Vertical" BorderColor="LightGray" />
                    <Text Font="Tahoma, 10pt" HorizontalAlign="Center"
                        Value="Example 2" VerticalAlign="Center" Color="#002672" />
                </piece:GradientButton>
                <br />
                <br />
                <piece:GradientButton ID="GradientButton9" runat="server" Height="26px" Width="115px">
                    <GradientBackground GradientStartColor="#C5912C" GradientEndColor="#F6EA58"
                        RoundCornerRadius="0" Type="Vertical" BorderColor="Black" />
                    <Text Font="Palatino Linotype, 12pt, style=Bold" HorizontalAlign="Center"
                        Value="Example 3" VerticalAlign="Center" Color="White" />
                </piece:GradientButton>                
                <br />
                <br />
                <piece:GradientButton ID="GradientButton12" runat="server" Height="26px" Width="116px">
                    <GradientBackground GradientStartColor="#848484" GradientEndColor="#404040"
                        RoundCornerRadius="3" Type="VerticalSuddenFalloff" BorderColor="#272727" 
                        BorderWidth="1" InnerBorderColor="White" InnerBorderWidth="1" />
                    <Text Font="Arial, 10pt, style=Bold" HorizontalAlign="Center" Color="White"
                        Value="Example 4" VerticalAlign="Center" />
                </piece:GradientButton>
                <br />
                <br />
                <piece:GradientButton ID="GradientButton10" runat="server" Height="26px" Width="26px">
                    <GradientBackground GradientStartColor="Gray" GradientEndColor="LightGray"
                        RoundCornerRadius="0" Type="Vertical" BorderColor="DimGray" />
                    <Text Font="Arial, 15pt, style=Bold" HorizontalAlign="Center" Value="▲" 
                        VerticalAlign="Center" Color="White" />
                </piece:GradientButton>
                <piece:GradientButton ID="GradientButton11" runat="server" Height="26px" Width="26px">
                    <GradientBackground GradientStartColor="LightGray" GradientEndColor="Gray"
                        RoundCornerRadius="0" Type="Vertical" BorderColor="DimGray" />
                    <Text Font="Arial, 15pt, style=Bold" HorizontalAlign="Center" Value="▼" 
                        VerticalAlign="Center" Color="White" />
                </piece:GradientButton>
                <piece:GradientButton ID="GradientButton7" runat="server" Height="26px" Width="26px">
                    <GradientBackground GradientStartColor="White" GradientEndColor="LightGray"
                        RoundCornerRadius="13" Type="BlendingIn" BorderColor="Gray" />
                    <Text Font="Comic Sans MS, 15pt, style=Bold" HorizontalAlign="Center" Value="&gt;" 
                        VerticalAlign="Center" Color="Gray" />
                </piece:GradientButton>
                <piece:GradientButton ID="GradientButton13" runat="server" Height="26px" Width="26px">
                    <GradientBackground GradientStartColor="LightGray" GradientEndColor="Black"
                        RoundCornerRadius="13" Type="Vertical" BorderColor="DimGray" />
                    <Text Font="Arial Black, 15pt, style=Bold" HorizontalAlign="Center" Value="♣" 
                        VerticalAlign="Center" Color="White" />
                </piece:GradientButton>
                <br />
                <br />
            </div>
        </div>
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>
    <br />
</asp:Content>
		

			using System;
using System.Web.UI;
using SharpPieces.Web.Controls;
using System.Drawing;
using System.Web;
using SharpPieces.Web;

namespace SharpPieces.DemoApp
{

    /// <summary>
    /// The Gradient Button Appearance demo page.
    /// </summary>
    public partial class GradientBtnAppearance : Page
    {

        // Methods

        /// <summary>
        /// Raises the <see cref="E:System.Web.UI.Control.Load"/> event.
        /// </summary>
        /// <param name="e">The <see cref="T:System.EventArgs"/> object that contains the event data.</param>
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            if (!this.IsPostBack)
            {
                // hover effect for GradientButton12

                this.GradientButton12.GradientBackground.GradientStartColor = 
                    ColorTranslator.FromHtml("#949494");
                this.GradientButton12.GradientBackground.GradientEndColor = 
                    ColorTranslator.FromHtml("#505050");

                // preload the image to get an instant hover effect

                this.ClientScript.RegisterClientScriptBlock(
                    this.GetType(),
                    string.Format("{0}PreLoadHover", this.GradientButton12.ClientID),
                    string.Format("if (document.images) {{ new Image().src='{0}'; }};", 
                    Util.AppRelativeToAbsolute(this.GradientButton12.Src, false)),
                    true);

                this.GradientButton12.Attributes["onmouseover"] =
                    string.Format("this.src='{0}';", this.GradientButton12.Src);

                this.GradientButton12.GradientBackground.GradientStartColor = 
                    ColorTranslator.FromHtml("#848484");
                this.GradientButton12.GradientBackground.GradientEndColor = 
                    ColorTranslator.FromHtml("#404040");

                this.GradientButton12.Attributes["onmouseout"] =
                    string.Format("this.src='{0}';", this.GradientButton12.Src);
            }
        }

        /// <summary>
        /// Handles the Click event of the GradientButton controls.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">
        /// The <see cref="System.EventArgs"/> instance containing the event data.
        /// </param>
        protected void GradientButton_Click(object sender, EventArgs e)
        {
            if (sender is GradientButton)
            {
                this.Label1.Text =
                    string.Format("The '{0}' gradient button was clicked at {1} server time.",
                        (sender as GradientButton).Text.Value, DateTime.Now.ToLongTimeString());
            }
        }

    }

}