# Button

## Content



**Input** provides various properties for customizing the appearance and styling **button**, so that you can generate the control as per your requirement:

## Appearance

You can add any icon, image, background image, different font styles for text and even change the alignment of image or text as per your need. The [C1ButtonBase](/componentone/docs/win/online-input-net/) class provides the appearance-related properties to alter the appearance of the button control in the most convenient manner.

You can assign values to these properties via the **Properties** window or implement them programmatically in the code editor as well.

### Set BackgroundImage

The following code snippet shows how to add a background image to the button control using the BackgroundImage property by calling the **FromFile** method in the **Image** class to create an image from the specified file.

```csharp
button.Text = "Submit";
button.Font = new System.Drawing.Font("Arial", 11F, ((System.Drawing.FontStyle)((System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic))));
button.BackgroundImage = Image.FromFile(@"resources\blue-blurred-backimage.jpg");
button.Cursor = Cursors.Hand;
```

The resulting image looks like this:

![](https://cdn.mescius.io/document-site-files/images/287a0e06-68cb-453e-816c-125f892133e7/images/button-backimagefont.png)

### Set Icon or Image

You can set icons or images in the button control, and change its alignment using the **ImageAlign** property. Further, the text can be aligned with respect to the image using the **TextAlign** property. The **ImageAlign** and **TextAlign** properties access the **ContentAlignment** enumeration to set different alignments in the button control.

The following code snippet can be used to add an icon to the button control using the **Icon** property:

```csharp
// Set an icon in button control
button.Text = "Submit";
button.TextAlign = ContentAlignment.TopRight;
button.Icon = new C1.Framework.C1BitmapIcon(null, new System.Drawing.Size(16, 16), System.Drawing.Color.Transparent, Image.FromFile(@"Resources\emerald-theme-manager-icon-icon.png"));
button.ImageAlign = ContentAlignment.TopLeft;
```

The following code snippet can be used to add an image to the button control using the **Image** property:

```csharp
// Set an image in button control
button.Text = "Submit";
button.Image = Image.FromFile(@"Resources\emerald-theme-manager-icon-icon.png");
button.ImageAlign = ContentAlignment.TopLeft;
```

The resulting image looks like this:

![](https://cdn.mescius.io/document-site-files/images/287a0e06-68cb-453e-816c-125f892133e7/images/button-withicon.png)

## Styling

You can apply styling to Button to change the look and appearance of your application. The [C1Button](/componentone/docs/win/online-input-net/) class provides the [BackColor](/componentone/docs/win/online-input-net/) and [ForeColor](/componentone/docs/win/online-input-net/) properties to set the background and foreground colors, respectively. Besides these, it also provides the [Styles](/componentone/docs/win/online-input-net/) property to apply styling to different states of button such as Default, Disabled, Hot, HotPressed, and Pressed.

The following image showcases styling applied to the Button control.

![Style Button](https://cdn.mescius.io/document-site-files/images/287a0e06-68cb-453e-816c-125f892133e7/images/button-styling.gif)

The following code snippet shows how to set the styling properties to the Button control. In this example, we set border, background color, and foreground color of button in different states such as Hot, Pressed, and HotPressed.

```csharp
//Style Button
button.BackColor = System.Drawing.Color.Tan;            
button.ForeColor = System.Drawing.SystemColors.ControlLightLight;            
button.Styles.Hot.BackColor = System.Drawing.Color.Red;
button.Styles.Hot.BorderColor = System.Drawing.Color.Gray;
button.Styles.HotPressed.BackColor = System.Drawing.SystemColors.ButtonShadow;
button.Styles.HotPressed.BorderColor = System.Drawing.Color.Red;
button.Styles.Pressed.BackColor = System.Drawing.SystemColors.ButtonShadow;
button.Styles.Pressed.BorderColor = System.Drawing.Color.Red;
//Style borders
button.Styles.Border = new C1.Framework.Thickness(2, 2, 2, 2);
button.Styles.Corners = new C1.Framework.Corners(2, 2, 2, 2);
button.Styles.Default.BorderColor = System.Drawing.SystemColors.ControlDarkDark;
//Style font
button.Font = new System.Drawing.Font("Segoe UI", 11F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point);
```

The resulting output looks like the GIF below: