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
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
}
// 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
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
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
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
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
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;