Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Gradient Button

Siticone Gradient Button

The SiticoneGradientButton is a high-performance, fully customizable button control that replaces flat colors with multi-stop linear gradients. It features advanced visual styling including soft drop shadows, shine effects, fluid spring animations on click, and comprehensive border customization.

Gradient System

The core feature of this control is its ability to render smooth linear gradients.

Property Type Description & Usage Example
GradientColors Color[] btn.GradientColors = new[] { Color.Magenta, Color.Blue }; An array of colors used to create the gradient. Two or more colors create a smooth transition.
GradientAngle float btn.GradientAngle = 45f; The angle of the linear gradient in degrees.
GradientDirection LinearGradientMode btn.GradientDirection = LinearGradientMode.Vertical; Sets a preset direction (Horizontal, Vertical, ForwardDiagonal, BackwardDiagonal). Setting this property automatically updates GradientAngle.

Shape & Borders

Controls for the button's physical geometry and outline styling.

Property Type Description & Usage Example
AutoRoundCorners bool btn.AutoRoundCorners = true; If true, automatically calculates the radius to create perfectly rounded pill-shaped ends based on the control's height.
TopLeftRadius int btn.TopLeftRadius = 15;
TopRightRadius int btn.TopRightRadius = 15;
BottomLeftRadius int btn.BottomLeftRadius = 15;
BottomRightRadius int btn.BottomRightRadius = 15;
BorderWidth int btn.BorderWidth = 2; The thickness of the border in pixels.
BorderColor Color btn.BorderColor = Color.White; The solid color of the border.
BorderGradient bool btn.BorderGradient = true; Enables gradient coloring for the border itself.
BorderGradientColors Color[] btn.BorderGradientColors = new[] { Color.Gold, Color.Red }; The colors used for the border gradient.
BorderDashStyle DashStyle btn.BorderDashStyle = DashStyle.Dot; Defines the pattern of the border line (Solid, Dot, Dash, etc.).

Shadows & Depth

CSS-like shadow properties to create depth and elevation.

Property Type Description & Usage Example
EnableDropShadow bool btn.EnableDropShadow = true; Toggles the rendering of the drop shadow.
ShadowColor Color btn.ShadowColor = Color.FromArgb(50, Color.Black);
ShadowOffsetX int btn.ShadowOffsetX = 2; Horizontal offset of the shadow.
ShadowOffsetY int btn.ShadowOffsetY = 4; Vertical offset of the shadow.
ShadowBlur int btn.ShadowBlur = 20; The softness/radius of the shadow blur.
ShadowSpread int btn.ShadowSpread = -5; Expands or contracts the shadow size.

Interaction & Animation

The button supports multiple animation types for hover and click states to provide rich user feedback.

Property Type Description & Usage Example
EnableHoverEffect bool btn.EnableHoverEffect = true; Enables visual changes when the mouse hovers over the control.
HoverStyle HoverEffectStyle btn.HoverStyle = HoverEffectStyle.Glow; Defines the type of hover animation (ColorShift, Brighten, Glow, Pulse, Shine).
HoverAnimationSpeed int btn.HoverAnimationSpeed = 10; Controls the speed of the hover transition.
HoverIntensity float btn.HoverIntensity = 0.3f; Strength of the hover effect (0.0 to 1.0).
HoverGlowColor Color btn.HoverGlowColor = Color.Cyan; The color emitted when HoverStyle is set to Glow or Pulse.
HoverShiftColor Color btn.HoverShiftColor = Color.Magenta; The target gradient tint when HoverStyle is set to ColorShift.
HoverBrightenFactor float btn.HoverBrightenFactor = 0.2f; Controls how much lighter the button gets when HoverStyle is Brighten (0.0 to 0.5).
EnableSpringEffect bool btn.EnableSpringEffect = true; Enables a scaling animation (shrink/bounce) when clicked.
SpringEffectMinScale float btn.SpringEffectMinScale = 0.95f; The minimum scale factor when the button is pressed.
EnableRippleEffectFx bool btn.EnableRippleEffectFx = true; Toggles the expanding ripple animation on click.
RippleColor Color btn.RippleColor = Color.White;
RippleOpacity int btn.RippleOpacity = 120; Opacity of the ripple (0-255).

Typography & Images

Support for icons and advanced text rendering.

Property Type Description & Usage Example
Image Image btn.Image = Resources.Icon;
ImageAlign ContentAlignment btn.ImageAlign = ContentAlignment.MiddleLeft;
ImageSize Size btn.ImageSize = new Size(24, 24);
ImageOffset Point btn.ImageOffset = new Point(0, -2); Adjusts the precise location of the image relative to its aligned position.
TextImageRelation TextImageRelation btn.TextImageRelation = TextImageRelation.ImageBeforeText; Controls the relative positioning of text and image.
TextRenderingMode TextRenderingHint btn.TextRenderingMode = TextRenderingHint.AntiAlias; Controls how text is rasterized for sharpness.
TextShadow bool btn.TextShadow = true;
TextShadowColor Color btn.TextShadowColor = Color.Black;
TextShadowOffset int btn.TextShadowOffset = 1;

Performance & States

Property Type Description & Usage Example
UltraFastPerformance bool btn.UltraFastPerformance = true; Disables complex animations, ripples, and high-quality rendering features to maximize speed. Useful for lists with many buttons.
DisabledGradientColors Color[] btn.DisabledGradientColors = new[] { Color.Gray }; The gradient used when Enabled is false.
DisabledBorderColor Color btn.DisabledBorderColor = Color.LightGray;
DisabledForeColor Color btn.DisabledForeColor = Color.DimGray;

Enumerations

HoverEffectStyle Enum
public enum HoverEffectStyle
{
    ColorShift, // Smoothly transitions the gradient colors to HoverShiftColor
    Brighten,   // Lightens the button colors
    Glow,       // Emits a soft outer glow
    Pulse,      // Emits a pulsating outer glow
    Shine       // A light reflection passes across the button surface
}
GradientThemePreset Enum
// Available presets in the Smart Tag menu
public enum GradientThemePreset
{
    Custom, Success, Info, Warning, Danger, Light, White, Secondary, 
    Dark, Black, RoyalIndigo, SleekGraphite, SunsetOrange, LushMeadow, 
    CrimsonRed, OceanBlue, Aurora, Mint, Gold, Cyberpunk, Pink, Teal, Earth
}

Usage Examples

Example 1: Creating a "Cyberpunk" Style Button

C# - Cyberpunk Button
var btn = new SiticoneGradientButton();
btn.Text = "LAUNCH";
btn.ForeColor = Color.Cyan;
btn.GradientColors = new[] { Color.FromArgb(20, 20, 40) }; // Dark background

// Border Gradient
btn.BorderWidth = 2;
btn.BorderGradient = true;
btn.BorderGradientColors = new[] { Color.Magenta, Color.Cyan };

// Sharp Corners
btn.AutoRoundCorners = false;
btn.TopLeftRadius = 4;
btn.TopRightRadius = 4;
btn.BottomLeftRadius = 4;
btn.BottomRightRadius = 4;

// Neon Glow Shadow
btn.EnableDropShadow = true;
btn.ShadowColor = Color.FromArgb(80, 255, 0, 255);
btn.ShadowBlur = 15;

Example 2: Creating a Soft "Success" Button

C# - Success Button
var btn = new SiticoneGradientButton();
btn.Text = "Confirm";
btn.ForeColor = Color.White;

// Green Gradient
btn.GradientColors = new[] { Color.FromArgb(25, 190, 100), Color.FromArgb(10, 160, 70) };
btn.GradientDirection = LinearGradientMode.Vertical;

// Interactions
btn.EnableHoverEffect = true;
btn.HoverStyle = HoverEffectStyle.Brighten;
btn.EnableSpringEffect = true; // Click bounce

// Pill Shape
btn.AutoRoundCorners = true;

Example 3: Social Media Login Button

C# - Facebook Login
var btn = new SiticoneGradientButton();
btn.Text = "Continue with Facebook";
btn.ForeColor = Color.White;
btn.Font = new Font("Segoe UI", 10F, FontStyle.Bold);

// Facebook Blue Gradient
btn.GradientColors = new[] { Color.FromArgb(24, 119, 242), Color.FromArgb(20, 100, 200) };

// Icon Setup
btn.Image = Properties.Resources.facebook_icon_white;
btn.ImageSize = new Size(20, 20);
btn.ImageAlign = ContentAlignment.MiddleLeft;
btn.ImageOffset = new Point(10, 0); // Push icon slightly right

// Styling
btn.AutoRoundCorners = true;
btn.EnableDropShadow = true;
btn.ShadowColor = Color.FromArgb(40, 24, 119, 242);
btn.ShadowOffsetY = 3;

Example 4: "Glassmorphism" Effect

C# - Glass Effect
var btn = new SiticoneGradientButton();
btn.Text = "Glass Button";

// Semi-transparent Gradient
btn.GradientColors = new[] { Color.FromArgb(50, 255, 255, 255), Color.FromArgb(20, 255, 255, 255) };
btn.GradientAngle = 135f;

// Thin, semi-transparent border
btn.BorderWidth = 1;
btn.BorderColor = Color.FromArgb(100, 255, 255, 255);

// Glow on hover to simulate light hitting glass
btn.HoverStyle = HoverEffectStyle.Glow;
btn.HoverGlowColor = Color.FromArgb(80, 255, 255, 255);
btn.HoverIntensity = 0.5f;

// Soft Shadow
btn.ShadowBlur = 30;
btn.ShadowColor = Color.FromArgb(30, 0, 0, 0);

Example 5: Attention-Grabbing "Pulse" Action

C# - Pulse Action
var btn = new SiticoneGradientButton();
btn.Text = "LIVE NOW";
btn.ForeColor = Color.White;

// Red Gradient
btn.GradientColors = new[] { Color.Red, Color.DarkRed };

// Pulse Animation
btn.EnableHoverEffect = true;
btn.HoverStyle = HoverEffectStyle.Pulse;
btn.HoverGlowColor = Color.Red;
btn.HoverIntensity = 0.8f;
btn.HoverAnimationSpeed = 15; // Fast pulse

// Remove shadow to focus on glow
btn.EnableDropShadow = false;