Bunifu Framework Docs
HomePricingFAQsMy Account
  • Introduction
  • Getting started
    • Requirements
    • Installation
    • Installing for .Net 5 & Above
    • Licensing
      • Managing your licenses
      • Bunifu Licensing CLI
      • Bunifu Device Remover (Deprecated)
  • BUNIFU UI
    • Controls
      • Bunifu Button
      • Bunifu Button (variant)
      • Bunifu Cards
      • Bunifu CheckBox
      • Bunifu Circle Progress
      • Bunifu Datagrid View
      • Bunifu Date Picker
      • Bunifu Drop Down
      • Bunifu Flat Button
      • Bunifu Form Caption Button
      • Bunifu Form Control Box
      • Bunifu Form Resize Icon
      • Bunifu Gradient Panel
      • Bunifu Icon Button
      • Bunifu Image Button (New)
      • Bunifu Image Button (Old)
      • Bunifu IOS Switch (1.5.3)
      • Bunifu Label
      • Bunifu Loader
      • Bunifu Picture Box
      • Bunifu Pages
      • Bunifu Panel
      • Bunifu Progress Bar
      • Bunifu Radial Gauge
      • Bunifu Radio Button
      • Bunifu Rating
      • Bunifu Range
      • Bunifu Separator
      • Bunifu Sliders
      • Bunifu Shadow Panel
      • Bunifu Shapes
      • Bunifu Switch (1.5.3)
      • Bunifu ScrollBars
      • Bunifu Toggle Switch
      • Bunifu Toggle Switch (variant)
      • Bunifu Tile Button
      • Bunifu Thin Button (1.5.3)
      • Bunifu ToolTip
      • Bunifu Textbox
      • Bunifu User Control
    • Components
      • Bunifu Color Transition
      • Bunifu Drag
      • Bunifu Elipse [Deprecated]
      • Bunifu Form Dock
      • Bunifu Form Drag
      • Bunifu Form Resizer
      • Bunifu Snackbar
      • Bunifu Transition
  • BUNIFU CHARTS
    • Introduction
      • Quick Tips
    • Chart Components
      • Bunifu Bar Chart
      • Bunifu Bubble Chart
      • Bunifu Canvas Control
      • Bunifu Doughnut Chart
      • Bunifu Horizontal bar Chart
      • Bunifu Line Chart
      • Bunifu Pie chart
      • Bunifu Polar Chart
      • Bunifu Radar Chart
  • BUNIFU DATAVIZ [Deprecated]
    • Basic Charts [Deprecated]
      • Step Line Chart [Deprecated]
      • Step Area Chart [Deprecated]
      • Spline Chart [Deprecated]
      • Pie Chart [Deprecated]
      • Line Chart [Deprecated]
      • Doughnut Chart [Deprecated]
      • Bar Chart [Deprecated]
      • Area Chart [Deprecated]
      • Column Chart [Deprecated]
    • Advanced Charts [Deprecated]
      • Stacked Column 100 Chart [Deprecated]
      • Stacked Column Chart [Deprecated]
      • Stacked Bar Chart 100 [Deprecated]
      • Stacked Bar Chart [Deprecated]
      • Stacked Area Chart 100 [Deprecated]
      • Stacked Area Chart [Deprecated]
      • Scatter Chart [Deprecated]
      • Range Spline Area Chart [Deprecated]
      • Range Column Chart [Deprecated]
      • Range Bar Chart [Deprecated]
      • Range Area Chart [Deprecated]
      • OHLC Chart [Deprecated]
      • Candle Stick Chart [Deprecated]
      • Bubble Chart [Deprecated]
Powered by GitBook
On this page
  • Overview
  • Getting Started
  • Adding Bunifu Button in Design Mode
  • Adding the Bunifu Button at Runtime
  • Key Properties
  • 1. AllowAnimation
  • 2. AnimationSpeed
  • Take Away

Was this helpful?

  1. BUNIFU UI
  2. Controls

Bunifu Button (variant)

Stylish buttons with fluid animations for the various button states

PreviousBunifu ButtonNextBunifu Cards

Last updated 2 years ago

Was this helpful?

Overview

Bunifu Button (variant) is a pretty cool button that builds on the existing properties and functions of a and adds micro-interaction animation cues between the various button states.

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.

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:

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)
}
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

Let's deep dive and get insights into the available animation properties on the variant Bunifu Button.

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.

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

Please contact us via chat in the bottom right corner of the screen if you have feedback or recommendations.

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?

All other important properties found in BunifuButton2 are inherited from 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.

😃
Bunifu Button
Bunifu Button
Default Bunifu Button
Smooth transition states in the new Bunifu Button variant