Button Tool

To add a button select the Button tool from the toolbar or press B, then click anywhere in the page or canvas.

Button options

There are several options and properties in the Inspector panel. This includes options for: positioning, changing the width and height, setting opacity, adjusting rotation and corner radius, adding a new state, choosing the background color, selecting text type, adding text-shadow, icon, border or drop shadow and/or link to an URL or element.

Refer to the image above to identify button properties panels.

1. Width and height
2. Opacity
3. Rotation, corner radius
4. Text
5. Text Shadow
6. Icon
7. Border
8. Drop Shadow

Learn more about how to use button properties below.

Width and height

Those properties allow changing the size of the button, once hovering on the letter W (width) or H (height) should appear a left-right arrow which allows dragging to the desired size, click and drag, and release after the perfect size is reached.
Alternatively pressing on the number close to W or H letters will allow entering the desired size in px (pixel).

Once the lock icon is pressed it will change to a locked one, this means that when the button will change size it will change proportionally.

Opacity

Once dragging or typing another value, button transparency will change accordingly, it could be from 0 to 100.

Rotation, corner radius

Once hovering on the angle icon should appear a left-right arrow that allows dragging to the desired radius, click and drag, and release after the ideal angle was reached.

The right drag - button will rotate in the right (positive value) direction, left drag - will rotate to the left (negative value).

Alternatively pressing on the number will allow typing the exact degree amount.

The corner radius works in the same way as the angle, but once the action performs it will change the radius.

A corner radius with 0 (zero) px will make the button have sharp corners

It could be combined with rotation.

Pressing the icon that indicates corners on the right side just close to the corner radius will allow changing the radius per corner

The order is:

• Top right corner

• Bottom right corner

• Bottom left corner

• Top left corner

Text

Text property will allow choosing the text family, text weight, text size, text color, text opacity, letter spacing, text alignment and align position for the text in the button.

Choose any font from a bunch of free-to-use fonts, press on the arrow icon and choose any font name you like, or press on the search box and type the name of the familiar font that could be on the list.

Choose among all the available text weights, it could be a different amount of text weights based on the selected font, Roboto has 6 unique text weights, from Thin to HeavyBold.

Pressing on the square icon that indicates text color will open a color selection tool that gives the ability to change the text color to any desired color from 16,777,216 different colors.

Or press on the color code that starts with a # sign and type 6 symbols color code.

Once hovering on the icon that shows a letter should appear a left-right arrow which allows dragging to the desired amount, click and drag, and release after the amount was reached.

Or type in the desired value of letter spacing.

Choose desired text alignment, press on the icon that represents text alignment, it could be switched between:

• 
text align left
• 
text align center
• text align right
• text align justified

Align text position relative to button, it could be switched between:

• align top

• align middle
• 
align bottom

Text Shadow

Press on the plus icon to add it.

By default, it will be assigned a black color (#000000) with 25% of opacity, with the X (right) and Y (down) axis to 1px, and with the blurriness to 3px.

Text Shadow property could be adjusted to your needs, click on the icon close to the first number in the row and the additional panel will appear immediately.

Play around with all the options, once happy click anywhere on the canvas or proceed straight to any other property or element.

Icon

Clicking this property will allow enabling the icon in the button, by default it would be a heart icon with a size of 16px.

It could be changed to any icon from suggested Material Icons or it could be another one that could be found while searching.

This property allows changing the size of the icon, once hovering on the arrows icon should appear as a left-right arrow which allows dragging to the desired size, click and drag, and release after the perfect size is reached.

Alternatively pressing on the number will allow entering the desired size in px (pixel).

Baseline alignment could be changed, it could be a positive or negative value.

Once hovering on the circle with the top arrow icon should appear a left-right arrow which allows dragging to the desired size, click and drag in the right-left direction, and release after the perfect alignment is reached.

This value indicates space between the icon and the text.

Hover on the icon close to the value and drag until the desired amount is reached or enter the exact value.

Border

Clicking this property will enable the border inside the button, default it will be 1px width, solid with the black color with 50% of opacity.

The border could be adjusted to any size and/or transparency.

Border style could be changed from solid to dash or dots by clicking on the border type title.

Drop Shadow

This property is usually used for giving the impression that the object is raised above the objects behind it.

Just press on the plus icon to add it.

By default, it will be assigned a black color (#000000) with 25% of opacity, with the X (right) and Y (down) axis to 1px, and with the blurriness to 3px.

Drop Shadow property could be adjusted to your needs, just click on the icon close to the first number in the row and the additional panel will appear immediately.