Button Hover Color Change with an animation c#

Question

i'v created a windows form and it has 3 buttons. So an one button i figured to change the color with using mouseenter event. that's work fine. but i need to change the color with transition as fade in or fade out. anyone who have an answer for this question please let me know the below code i'll show you my mouseenter and mouseleave event

private void button1_MouseEnter(object sender, EventArgs e)
{
   button1.UseVisualStyleBackColor = false;
   button1.BackColor = Color.Black;
   button1.ForeColor = Color.White;
}

private void button1_MouseLeave(object sender, EventArgs e)
{
   button1.UseVisualStyleBackColor = true;
   button1.ForeColor = Color.Black;
}

Use a Timer for the animation and calculate a few intermediate colors in the Tick event. — TaW, Jun 03 '14 at 16:51
#Taw please show a little code in the answer section if you can — mastercordy, Jun 03 '14 at 16:53

TaW · Accepted Answer · 2014-06-04T13:47:06.397

Here is some code to get you going: It brings in a new Color by blending the alpha channel.

public Form1()
{
    InitializeComponent();
    oldColor = button1.BackColor;
}


Color oldColor;
Color newColor = Color.FromArgb(0, Color.MediumAquamarine);  // your pick, including Black
int alpha = 0;

private void button1_MouseEnter(object sender, EventArgs e)
{
    alpha = 0;
    timer1.Interval = 15;
    timer1.Start();
}

private void button1_MouseLeave(object sender, EventArgs e)
{
    timer1.Stop();
    button1.BackColor =  oldColor;
    button1.ForeColor = Color.Black;
}

private void timer1_Tick(object sender, EventArgs e)
{
    alpha += 17;  // change this for greater or less speed
    button1.BackColor = Color.FromArgb(alpha, newColor);
    if (alpha >= 255) timer1.Stop();
    if (button1.BackColor.GetBrightness() < 0.3) button1.ForeColor = Color.White;
}

Edit: If you set the newColor to something too dark the last tick line will set the ForeColor to White now.

Edit 2: To apply the same animation to several Buttons:

Add a class variable Button curButton;
Have the MouseEnter and MouseLeave events of all Buttons point to the very same events above
Add this line at the top of MouseEnter : Button curButton = (Button) sender;
Change each occurence of button1 to curButton.

To have an individual new Color for each Button

Store the newColors it in the Buttons' Tags instead of a class variable:
- button1.Tag = Color.MediumAquamarine;
- button2.Tag = Color.MediumSeaGreen; //..etc..
Add this to the MouseEnter: newColor = (Color)curButton.Tag; as 2nd line

I'm beginning to like the whole thing, though not with black ;-)

score 0 · Answer 2 · answered Jun 03 '14 at 17:20

I wrote a little example for you. Its not perfect, but I think it will work for ya :).

private void button1_MouseEnter(object sender, EventArgs e)
{
    _colorCounter = 250;
    button1.UseVisualStyleBackColor = false;
    //button1.BackColor = Color.Black;
    timer1.Start();
    button1.ForeColor = Color.White;            
}

private void button1_MouseLeave(object sender, EventArgs e)
{
    timer1.Stop();
    _colorCounter = 250;

    button1.UseVisualStyleBackColor = true;
    button1.ForeColor = Color.Black;
    button1.BackColor = SystemColors.Control;

}

private int _colorCounter = 250;

private void timer1_Tick(object sender, EventArgs e)
{
    _colorCounter -= 25;

    if (_colorCounter == 0)
    {
        timer1.Stop();
        _colorCounter = 250;
    }
    else
    {
        // Build up a color from counter
        button1.BackColor = Color.FromArgb(_colorCounter, _colorCounter, _colorCounter);
    }

}

Drag n drop timer into your form.

Button Hover Color Change with an animation c#

2 Answers2

Linked