# Bunifu Button (variant)

## Overview

Bunifu Button (variant) is a pretty cool button that builds on the existing properties and functions of a [Bunifu Button](https://docs2.bunifuframework.com/docs/ui/controls/bunifu-button) and adds micro-interaction animation cues between the various button states.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mja4iz9BpApycUav4Ib%2F-Mja4nWgi10UgcR9278f%2Fgif03.gif?alt=media\&token=752b7d3f-63bd-4897-984d-dad6eba2d6ea)

## Getting Started

This section describes adding Bunifu Button (variant) at the designer level and during a runtime event.

### Adding Bunifu Button in Design Mode

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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MjYQP-p5LBAfD901CIR%2F-MjYVdDttwdU4nrFv50s%2Fgif01.gif?alt=media\&token=b375e97c-a9a8-4d5c-905b-31786eaf665e)

### Adding the Bunifu Button at Runtime

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:

{% tabs %}
{% tab title="C#" %}

```csharp
private void Form1_Load(object sender, EventArgs e)
{
    //instatiate the button using Bunifu.UI.WinForms.BunifuButton
    BunifuButton2 button = new BunifuButton2();
    //set text for the button
    button.Text = "Button variant";
   
    button.IdleFillColor = Color.DodgerBlue;
    //set the location of the button
    button.Location = new Point(260, 148);

    /*Allow auto-generation of colors for the button's hover
     *and pressed states based on the idle fill color
    */
    button.AutoGenerateColors = true;

    // set smooth transition between the button states
    button.AllowAnimations = true;
    //set pace of the animation when transitioning
    button.AnimationSpeed = 300;
    //add the control to the form
    this.controls.add(button)
}
```

{% endtab %}

{% tab title="VB.NET" %}

```vbnet
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	'instatiate the button using Bunifu.UI.WinForms.BunifuButton
	Dim button As New BunifuButton2()
	'set text for the button
	button.Text = "Button variant"

	button.IdleFillColor = Color.DodgerBlue
	'set the location of the button
	button.Location = New Point(260, 148)

'    Allow auto-generation of colors for the button's hover
'     *and pressed states based on the idle fill color
'    
	button.AutoGenerateColors = True

	' set smooth transition between the button states
	button.AllowAnimations = True
	'set pace of the animation when transitioning
	button.AnimationSpeed = 300

	'add the control to the form
	Me.controls.add(button)
End Sub

```

{% endtab %}
{% endtabs %}

{% hint style="success" %}
Let's deep dive and get insights into the available animation properties on the variant Bunifu Button.
{% endhint %}

## Key Properties

### `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](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MjaFbrEnHHW3rz0Cnag%2F-MjaNPqm2kNjULvXiVUK%2Fgif05.gif?alt=media\&token=aacf1e18-1002-4abb-9369-33282c9b3bd2)

`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:smiley:?

![Smooth transition states in the new  Bunifu Button variant](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MjaFbrEnHHW3rz0Cnag%2F-MjaHndWHtSb0hKJ2scl%2Fgif04.gif?alt=media\&token=864da5a9-198e-40dc-adc5-9488ca4b5367)

### `2. AnimationSpeed`

This 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](https://docs2.bunifuframework.com/docs/ui/controls/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.