Lesson info

The button element lets you link to pages, page sections (anchors), external links, emails, assets, and telephone numbers. In this video, you'll learn how to create, style, and customize buttons, as well as add states to provide website visitors with the affordances they need to navigate your website.

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

From the Elements Panel, we can add a button right to the Canvas, and we have the option to add a link right here. Again, that’s just an option: maybe you’re working on layout right now and you’ll come back. You can move on with your work and access these link settings at any time by selecting the button, and pulling up the Element Settings panel.

And since we intend to reuse this button, let’s create a class: and we can name it anything, maybe Simple Button.

We can adjust our padding on this class (our inner breathing room): we can click and drag while holding option or alt to do both sides at once.

And right now the size of this button is being determined by (1) the text inside…and (2) the padding. And we can change our text inside this particular button by double clicking and typing in something else. And when we make changes to our typography: our font size, our line height, our letter spacing — any changes we make here, or any changes we make to our padding — affect the size of the button.

We can override size by setting custom values — for instance we can do width. Or we can remove those styles (option click or alt click), and go back to the way it was.

As for margin, this comes into play when there are elements around or next to our button. So for this, let’s give this button some company. We can drag in a new button, but notice how changes to the first button don’t affect our new button.

Of course we want to make sure we apply that class, our Simple Button class — to the new button as well. Or better, we can just delete our new button and copy and paste from the original. That keeps the style attached to any pasted elements as well.

Okay — our buttons are now pressed up right against each other. No breathing room. What we can do here is add some margin on both sides. And that looks pretty good. So that’s margin.

And now that we’ve sized and positioned our buttons, we can make some quick style changes. Like background color. Since our buttons are all using the same class - Simple Button - changing the background color affects all of our buttons.

But if we want control over different states, like when a user hovers over the button, we can do that, too.

There are three states we’ll want to cover for buttons — these aren’t exclusive to buttons — you can do this on all sorts of elements, but it’s very useful here. We have none or normal, hover, and pressed. And it’s exactly what it sounds like.

If we want to set the style to be different on hover, under states, we go to hover. And we can see here that we’re now styling the hover state for this class (for our Simple Button class). Maybe we want to make a change to the background color, choose a background color (so we have contrast there). Now when someone hovers over that button, they get the hover state.

And when we press down on that button? We can change that, too. Go in and make that selection, and we can change the style — we can change the state that will show up when someone presses down on the button.

So those are some of the basics when it comes to buttons.

Related tutorial

Button

2:44