Windows Forms is very complicated to do that kind of thing.
It occurs to me that it could be done for example by creating different images with the different states of the button and changing the property BackgroundImage
with a Timer
.
Try this example. It's very rudimentary but you can get an idea of what I'm saying:
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;
using Timer = System.Windows.Forms.Timer;
namespace WindowsApp_C
{
public partial class Form1 : Form
{
private readonly Color _colorRosa;
private readonly List<Image> _imageList;
private bool _isMouseHover;
private int _currentImageIndex = -1;
private readonly Timer _animationTimer;
private readonly Button _animatedButton;
public Form1()
{
InitializeComponent();
_colorRosa = Color.FromArgb(254, 0, 114);
_imageList = CreateImages();
_animationTimer = new Timer
{
Enabled = false,
Interval = 50
};
_animationTimer.Tick += AnimateButton;
_animatedButton = new Button
{
Name = "AnimatedButton",
BackColor = Color.White,
Text = @"CONTINUAR",
ForeColor = _colorRosa,
Left = 10,
Top = 10,
Width = 250,
Height = 50,
Font = new Font(FontFamily.GenericSansSerif, 20, FontStyle.Bold),
FlatStyle = FlatStyle.Flat,
FlatAppearance = {BorderColor = _colorRosa, BorderSize = 2}
};
_animatedButton.MouseEnter += (sender, args) =>
{
_animatedButton.FlatAppearance.BorderColor = Color.White;
_isMouseHover = true;
if (!_animationTimer.Enabled) _animationTimer.Start();
};
_animatedButton.MouseLeave += (sender, args) =>
{
_animatedButton.FlatAppearance.BorderColor = _colorRosa;
_isMouseHover = false;
if (!_animationTimer.Enabled) _animationTimer.Start();
};
Controls.Add(_animatedButton);
}
private void AnimateButton(object sender, EventArgs e)
{
if (_isMouseHover && _currentImageIndex >= _imageList.Count - 1
|| !_isMouseHover && _currentImageIndex <= 0)
{
_animationTimer.Stop();
if (!_isMouseHover)
_animatedButton.ForeColor = _colorRosa;
return;
}
_currentImageIndex += _isMouseHover ? 1 : -1;
_animatedButton.BackgroundImage = _imageList[_currentImageIndex];
_animatedButton.ForeColor = Color.White;
}
private List<Image> CreateImages()
{
var lista = new List<Image>();
int width = 250;
int height = 50;
using (SolidBrush brush = new SolidBrush(_colorRosa))
using (SolidBrush whiteBrush = new SolidBrush(Color.White))
{
for (int i = 0; i <= width; i += 10)
{
var bmp = new Bitmap(width, height);
using (Graphics gfx = Graphics.FromImage(bmp))
{
gfx.FillRectangle(whiteBrush, 0, 0, width, height);
gfx.FillRectangle(brush, width / 2 - i / 2, 0, i, height);
}
lista.Add(bmp);
}
}
return lista;
}
}
}
In this form I create the button to animate and I add it to the form.
The CreateImages
method creates a series of images with a vertical pink bar that enlarges to fill the entire width of the button.
The events MouseEnter
and MouseLeave
are responsible for booting the Timer
that executes the animation.
The method that executes Timer
is responsible for replacing the images in the BackgroundImage
of the button, forward or backward in the list of images depending on whether the mouse is on the button or outside it.
Obviously the effect would be more achieved if the text was also in the image, although this would cause that you could not modify it through the property Text
of the control. Unless you generated the images dynamically as I do in the example ...
There may be other ways to do it, but none will be simple.