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 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.

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:

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:

// 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:

// 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:

Styling

You can apply styling to Button to change the look and appearance of your application. The C1Button class provides the BackColor and ForeColor properties to set the background and foreground colors, respectively. Besides these, it also provides the Styles 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.

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.

//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: