Add a button to your project and link to the other pages, anchors, or external sites
Buttons are an essential element for any site and serve as a call-to-action (CTA), links to pages, anchor to a certain section, and lead to external resources.
In this lesson:
Adding a Button
Styling a Button and Button States
Adding a Button
Add a button from the Add Menu on the top bar. Then, drag the element to your desired size and position on your canvas.
To add a button:
Navigate to the Add Menu on the top bar
Find and select the Button element
Click and drag onto your canvas
Select the Button element to trigger the Style Panel
Note: If a button isn't enough and you need a frame or image to serve as a link, use the Link Addon to add a link function to any element or section.
The Link Button element comes with parameters and options you can edit.
Page, Element (anchor), External, Email, Phone, File
Preset animations with the ability to change the duration and easing
Change the text
Note: Need more options? Use the Code Editor to fork the Link Button element and create your own custom one.
Customize the text inside the button using the "Button text" field inside the element configuration options. To add icons inside this parameter field, you must paste a Unicode character of the icon you wish to use in your button label.
Hot Tip: Want to add emojis from your Mac? Use the shortcut Command ⌘ + Ctrl + Space to open the Emoji keyboard.
Styling a Button
To style a Button, double click on the element and you can use the Style Panel to edit:
Customize the default state of the button by editing the background color for the Link (LI). The hover-state color can also be uniquely customized by editing the background color for the A Hover (A).
Similar to the background color, borders can bet set uniquely for the default-state and hover-state
Use the border-radius style property to control the roundness of buttons. The set border radius remains consistent between the default and hovered button states.
Buttons are traditionally recognized as objects that we can press down. To mimic this trait, add a shadow to make the button look raised from the surface of the page. You can uniquely set a shadow for the default and hover button states. Setting a less drastic shadow in the hovered state can create the illusion that of the button being pressed down.