Summary

  • Overview
  • Video Lesson
  • Add Button
  • Button Presets
  • Convert Button To Hyperlink
  • Button Properties
  • Button In Responsive Modes

Overview

The Button is the essential call-to-action Element that takes your site visitors to a Page, Block, File, Phone, Email, Modal Popup, or Post by clicking on it.

button.png

Video Lesson

See Also

More video lessons

Add Button

You can add the Button Element from the Quick Access Panel by selecting the Button -> Button or pressing Alt+B.

add-button.png

Button Presets

To add a button to your web page, you can use the Button Presets from the Quick Access -> Add Panel -> Button.

button-presets.png

Convert Button To Hyperlink

You can quickly convert a Button to a Hyperlink and vice versa by clicking the Quick Presets in the Property Panel.

convert-button-hyperlink.png

You can also convert a Button to a Hyperlink by removing the Fill and Border or adding the Hyperlink element and using its presets in the Add Panel -> Button section.

Link Button

You can set a button's destination link by clicking the Link icon on the Context Panel, which opens the Link Settings dialog.

link-button.png

On-Click Link Setting

You can set the On-Click parameter in the Options on the Context Toolbar for the Button and Hyperlink Elements.

on-click-button-toolbar.png

On-Click Link Property

You can also specify the On-Click property in the Property Panel to improve the usability of the Button and Hyperlink Elements' linking.

on-click-property.png

Button Link Settings

You can link a Button to a Page, Block Anchor, File or PDF, Phone Number, Email, Modal Popup, or Post.

NOTE: Use the Wed Address option to paste the web page's full URL copied from the browser address bar.

link-settings.png

Button States

You can modify the Button Fill, Border, and Text Color for the three Button States: Default (Color), Hover, and Active.

button-states.png

Button Properties

You can stylize the Button by editing the Properties in the Property Panel.

Resize And Position

You can manually resize and move the Button Element in the Editor by dragging the markers or the Element.

move-resize-button.gif

By entering the values, you can specify the Width and Height in the Property Panel. You can also set the Left, Right, Top, and Bottom Padding values to change the Button size.

button-size-position.png

Button Styles

You can pick one of the five styles for your Button Element.

button-styles.png

Button Background

You can customize the Background of your Button Element by setting Сolor, Hover, and Pressed Colors. If you do not specify the Hover and Pressed Colors, the primary Color is used for two other states.

button-background.png

Button Border

Similarly, you can add the Border to your Button Element, then change its Color and Width for all states: Color, Hover, and Pressed. If you do not specify the Hover and Pressed Colors, the primary Color is used for two other states.

button-border.gif

No Color Option

You can set the No Color option in the Color Picker. You can also remove the Color in the Context Toolbar and the Property Panel for a Button.

no-color-option-button.png

Button Radius

Change the corner sharpness of the Button Element using the Radius property.

button-radius.gif

Button Text Style

Customize the text of the Button Element. Select the Font and make the text Bold, Italic, Underlined, or Uppercase. Select the Color of the text, Hover, and Pressed Colors. Adjust the Letter Spacing.

button-text-style.png

Button Shadow

Enable the Shadow by checking the Shadow checkbox in the Property Panel for the selected Button Element. You can choose the Shadow Preset or switch the Settings Tab to adjust the Shadow manually.

button-shadow.png

Button Icon

You can add a Button with an Icon by choosing the Style in the Property Panel. You can add and modify the Button's icon in the Icon section of the Property Panel.

button-icon.png

You can also quickly use the Button With Icon Presets in the Add Panel.

Responsive Modes

You can modify the Button Element size and position for all available Mobile Views.

button-mobile-views.png

## Summary - Overview - Video Lesson - Add Button - Button Presets - Convert Button To Hyperlink - Button Properties - Button In Responsive Modes ## Overview The Button is the essential call-to-action Element that takes your site visitors to a Page, Block, File, Phone, Email, Modal Popup, or Post by clicking on it. !button.png! ## Video Lesson ## <iframe width="600" height="330" src="https://www.youtube.com/embed/tJziN4jH-vs" title="Video Lesson: Button Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ### See Also [More video lessons](page:1318) ## Add Button You can add the Button Element from the Quick Access Panel by selecting the Button -> Button or pressing **Alt+B**. !add-button.png! ## Button Presets To add a button to your web page, you can use the Button Presets from the Quick Access -> Add Panel -> Button. !button-presets.png! ## Convert Button To Hyperlink You can quickly convert a Button to a Hyperlink and vice versa by clicking the Quick Presets in the Property Panel. !convert-button-hyperlink.png! You can also convert a Button to a Hyperlink by removing the Fill and Border or adding the Hyperlink element and using its presets in the Add Panel -> Button section. ## Link Button You can set a button's destination link by clicking the Link icon on the Context Panel, which opens the Link Settings dialog. !link-button.png! ### On-Click Link Setting You can set the On-Click parameter in the Options on the Context Toolbar for the Button and [Hyperlink](page:110462) Elements. !on-click-button-toolbar.png! ### On-Click Link Property You can also specify the On-Click property in the Property Panel to improve the usability of the Button and [Hyperlink](page:110462) Elements' linking. !on-click-property.png! ## Button Link Settings You can link a Button to a Page, Block Anchor, File or PDF, Phone Number, Email, Modal Popup, or Post. NOTE: Use the Wed Address option to paste the web page's full URL copied from the browser address bar. !link-settings.png! ## Button States You can modify the Button Fill, Border, and Text Color for the three Button States: Default (Color), Hover, and Active. !button-states.png! ## Button Properties You can stylize the Button by editing the Properties in the Property Panel. ### Resize And Position You can manually resize and move the Button Element in the Editor by dragging the markers or the Element. !move-resize-button.gif! By entering the values, you can specify the Width and Height in the Property Panel. You can also set the Left, Right, Top, and Bottom Padding values to change the Button size. !button-size-position.png! ### Button Styles You can pick one of the five styles for your Button Element. !button-styles.png! ### Button Background You can customize the Background of your Button Element by setting Сolor, Hover, and Pressed Colors. If you do not specify the Hover and Pressed Colors, the primary Color is used for two other states. !button-background.png! ### Button Border Similarly, you can add the Border to your Button Element, then change its Color and Width for all states: Color, Hover, and Pressed. If you do not specify the Hover and Pressed Colors, the primary Color is used for two other states. !button-border.gif! ### No Color Option You can set the No Color option in the Color Picker. You can also remove the Color in the Context Toolbar and the Property Panel for a Button. !no-color-option-button.png! ### Button Radius Change the corner sharpness of the Button Element using the Radius property. !button-radius.gif! ### Button Text Style Customize the text of the Button Element. Select the Font and make the text Bold, Italic, Underlined, or Uppercase. Select the Color of the text, Hover, and Pressed Colors. Adjust the Letter Spacing. !button-text-style.png! ### Button Shadow Enable the Shadow by checking the Shadow checkbox in the Property Panel for the selected Button Element. You can choose the Shadow Preset or switch the Settings Tab to adjust the Shadow manually. !button-shadow.png! ## Button Icon You can add a Button with an Icon by choosing the Style in the Property Panel. You can add and modify the Button's icon in the Icon section of the Property Panel. !button-icon.png! You can also quickly use the Button With Icon Presets in the Add Panel. ## Responsive Modes You can modify the Button Element size and position for all available Mobile Views. !button-mobile-views.png! ##