Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Expressive Button

Siticone Expressive Button

The SiticoneExpressiveButton is a next-generation button control designed for modern, interactive user interfaces. It goes beyond simple clicks by incorporating Material Design 3 aesthetics, fluid state transitions, and unique "Expressive" shape morphing. Features include liquid ripple effects, physics-based squeeze animations, gradient support, and a comprehensive event system for detailed interaction handling.

Colors & Gradients

Define the visual identity of the button across its various states (Idle, Hover, Press, Disabled).

Property Type Description & Usage Example
FillColor Color btn.FillColor = Color.DodgerBlue; The primary background color in the idle state.
FillColor2 Color btn.FillColor2 = Color.Cyan; The secondary background color. If different from FillColor, a gradient is automatically rendered.
GradientMode LinearGradientMode btn.GradientMode = LinearGradientMode.ForwardDiagonal; Determines the direction of the gradient fill (e.g., Vertical, Horizontal).
HoverFillColor Color btn.HoverFillColor = Color.FromArgb(50, 150, 255); Background color when the mouse hovers over the button.
PressFillColor Color btn.PressFillColor = Color.DarkBlue; Background color when the button is actively pressed.
RippleColor Color btn.RippleColor = Color.White; The color of the expanding ink ripple effect on click.

Shape & Expressions

Control the geometry of the button and its "expressive" animations (morphing).

Property Type Description & Usage Example
BorderRadius int btn.BorderRadius = 20; The corner radius in the idle state. Higher values make the button rounder.
EnableExpressions bool btn.EnableExpressions = true; Master switch for shape morphing. If true, the button can change its radius or squeeze when pressed.
PressedBorderRadius int btn.PressedBorderRadius = 10; The target corner radius when pressed. The button will smoothly morph to this shape.
SqueezeOnPress bool btn.SqueezeOnPress = true; If true, the button horizontally "squeezes" (indents) when clicked, simulating physical material flex.
SqueezeDepth int btn.SqueezeDepth = 5; The pixel depth of the horizontal squeeze effect.
LiquidEffect bool btn.LiquidEffect = true; When enabled, shape transitions (radius/squeeze) use a fluid physics model with subtle waves instead of linear interpolation.

Icons & Text

Manage the layout of text and optional left/right icons.

Property Type Description & Usage Example
Text string btn.Text = "Submit Order"; The button caption.
LeftIcon Image btn.LeftIcon = Properties.Resources.Cart; An icon displayed on the left side.
RightIcon Image btn.RightIcon = Properties.Resources.ArrowRight; An icon displayed on the right side.
LeftIconSize Size btn.LeftIconSize = new Size(24, 24); The explicit display size for the left icon.

Advanced Behavior

Settings for interaction modes, accessibility, and feedback.

Property Type Description & Usage Example
IsReadOnly bool btn.IsReadOnly = true; Disables normal clicks and grays out the button. Unlike Enabled=false, it can still receive certain events (like shake feedback).
EnableRipples bool btn.EnableRipples = true; Toggles the expanding ink ripple effect on click.
EnableKeyboardSupport bool btn.EnableKeyboardSupport = true; Allows the button to be triggered via Enter/Space keys when focused.
CanShake bool btn.CanShake = true; If true, the button shakes horizontally when clicked while in ReadOnly mode.

Public Methods

Programmatic Interaction
// Simulates a full click, including visual press/release animations.
btn.PerformClickEx();

// Simulates a click with a ripple starting from a specific coordinate.
// Useful for forwarding clicks from other controls.
btn.PerformRippleClick(new Point(10, 10));

// Manually triggers the error shake animation.
btn.TriggerShake();

Events

Interaction Events
// 1. Ripple Started
// Fires when a ripple animation begins. Useful for spawning particle effects.
btn.RippleStarted += (s, e) => 
{
                Debug.WriteLine($"Ripple at {e.Location}");
};

// 2. Keyboard Clicked
// Fires specifically when triggered via keyboard (requires EnableKeyboardSupport).
btn.KeyboardClicked += (s, e) => 
{
                LogAction("Keyboard Entry");
};

// 3. ReadOnly Changed
btn.ReadOnlyChanged += (s, e) => 
{
    lblStatus.Text = e.NewState ? "Locked" : "Ready";
};

Detailed Usage Examples

Example 1: Liquid Morph Button

Configuring a button that feels like a fluid bubble when pressed.

C# - Liquid Style
public void SetupLiquidButton()
{
    btn.Text = "Hold Me";
    btn.FillColor = Color.DeepSkyBlue;
    btn.BorderRadius = 25;
    
                // Enable Expressive Features
    btn.EnableExpressions = true;
    btn.LiquidEffect = true;
    
                // When pressed, it will become rounder (radius 25 -> 15)
                // and squeeze inward by 8 pixels with a fluid wave.
    btn.PressedBorderRadius = 15;
    btn.SqueezeOnPress = true;
    btn.SqueezeDepth = 8;
}

Example 2: Ghost Button with Gradient

Creating a transparent "Ghost" button that reveals a gradient on hover.

C# - Ghost Gradient
public void SetupGhostButton()
{
                // Transparent Idle State
    btn.FillColor = Color.Transparent;
    btn.FillColor2 = Color.Transparent;
    btn.ForeColorCustom = Color.Black;
    btn.BorderColor = Color.Black;
    btn.BorderSize = 1;
    
                // Gradient Hover State
    btn.HoverFillColor = Color.Violet;
    btn.HoverFillColor2 = Color.Orange;
    btn.GradientMode = LinearGradientMode.ForwardDiagonal;
    btn.HoverForeColor = Color.White;
}

Designer Support

The SiticoneExpressiveButton includes a powerful Smart Tag panel in Visual Studio.

  • 24+ Themes: Instantly apply presets like "Neon Cyber", "Material Blue", or "Minimalist Black".
  • Clipboard Tools: Copy the exact visual style of one button and paste it onto another with one click.
  • Quick Config: Easily toggle Ripples, Expressions, and ReadOnly modes directly from the design surface.