Button and Up Button
Button serves as a call to action (CTA) and may contain links to pages, pop-up forms, and more.
Button styles
A button has a default text. It is also assigned some style properties:
- Background color
- Round corners
- Font
- Paddings
- Pointer (shows whether a button is clickable or not when hovered)
You can change these styles and add new ones in the Styles settings in the right panel.
The size of a Button is determined by the text inside it (text length, font size, line height) and paddings. You can also customize the size of the Button by changing its width and height on the Styles tab in the Size section.
To style a Button, you can:
- change the corner radius (in the Size section)
- change margins and paddings (in the Size section)
- change the font, its size and color (in the Text section)
- change the background and border color (in the Background and Borders sections)
- add shadow (in the Effects section)
You can also use an image (Image or Icon) in a button instead of text or both. To do this, you can set an image in the button background settings or place an image or an icon inside of it.
Button is an interactive element, so it is recommended to set different styles for the hover or click states. For a better visual effect, you can change the background color of a button, add a shadow, a transformation (such as a margin or padding), or other effects.
To smoothly move from one style to another, use the Transitions effect for the styles of all Button states.
On the Logic tab, in the right panel, you can find Action settings. An action will take place when you hover or click a button.
When adding an action by pressing ‘+’, the Click action with a transition to a page is automatically added.
You can select another action by clicking on the icon to the left of the action name.
You can find the following options in the action settings:
- Action trigger – condition for an action to take place: upon clicking or hovering.
- Action – an action that will take place upon clicking or hovering.
The following actions are available when clicking on a button:
- Go to link – add a link in the Link field that will be used to move to another page when clicking on a button. You can set to open the link in a new tab.
- Go to page – select a project page from the drop-down list, which you will be redirected to when clicking on a button. You can set to open the page in a new tab.
- Go to anchor – use Select element button to set an anchor on a page (for example, a section), which you will be redirected to when clicking on a button.
- Send mail – add an e-mail address in the Email field, which a user letter will be sent to. When clicking on a Link Block with the Send mail setting, a user application will be opened for sending a message.
- Phone – add a phone number in the Phone field that will be dialed when clicking on a button. This action is available on mobile devices.
- Show element – use Select element to set an element that will be shown when clicking on a button. You can also select the Display setting from the list for this element.
- Hide element – use Select element to set an element that will be hidden when clicking on a button.
- Toggle element – use Select element to set an element that will switch its current display state to the Display value from the list and vice versa.
The following actions are available when hovering a button:
- Show element
- Hide element
- Toggle element
Up Button scrolls a web page up to the top when clicked.
Up Button contains a default text and the arrow icon. Also, it is assigned some style properties:
- Background color
- Round corners
- Font
- Paddings
- Pointer (shows whether a button is clickable or not when hovered)
You can style the Up Button like any other standard button and set styles for its various states using the Styles settings in the right panel.
It is also important to set the Position properties to the Up Button. The Button can be fixed in the lower right corner of a web page by setting Position fixed and right and bottom position attributes.
On the Settings tab, in the right panel, you can set the speed of scrolling to the top of the web page from 100 to 1000 milliseconds.
