Bunifu Framework Docs
HomePricingFAQsMy Account
Search…
Introduction
Getting started
Requirements
Installation
Licensing
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 CHARTS
Introduction
Chart Components
BUNIFU DATAVIZ [Deprecated]
Basic Charts [Deprecated]
Advanced Charts [Deprecated]
Powered By GitBook
Bunifu Icon Button
Craftily visualize stylish, flawless button icons with smooth, sleek hover and click effects

Overview

Bunifu Icon Button is an extra engaging icon control built with the underlying properties and methods of a Bunifu Button control. It lets you add a creative touch with interactive and pretty engaging icons for your user interface if you are looking to stand out. And the best part here too is that it has smooth transitional animations when hovered over or clicked. Let's take a look at an example of a user interface implementing the icon button.
​

Getting Started

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

Adding Bunifu Icon Button at Design-time

Bunifu Button is added to a Form by simply locating BunifuIconButton in your Visual Studio toolbox, and dragging it to the form as demonstrated below.
​

Adding Bunifu Icon Button at Run-time

To add Bunifu Icon Button at runtime, we will use the Form's load event to instantiate BunifuIconButton class and add it to the form as shown in the codes below:
C#
VB.NET
private Image GetIconFromFolder()
{ //get image from a folder by getting its path
string imagePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
@"icons\sample-icon.ico");
//get the image by passing the path to the Image.FromFile() method
var image = Image.FromFile(imagePath);
return image;
}
private void Form_Load(object sender, EventArgs e)
{
//instantiate the icon button using using Bunifu.UI.WinForms.BunifuButton;
BunifuIconButton iconButton = new BunifuIconButton();
//set the icon button size
iconButton.Size = new Size(52, 52);
iconButton.BackgroundColor = Color.DodgerBlue;
iconButton.BorderColor = Color.DodgerBlue;
//set color contrast on click and on hover
iconButton.ColorContrastOnClick = 40;
iconButton.ColorContrastOnHover = 40;
iconButton.Location = new Point(295, 168);
//set the icon
iconButton.Image = GetIconFromFolder();
//add the icon button in the form
this.Controls.Add(iconButton);
​
Option Infer On
​
Private Function GetIconFromFolder() As Image 'get image from a folder by getting its path
Dim imagePath As String = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments), "icons\sample-icon.ico")
'get the image by passing the path to the Image.FromFile() method
Dim image As System.Drawing.Image = System.Drawing.Image.FromFile(imagePath)
Return image
End Function
Private Sub Form_Load(ByVal sender As Object, ByVal e As EventArgs)
'instantiate the icon button using using Bunifu.UI.WinForms.BunifuButton;
Dim iconButton As New BunifuIconButton()
'set the icon button size
iconButton.Size = New Size(52, 52)
iconButton.BackgroundColor = Color.DodgerBlue
iconButton.BorderColor = Color.DodgerBlue
'set color contrast on click and on hover
iconButton.ColorContrastOnClick = 40
iconButton.ColorContrastOnHover = 40
iconButton.Location = New Point(295, 168)
'set the icon
iconButton.Image = GetIconFromFolder()
'add the icon button in the form
'INSTANT VB TODO TASK: The following line uses invalid syntax:
Me.Controls.Add(iconButton)
​
​
​
The icon button added at run-time upon execution of the above code.
Let's deep dive and get insights into the available properties on Bunifu Icon Button.

Properties

Image Properties

Image

This property allows you to set an image that will be displayed as an icon in the button. You can easily set the image by accessing the Choose Image option in the smart tag as shown below.
You can as well set the image using code. Here's how you can assign an icon to its image property:
C#
VB.NET
private void Form1_Load(object sender, EventArgs e)
{
var imagePath= Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
@"icons\sample-icon.ico");
var image = Image.FromFile(imagePath);
bunifuIconButton.Image = image;
}
Option Infer On
​
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim imagePath= Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments), "icons\sample-icon.ico")
Dim image As System.Drawing.Image = System.Drawing.Image.FromFile(imagePath)
bunifuIconButton.Image = image
End Sub
​

