Create a Button

A few simple methods for creating buttons.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

TIME Sites doesn't have a dedicated button component: instead, you can turn pretty much any element on your page into a button.ย 

By adding a link to a text element, a container, or an image, you can easily turn it into a button. If you want, you can also add a hover state to give it some interactivity.ย 

This article describes how to create a simple button using a text element.
โ€‹

Video

Start with a Text Element

Drag a text element from the left toolbar onto your page:

Double-click to type the button text into it:

Then use the right toolbar panels or the handles in the focus frame to resize the text box and adjust the padding:

Then use the Text Formatting, Stroke, and Color panels in the right toolbar to style the button the way you want it to look:

Add a Link

At the top-right of any selected element is a "link" icon. Click this to add a link, or choose "Link" from the "Edit" menu.

This will open the link dialog, which allows you to choose the destination. To learn more about the link dialog, refer to this article.
โ€‹

Add a Hover State

Hover states can be added to any element in TIME Sites by toggling to hover mode in the top toolbar.

While you're in hover state, any changes that you make will be applied only on hover over the selected element. Be careful not to lose track of when you're in hover mode vs. default mode!

A banner at the top of the stage will help remind you when you're working in hover mode. You'll also see an orange border around the selected element, and a small "editing hover state" indicator:

Once you've styled the button the way you want it to look on hover, toggle back to default mode. You can now preview the effect you've creating by hovering your mouse over the button.

Did this answer your question?