How to make image button

Small summary (Border, MouseDownBackColor, MouseOverBackColor)

FlatApperance

BorderColor = Black or what ever you want
BorderSize = can be set to 0
MouseDownBackColor = Transparent
MouseOverBackColor = Transparent

Text = none

For MouseDown:

// ImageList index value for the mouse down image.
private void button1_MouseDown(object sender, MouseEventArgs e) => button1.ImageIndex = 2;

You want to create a button with no border but displays different images when the user hovers over it with the mouse? Here's how you can do it:

  1. Add an ImageList control to your form at add two images, one for the button's normal appearance and one for when the mouse is hovering over.

  2. Add your button and set the following properties:
    FlatStyle = Flat
    FlatAppearance.BorderColor (and maybe MouseOverBackColor & MouseDownBackColor) to your form's background color
    ImageList = the ImageList you added to the form
    ImageIndex to the index value of your normal image

Code the MouseHover and MouseLeave events for the button like this:

// ImageList index value for the hover image.
private void button1_MouseHover(object sender, EventArgs e) => button1.ImageIndex = 1;

// ImageList index value for the normal image.
private void button1_MouseLeave(object sender, EventArgs e) => button1.ImageIndex = 0;

I believe that will give you the visual effect you're looking for.

Tags:

C#

Winforms