ImageMargin

This property allows you to set the position of the icon within the button's border giving you control of your desired look and feel.
​

Border Properties

1. ShowBorders

This property allows you to display the border-color outlines and the border style of the Icon button when set to true.

2. BorderColor

This property enables you to set the border outline color with an RGB or a HEX color value.

3. AllowBorderColorChanges

This property when set to true, allows contrast color changes to the outline of the icon button when hovered over or clicked upon. The amount of contrast is determined by the value set to ColorContrastOnHover and ColorContrastOnClick properties

4. RoundBorders

This property allows you to get or set a boolean value, which determines whether you can apply a border radius on the icon button when its Style prop is set to Flat. By default, the property is set to true.

5. BorderRadius

This property enables you to set a value (integer) that determines the roundness of the button's border. This is applicable if the Style property is set to Flat and the RoundBorders property set to true.

6.BorderStyle

This property allows you to set a style (enumeration) for the button's border. The enumeration defines the following values: Solid, Dash, Dot, DashDot, DashDotDot. By default, the property is set to Solid. Now, to be able to use and see the other border styles, ensure that the BorderThickness prop is set with at least a value of 2.

7. BorderThickness

This property allows you to set a value (integer) that determines the border weight of the icon button. The greater the value the more the border weight that will be rendered on the button. By default, the thickness is set to 1.

8. CustomizableEdges

This property contains various edge position properties that allow you to determine which edges will have a rounded border. When a specific edge property is set to false, no radius value is applied to that edge, thus giving you an opportunity to create stylish icon buttons. The roundness of an edge will depend on the value set on the BorderRadius prop.
To use the property, ensure that the RoundBorders property is set to true and the style property is set to flat.

Background properties

1. BackColor

This property allows you to set the background color of the icon button with an RGB or a HEX color value. The color will change on hover and click states depending on the amount of contrast set on ColorContrastOnHover and ColorContrastOnClick props.

2. Style

This property allows you to set the style (enumeration) of the icon's appearance. The enumeration defines the following values: round which renders the button as a circular shape and the flat value which renders a squared-shaped icon button.
3. AllowMouseEffects
This property allows you to set a value (boolean) that determines whether the color changes will be displayed when there is a mouse hover or mouse click event on the icon button. By default, the property is set to true.

4. ColorContrastOnHover

This property enables you to set a value (integer) that determines the amount of lightness or darkness of the background color whenever a mouse hover event occurs. By default, the value is set to 30. It is recommended that you use a value between 0 to -100 (which renders darker colors ) and 1 to 100 (which renders lighter colors).

5. ColorContrastOnClick

This property enables you to set a value (integer) that determines the amount of lightness or darkness of the background color whenever a mouse click event occurs. By default, the value is set to 30. It is recommended that you use a value between 0 to -100 (which renders lighter colors ) and 1 to 100 (which renders darker colors).
​

Animation properties

1. AllowCustomAnimation

This property allows you to get a smooth, sleek transition between the button states(i.e idle, hover and pressed) over a given duration. By default, the property is set to true.

2. AnimationSpeed

This property allows us to set the pace of the animation when transitioning the button state properties from one state to another. By default, the value is set to 200. The greater the value, the slower the animation speed.

Take Away

Bunifu Icon Button is very optimized in design thus reducing the developer’s work on creating interactive icons. Developers can now concentrate on customizing the icons as per their design requirements. We hope that you'll get to improve the appearance and feel of your UI while also providing a better user experience using Bunifu Icon Buttons. If you have feedback or recommendations, please contact us via chat in the bottom right corner of the screen and we will gladly reach out to you.

​

Previous
Bunifu Gradient Panel
Next
Bunifu Image Button (New)
Last modified 10mo ago
Copy link
On this page
Overview
Getting Started
Adding Bunifu Icon Button at Design-time
Adding Bunifu Icon Button at Run-time
Properties
Image Properties
Border Properties
Background properties
Animation properties
Take Away