Bunifu Button (variant)
Stylish buttons with fluid transition animations in button states
Overview
Bunifu Button (variant!) is a pretty cool button that builds on the existing properties and functions of a Bunifu button and adds animation micro-interaction features between the button states.
Getting Started
This section describes adding Bunifu Button (variant!) at the designer level and during a runtime event.
Adding Bunifu button at the designer level
Bunifu Button is added to a Form by simply locating
BunifuButton2 in your Visual Studio toolbox, and dragging it to the form as demonstrated below.
Adding the Bunifu button at Run-time
To add Bunifu Button at runtime, we will use the Form's load event to instantiate
BunifuButton2 and add it to the form as shown in the codes below:C#
VB.NET
1
private void Form1_Load(object sender, EventArgs e)
2
{
3
//instatiate the button using Bunifu.UI.WinForms.BunifuButton
4
BunifuButton2 button = new BunifuButton2();
5
//set text for the button
6
button.Text = "Button variant";
7
8
button.IdleFillColor = Color.DodgerBlue;
9
//set the location of the button
10
button.Location = new Point(260, 148);
11
​
12
/*Allow auto-generation of colors for the button's hover
13
*and pressed states based on the idle fill color
14
*/
15
button.AutoGenerateColors = true;
16
​
17
// set smooth transition between the button states
18
button.AllowAnimations = true;
19
//set pace of the animation when transitioning
20
button.AnimationSpeed = 300;
21
//add the control to the form
22
this.controls.add(button)
23
}
Copied!
1
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
2
'instatiate the button using Bunifu.UI.WinForms.BunifuButton
3
Dim button As New BunifuButton2()
4
'set text for the button
5
button.Text = "Button variant"
6
​
7
button.IdleFillColor = Color.DodgerBlue
8
'set the location of the button
9
button.Location = New Point(260, 148)
10
​
11
' Allow auto-generation of colors for the button's hover
12
' *and pressed states based on the idle fill color
13
'
14
button.AutoGenerateColors = True
15
​
16
' set smooth transition between the button states
17
button.AllowAnimations = True
18
'set pace of the animation when transitioning
19
button.AnimationSpeed = 300
20
​
21
'add the control to the form
22
Me.controls.add(button)
23
End Sub
24
​
Copied!
​
Let's deep dive and get insights into the available animation properties on the variant Bunifu Button.
Properties
1. AllowAnimation
1. AllowAnimation This property determines the animation transition state of the control. When the property is set to true, it sets a smooth transition between the button states(i.e
idle, hover and pressed) property value, over a given duration. By default, the property is set to true.The default Bunifu button includes these button states however, the change from one state to another looks a little odd as it appears to be choppy and abrupt. This is because it’s missing the key to having a beautiful animation.
Default Bunifu Button
BunifuButton2 builds on the default button and provides an animation that has cadence and rhythm that seems fluid and natural. You’ll notice that the colors now change at a smoother pace and are much more pleasing to look at when hovering over the button. Pretty cool, isn’t it😃
Smooth transition states in the new Bunifu Button variant
​
2. AnimationSpeed
2. AnimationSpeedThis property allows us to easily set the pace of the animation when transitioning the button state properties from one state to another.
Take Away
All other important properties found in
BunifuButton2 are inherited from Bunifu Button control. You can now generate more elegant smoothly animated buttons, which we hope will improve the appearance and feel of your UI while also providing a better user experience. Please contact us via chat in the bottom right corner of the screen if you have feedback or recommendations.
Last modified 6mo ago