Button

Clickety-click-click. We all know what a button is, so let’s go straight into how you can create them yourself using Ycode.

Adding a button

To add a button, click on the Pointer icon in the top panel and select Button. You’ll now see a basic black-and-white button on your canvas.

In the Settings tab, you can add the URL and decide on the link type (a page, custom URL, phone number or email address).

Duplicating

If you want to add two buttons next to each other, simply select the button, right-click (or use ⌘/Control + C) and Copy the button. Then paste it by clicking Paste or using ⌘/Control + V.

Creating space

To create space between the two buttons, you can do it in two ways:

1. Use margin

Select the left button and unfold Spacing, then click the lock icon to unlock and add Margin on the right side.

2. Use child spacing

Select the parent element of the button and unfold Spacing in the Design tab. Then set a number to apply margin between the button elements in the background.

Styling

In the Design tab on the right, you can adjust a variety of settings. Change the font and font size, add a background, adjust the padding, add shadows or change the border-radius.

Under Sizing, you can also adjust the size of your button. The size will automatically increase if you make the font size bigger or add more spacing.

Hovering

You can also design how buttons look when you hover over them. To get to these design settings, simply click the button and unfold Neutral in the Design tab, and then select Hover from the dropdown menu.

You can then use all the settings, like adding different background colors or changing the font text. Once you’re done, you can switch back to the neutral view.