The Button Elements.

Create a customizable button that links to pages, anchors and URLs with hover effects.

Webydo Support avatar
Written by Webydo Support
Updated over a week ago

Step 1: Drag and drop a button onto the canvas.

Choose from a selection of button types in the Elements Panel under the Button dropdown. Drag one to the canvas.

A default button looks like this:

You can resize the button like you would any element by dragging the bounding box handles or write values in the Design Panel.
​Step 2: Write text.
Open the Properties Panel to begin customizations.
In the field "Button Text" write the text that you what to appear in the button.
To set the appearance of the text, choose an existing text style from the "Text Style" dropdown.
These styles are your paragraph styles that you have already created.

If you want to change the color of the text on rollover, do it here and add a text shadow if you wish with this checkbox.

Step 3: Create link.
At the bottom of the Properties Panel you'll find the "Link To" dropdown. Choose between page, link, anchor, or none (if you wish only to use the hover effect.).

If choosing "Link" you can mark the checkbox "Open Link in New Window".

Step 4: Choose colors and hover effect.
In the middle of the Properties panel are the options for hover effects. As you try different effects, check them in Preview mode.
Note that every kind of button has slightly different settings options.

"Background or Border Transition" - This dropdown will set the inner animation transition for the colors only. Choose "None" if you wish to have no animation.
"Button Effect" - This dropdown will set the animation for the entire button. Choose "None" if you wish to have no animation.
"Transition Speed" - Set the duration of the transition.
"Background Color": The color in the begining of the transition.
"Background Transition Color": The color in the end of the transition.
"Border Transition Color": If you choose an effect that involves border, choose its color here.
"Border Transition Width": The width of the border that appears if you choose a border effect.

Step 5: check your work.
Go to "Preview" mode to see the animation you created.

Did this answer your question?