In this guide, we'll show you how to create and customize a button on your page.

You can use the button module in Semplice to link out to other pages, links, emails and more.

How to add a button

Simply drag a button module onto your page from the Editor as shown below.

Linking button

After you added a button module and entered desired text in to the Label field it's to time to link this button. Select the link type, pick a link or page and choose if you would like to open it in a new tab or current.

If you wish to link to a file in your button, you can learn how to do so here.

Customizing button

Adding icon

Click Icon Options and upload your custom icon, use a PNG or SVG vector file format. SVG format will be the best quality. You can then set options such as the icon height, spacing or alignment.

Changing button width and alignment

By default, the width of your button will be set automatically. However, you can set the button to be grid-width as well. In this case you will be able to adjust the width by stretching it across the grid columns.

In the same area where you can set the button width, you can also change the alignment of your button.

Changing border and color

To change these settings open the Border & Background option. Here you can set border width, color, fill color and make rounded edges.

Changing font on the label

Adjust your type formatting in the Typography section.

Adjusting padding

In the Paddings section you can customize spacing between the button label and button border. By adjusting the padding you can also precisely change the size of your button.

Adding mouseover

First select and preview your favorite effect preset. Then you can add an animation for your button label, but keep in mind that this will hide your icon. Adjust other settings like animation duration and easing, colors for text, background and border, as well as letter spacing and more.