> For the complete documentation index, see [llms.txt](https://docs-siticoneframework.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-siticoneframework.gitbook.io/home/net-framework-or-net-core-ui/buttons-and-elements/siticone-button/visual-effects-and-styling.md).

# Visual Effects & Styling

Visual Effects & Styling enhance the SiticoneButton's aesthetic by allowing developers to customize backgrounds, borders, corners, gradients, and shadows for a modern, visually appealing UI.

## Overview

This feature provides a wide range of properties to style the button's appearance. It includes settings for background colors (with gradient support), border styling, corner customization, and shadow effects. These customizations allow developers to design buttons that match the overall theme and branding of their applications while offering visual depth and refinement.

The table below summarizes the configurable properties for Visual Effects & Styling:

| Property Name           | Description                                                                                                     | Default Value                    | Code Example                                              |
| ----------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------- |
| ButtonBackColor         | Sets the primary background color of the button in its normal state.                                            | Color.FromArgb(94, 148, 255)     | `button.ButtonBackColor = Color.FromArgb(94, 148, 255);`  |
| HoverBackColor          | Specifies the background color when the mouse hovers over the button.                                           | Color.FromArgb(114, 168, 255)    | `button.HoverBackColor = Color.FromArgb(114, 168, 255);`  |
| PressedBackColor        | Determines the background color when the button is pressed.                                                     | Color.FromArgb(74, 128, 235)     | `button.PressedBackColor = Color.FromArgb(74, 128, 235);` |
| GradientBackground      | Enables a gradient fill for the background to create smooth color transitions.                                  | false                            | `button.GradientBackground = true;`                       |
| GradientColor           | Sets the secondary color used in the gradient background.                                                       | Color.FromArgb(114, 168, 255)    | `button.GradientColor = Color.FromArgb(114, 168, 255);`   |
| GradientMode            | Determines the direction of the gradient (Vertical, Horizontal, etc.).                                          | LinearGradientMode.Vertical      | `button.GradientMode = LinearGradientMode.Horizontal;`    |
| BorderColor             | Defines the color of the button's border.                                                                       | Color.FromArgb(94, 148, 255)     | `button.BorderColor = Color.FromArgb(94, 148, 255);`      |
| BorderWidth             | Sets the thickness of the border in pixels.                                                                     | 2                                | `button.BorderWidth = 2;`                                 |
| IsRadial                | When true, transforms the button into a circular shape, ideal for icon-only buttons or floating action buttons. | false                            | `button.IsRadial = true;`                                 |
| CornerRadiusTopLeft     | Sets the radius for the top-left corner, allowing for individual corner customization.                          | 0                                | `button.CornerRadiusTopLeft = 5;`                         |
| CornerRadiusTopRight    | Sets the radius for the top-right corner.                                                                       | 0                                | `button.CornerRadiusTopRight = 5;`                        |
| CornerRadiusBottomRight | Sets the radius for the bottom-right corner.                                                                    | 0                                | `button.CornerRadiusBottomRight = 5;`                     |
| CornerRadiusBottomLeft  | Sets the radius for the bottom-left corner.                                                                     | 0                                | `button.CornerRadiusBottomLeft = 5;`                      |
| EnableShadow            | Toggles the display of a shadow effect behind the button for depth perception.                                  | false                            | `button.EnableShadow = true;`                             |
| ShadowColor             | Specifies the color of the shadow, including transparency for a subtle effect.                                  | Color.FromArgb(100, Color.Black) | `button.ShadowColor = Color.FromArgb(100, Color.Black);`  |
| ShadowOffset            | Sets the horizontal and vertical offset of the shadow relative to the button.                                   | new Point(2, 2)                  | `button.ShadowOffset = new Point(2, 2);`                  |
| ShadowBlur              | Controls the blur level of the shadow for a more diffused appearance.                                           | 5                                | `button.ShadowBlur = 5;`                                  |

***

### Key Points

| Aspect                      | Details                                                                                             |
| --------------------------- | --------------------------------------------------------------------------------------------------- |
| Customizable Background     | Control background colors in normal, hover, and pressed states, with optional gradient transitions. |
| Dynamic Borders and Corners | Adjust border color, width, and corner radii individually or switch to a radial (circular) layout.  |
| Shadow Effects              | Enable and customize shadow properties to add depth and elevate the button visually.                |
| Consistency with Theme      | Visual styling properties help maintain design consistency across different UI elements.            |

***

### Best Practices

| Recommendation                                   | Explanation                                                                                                                 | Sample Code Snippet                                                         |
| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| Use gradient backgrounds for a modern look       | Gradient backgrounds add visual interest; combine ButtonBackColor with GradientColor for smooth transitions.                | `button.GradientBackground = true; button.GradientColor = Color.LightBlue;` |
| Match border colors with background styles       | Ensure the BorderColor complements ButtonBackColor for a cohesive appearance.                                               | `button.BorderColor = Color.FromArgb(94, 148, 255);`                        |
| Moderate shadow usage to avoid clutter           | Enable shadows judiciously; excessive shadow intensity or blur can distract users.                                          | `button.EnableShadow = true; button.ShadowBlur = 5;`                        |
| Use corner radius settings for brand consistency | Customize corner radii to match the overall design language of your application; consider a radial button for icon buttons. | `button.CornerRadiusTopLeft = 10; button.CornerRadiusTopRight = 10;`        |
| Test visual effects on different resolutions     | Ensure that the styled button scales well across various display resolutions and DPI settings.                              | –                                                                           |

***

### Common Pitfalls

| Issue                                               | Cause                                                                                             | Mitigation                                                                                  |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| Overly aggressive gradients                         | Using high-contrast or abrupt gradient settings may overwhelm the design.                         | Choose colors that transition smoothly and test on multiple displays.                       |
| Clashing border and background colors               | Incompatible border colors may detract from the overall appearance.                               | Ensure that the border color complements the background colors.                             |
| Misconfigured corner radii causing irregular shapes | Inconsistent corner radius settings can lead to an uneven or unbalanced button shape.             | Test each corner setting individually and consider using IsRadial for uniformity if needed. |
| Excessive shadow blur or offset                     | High values for ShadowBlur or ShadowOffset can create a distracting or unrealistic shadow effect. | Use moderate values and verify the visual balance against other UI elements.                |

***

### Usage Scenarios

| Scenario                          | Description                                                                                                         | Example Integration                                                                                                                                                                                                                                                                           |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Standard application buttons      | Use default background and border properties to match the overall application theme.                                | `csharp<br>var button = new SiticoneButton();<br>button.ButtonBackColor = Color.FromArgb(94, 148, 255);<br>button.BorderColor = Color.FromArgb(94, 148, 255);<br>this.Controls.Add(button);<br>`                                                                                              |
| Emphasized call-to-action buttons | Apply gradients, increased corner radii, and subtle shadows to make the button stand out as a primary action.       | `csharp<br>var ctaButton = new SiticoneButton();<br>ctaButton.GradientBackground = true;<br>ctaButton.GradientColor = Color.LightBlue;<br>ctaButton.CornerRadiusTopLeft = 15;<br>ctaButton.CornerRadiusTopRight = 15;<br>ctaButton.EnableShadow = true;<br>this.Controls.Add(ctaButton);<br>` |
| Icon-only circular buttons        | Use IsRadial to create circular buttons with an icon and no text, suitable for toolbars or floating action buttons. | `csharp<br>var iconButton = new SiticoneButton();<br>iconButton.IsRadial = true;<br>iconButton.ButtonImage = Image.FromFile("icon.png");<br>iconButton.Size = new Size(50, 50);<br>this.Controls.Add(iconButton);<br>`                                                                        |

***

### Code Examples

#### Example 1: Basic Visual Styling

```csharp
// Create a basic styled SiticoneButton
var basicStyleButton = new SiticoneButton
{
    Text = "Basic Style",
    Size = new Size(150, 50),
    ButtonBackColor = Color.FromArgb(94, 148, 255),
    HoverBackColor = Color.FromArgb(114, 168, 255),
    PressedBackColor = Color.FromArgb(74, 128, 235),
    BorderColor = Color.FromArgb(94, 148, 255),
    BorderWidth = 2
};

// Add the button to the form
this.Controls.Add(basicStyleButton);
```

#### Example 2: Gradient Background with Custom Borders and Shadows

```csharp
// Create a SiticoneButton with gradient background and shadow effects
var gradientButton = new SiticoneButton
{
    Text = "Gradient Button",
    Size = new Size(180, 60),
    ButtonBackColor = Color.DeepSkyBlue,
    HoverBackColor = Color.CornflowerBlue,
    PressedBackColor = Color.MediumBlue,
    GradientBackground = true,
    GradientColor = Color.LightSkyBlue,
    GradientMode = LinearGradientMode.Horizontal,
    BorderColor = Color.Blue,
    BorderWidth = 3,
    EnableShadow = true,
    ShadowColor = Color.FromArgb(100, Color.Black),
    ShadowOffset = new Point(3, 3),
    ShadowBlur = 8
};

// Add the button to the form
this.Controls.Add(gradientButton);
```

#### Example 3: Circular Button with Customized Corners

```csharp
// Create a circular (radial) SiticoneButton for an icon-only design
var circularButton = new SiticoneButton
{
    Text = "", // No text for icon-only button
    Size = new Size(50, 50),
    IsRadial = true,
    ButtonImage = Image.FromFile("icon.png"), // Ensure the image exists
    BorderColor = Color.Gray,
    BorderWidth = 2,
    EnableShadow = true,
    ShadowColor = Color.FromArgb(80, Color.Black),
    ShadowOffset = new Point(2, 2),
    ShadowBlur = 5
};

// Add the circular button to the form
this.Controls.Add(circularButton);
```

***

### Review

| Aspect                       | Comments                                                                                                                          |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| Aesthetic Flexibility        | Visual Effects & Styling provide extensive options to match the button’s appearance with the overall application design.          |
| Modern UI Enhancements       | Gradients, shadows, and customizable borders contribute to a contemporary and refined look.                                       |
| Consistency and Adaptability | Settings such as IsRadial and individual corner radii allow for both standard and creative layouts, catering to various UI needs. |

***

### Summary

Visual Effects & Styling in the SiticoneButton control empower developers to create visually engaging, modern UI elements through customizable backgrounds, gradients, borders, corner radii, and shadows. By fine-tuning these properties, you can ensure that buttons not only function well but also integrate seamlessly into your application’s overall design theme. This documentation provides detailed guidance, best practices, and practical code examples to help you implement sophisticated visual styling for your .NET WinForms applications.

***

### Additional Resources

| Topic                   | Description                                                                                                                            |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| Integration Tips        | Combine visual styling with other features like Animation Effects for an immersive user interface.                                     |
| Troubleshooting         | Verify that property values are set appropriately to prevent clashing styles or performance issues with shadows and gradients.         |
| Extending Functionality | Experiment with different GradientMode settings and corner radii to create unique button designs tailored to your application’s brand. |

This comprehensive guide on Visual Effects & Styling should assist you in integrating and customizing the visual presentation of the SiticoneButton control effectively in your .NET WinForms applications.