Vev Help Center
Search…
Link Button
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
  • Button basics
  • 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.

Button basics

The Link Button element comes with parameters and options you can edit.
Parameter
Options
Link Type
Page, Element (anchor), External, Email, Phone, File
Animation
Preset animations with the ability to change the duration and easing
Button Text
Change the text
Note: Need more options? Use the Code Editor to fork the Link Button element and create your own custom one.

Button Text

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:
  • Size
  • Background
  • Text
  • Border
  • Border-radius
  • Shadow
  • Text Shadow
  • Layout

Background Color

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).

Border

Similar to the background color, borders can bet set uniquely for the default-state and hover-state

Border Radius

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.

Shadow

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.
Last modified 2mo ago