As a designer, it is time consuming for you to create images and use them as buttons. This was not only time consuming but also editing the images when required was very easy. Canvas, now gives you a button element on the left panel. You can just drag and drop the button element and edit it to the last detail to suit your needs. In Desktop, the button element allows you to view and configure different states such as normal, hover, and pressed (active). Using the Properties tab on the right panel, you can change the properties of the button element.

Button Name: Displays the name of the button element. You can change the name of the button element by selecting it and entering the desired name.

Position: You can define the positioning of the element on the workspace. The positioning of the element is relative to the workspace.

In the following screenshot, the button element is placed at Zero pixels from the left edge and the top edge. It implies that the element is placed at the top left corner of the workspace.

While manually entering the values for positioning, you cannot enter decimal values.

Height and Width: You can resize an element by dragging the corner handles of the element. Alternatively, you can enter the size of the element on the size fields.

While manually entering the values for resizing, you cannot enter decimal values.

Select lock to keep the aspect ratio locked when resizing the button element.

Rotation: You can rotate the button element by using the rotate lever or entering the value in the angle field.

The angle field displays values from 0 to 360 when the icon is rotated. While using the rotation feature to animate the button element, values must be entered in multiples of 360 to signify how many times the rotation must happen.

Opacity: You can change the opacity of the button element by dragging the slider.

By default, the text settings for all three states (normal, hover, and active) are the same unless changed for hover or active. If you make changes to the text settings for Normal after making changes to Hover or Active, the changes will not override the existing changes in Hover or Active.

The Text Label for all the three states must be the same.

Text Label: Type in the content that you want to be displayed on the button on the workspace.

Font: Allows you to select the font for the button on the workspace. You can also upload custom fonts by clicking the +Add Font button in the Fonts drop-down list.

Fallback Font: A fallback font is a reserve font that is used when there is some issue in loading a custom font.

You cannot assign a custom font as a fallback font.

Size (px): Allows you to change the font size of the button text.

Font Style: Allows you to assign bold, Italics, and Underline font style to the button text.

Text Fill: Allows you to change the color of the button text on workspace.

Opacity: Allows you to control opacity of the button on the workspace.

This will only change the opacity of the text on the workspace.

Alignment: Allows you to change the alignment of the text in the text element’s container.

Character Spacing: Allows you to change the spacing between the text’s alphabets.

Line Spacing: Allows you to change the spacing between lines.

Solid: Allows you to change the solid background color of the button.

Gradient: Enables transcendence of different colors for the button background.

Opacity: Allows you to configure opacity of the button background.

Rotation: Allows you to configure the transcendence angle of a gradient background.

Image: Allows you to assign an image as the button background.

Button Border: Allows you to select the border style of the button.

Border Fill: Allows you to change the color of the button's border.

Width(px): Allows you to change the width of the button’s border.

Radius(px): Allows you to adjust the smoothness of the button’s edge. Increase the radius to smoothen the edges of a button.

Keep initial state as hidden: Upon page load, keeps the button element hidden until a configured action is not performed. You can configure the action on the Events tab. For example, even if an animation is created to fade the button element, it will not show till the show action is triggered.

Position: Position refers to the position of the button element on the workspace. Pinning an element to an edge instructs that element to move as the edge itself moves. When an element is pinned to non-opposing edges on the workspace, the distance of the element from those edges of workspace remains fixed or proportional.

You can define the position of the element as Float or Fixed.

Dimension refers to the fluidity or the fixity of the element container. You can control the resizing aspect of any element by using the two arrows in the Dimension section. When the size of the document changes, the width and height of the element container also changes. If you enable either or both the arrows, the container of the element changes accordingly in height and width. By default, both the arrows are enabled.

To change the dimension of the element in the rendered creative, perform the following: