# 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.

![](/files/-Mja4nWgi10UgcR9278f)

## 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.

![](/files/-MjYVdDttwdU4nrFv50s)

### 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](/files/-MjaNPqm2kNjULvXiVUK)

`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](/files/-MjaHndWHtSb0hKJ2scl)

### `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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs2.bunifuframework.com/docs/ui/controls/bunifu-button-variant.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.