Buttons are among the most important elements
on a page. Unless your page doesn’t have buttons. But it’s tough to find a modern
design that doesn’t use buttons in one form or another to serve as the call to action
(what you want the user to actually click or do). Buy something. Download something. Share something. We’re going to cover how to make buttons
just like this. And we’ll start with the basics of a button, we’ll cover states and
animated transitions, then we’ll talk about using multiple buttons (stacked on top of
each other or sitting next to each other), and we’ll end by covering custom link blocks
(which let us put other objects — other elements — inside a clickable button). Let’s start with the basics of a button.
This...is not a button. But we can add one by going over to the add panel...and just
dragging one in. (We’ll grab a button element and we’ll drag it right underneath this
paragraph, right here on the canvas.) And we’ll double click to edit the text
inside. Start browsing. Of course, the first thing we might want to do is change the background
color — let’s add a background color and choose something from our color picker. For
now, let’s try out the color black. Now, the button font and all the typography styles
(we can click in here) — typography styles are currently being inherited from the Body
(All Pages) tag (again, and we can demo here by going over and accessing our Body (All
Pages) tag — and it’s here that we can make sweeping font changes — notice how
changing the font here? That font change (on the Body All Pages tag) is being inherited
by the paragraph...and the button we just added. So the Body (All Pages) tag lets us
set typography defauts — that are inherited by other things throughout the project). But let’s go back (we’ll just go back
to our button). And ON our button (or anything else for that matter)...we can always override
our defaults that we just set in Body (All Pages). For instance, let’s change the font
weight to more of a medium here (increase that weight). And 16 (for the font size) is
a bit intense — we’ll use maybe 14 instead (and a different font size for a button...is
a pretty common pattern, we see this on sites like Stripe...on their design). And to continue
with our overrides, let’s add some letter spacing (maybe 1.1 looks pretty good). And
we can switch to ALL CAPS. The important thing to note is when we make
any change on a new element (like we did at first when we set the background color here),
a class is automatically created. (And classes are what let us control and override these
styles — classes are what gives us all the power and science and magic of CSS). And this
button style we just finished? We can reuse it (reuse that class) anytime...anywhere in
our project. And because we want to reuse it, let’s click our class label here...to
rename this to “Main button” (but you can name yours whatever you’d like of course,
to keep things organized). But just as important as organization...is
our button’s size. And the size of a button is determined by a couple different things:
first, it’s determined by the text itself (that’s everything we type in...it’s affected
by things like the font size...as you can see here... or the line height — any of
these text properties can affect size.) And the second thing that affects a button’s
size...is this: the padding we set on our class (the space inside the box...the button).
We have some default values here, but we can change our padding on our Main Button class
here at any time (holding option on macOS or alt on Windows to adjust both sides at
once). We can adjust the padding on the top and bottom...but we can also do the same for
padding on the left and right (remember: padding is the space inside a box; inside an element’s
boundary). Now. Can we still set explicit values? Can
we make this button 300 pixels wide? Sure. Can we set it to be 100% of its container
width? Sure. Of course, if we do something like that (and this doesn’t look that great,
but if we did...), we’d want to affect our text alignment to make sure it’s not hideous.
(Which it still kind of is.) For now, let’s set our width back to auto (we could undo,
but let’s just select Auto from the dropdown). As for where the button takes us? Two ways
to set this: we can press the tiny cog icon on the button label, or we can go to our element
settings to see all our options there. A button can take us a URL, a page in our
project, another section on the current page, it can fire up an email, a phone call, it
can link to a file download, or it can trigger an episode of Star Trek: The Next Generation. For us, let’s set it to another page in
our project, and we’ll select that page from the dropdown. But that’s button basics. Let’s talk states.
[United States list of states.] Now let’s talk states. Remember: we’re styling our
“Main button” class, and if we click in (in our selector field)? We can see all our
states. And we can click in to modify what the button looks like when we hover over it.
Let’s go over and make a change to the background color. So the background color here is what
we’ll see (the button will turn this color) when we hover over it. Of course, let’s
add that color as a global swatch so we can reuse it in other places in our project. We can also go back to none (to switch out
of our hover state), and we can play around with other properties. We can add a border
radius (we can round the corners this way), or if we want a sharper look, we can click
in and reset that style property. Let’s add a shadow (we’ll use box shadow). And
we can go in and configure the shadow to be a bit softer (let’s set it to 20). And let’s
set it to 180º (straight down). Since this isn’t the hover state, we can get rid of
the distance entirely, and let’s set the color (the opacity in our color) down to 0.
Fully transparent. Why? Because when we click out now, we can go in
and do something else: we can go back to our hover state, and then go back in to modify
the same exact shadow we just created. (We’re tweaking our shadow on hover.) Let’s first
make this thing visible: we’ll go in and increase the color (we’ll set the opacity
to 20%; .2), and then we’ll move it down just a tiny bit (we’ll move it down 3 pixels).
And there’s a really specific reason we’re doing that, but we’re going to cover that
in the next section. We can hover over to test how our button reacts
on hover (we see the background color change and the shadow change). But that’s enough. Enter: animated transitions. We can smooth
out (we can interpolate) between those two states by simply...adding a transition. And
we always add transitions FROM none (we’re not in the hover state). Let’s create one
for our background color (we can just select background color from list here), and that
means the background color will transition over 200 milliseconds (or .2 seconds). Let’s
hover to see what that looks like. Halfway there — the second thing we want to do is
animate the shadow. And for this it’s the same concept: a transition (this time it’s
a transition that’s being applied to the box shadow property), but we’re also going
to go in...and change the easing curve. The default is “ease”, but we’re going to
choose a more dramatic start and a more gradual ending (ease out circular is great for this).
And because the start is so dramatic, we can expand the timing to 500ms (let’s do that
and then hover to preview the box shadow transition)...that’s still a little quick; let’s try even more.
1000 ms (a full second). Check again? It looks good. Something to note here: you can always press
escape to deselect an element like this. But the element boundary (the blue outline when
you hover to test) might be distracting. So let’s go over and hide our element edges.
This way we can hover over and preview what everything looks like. Let’s select the button again, and the sky’s
the limit with what you can do. One other thing we might want to explore (we’ll go
back in and modify the hover state)...is moving the button up a few pixels on hover. (We can
add a transform to translate...to move up our button...let’s say 3 pixels up... on
hover.) Let’s check it out. What does that look
like now? [Siri: that looks super janky.] Thank you, Siri. What we need is to add one
more transition. Let’s go back to our none state (we’ll just click back over), and
we’ll go in and add a third transition. This one’s going to be for transform...and
we’ll do the same exact thing here. We’ll go in and change our easing curve to ease
out circular...and then we’ll set our duration (the duration of this transition)...to 1 full
second. And just like that (this time we’ll go over
and go in to preview mode)...our button looks and behaves exactly as we expected. And the
reason we used that 3-pixel offset? Is because while the button moves up 3 pixels...the shadow
moves down (by the same amount). That’s animated transitions. How do we place
multiple buttons next to each other? There are a couple considerations here. First,
let’s duplicate this button. We can just copy and paste our first button. But things are a bit tight. Let’s add some
space on the outside (we’re adding margin on the right side to push apart our two buttons
here). And notice how, even though the second button (the pasted button was selected), it
still added that right margin to the first button, too. That’s because when we copied
and pasted, our Main button class came right along with it. That of course means style
changes to any button that has that class? They’ll all be affected as we style. But there’s a problem with what we just
did. Well, two problems. Because the first one is that it says “Start browsing” twice.
[Siri: Repetitive.] Let’s double click, select that text, and change the second one
to...say “Contact us”. [Siri: Contact us.] But the second problem is far more sinister,
and it can really lead to alignment problems in the future. The problem with adding margin to the right
side only is this. Say we want to use this button on the second section. This section
has everything aligned to the center (we see this kind of layout often). But the button
we just placed there? It’s not really centered. And that’s because that 10-pixel margin
on the right side is pushing the button away from what we’d expect center alignment to
be. We can see this more clearly if we exaggerate the margin. So how do we solve this? It’s actually fairly straightforward. We
solve it...with symmetry. Instead of 10 pixels on one side, let’s
set it to 5 pixels on both sides. And now it’s centered. And those top ones in our hero section? Here’s
what people sometimes do. They’ll add some type of special class to
the first one or the second one, and they’ll adjust the margin — but there’s an easier
way (a way to do this that lets you manage only one, single button class). We can just use a div block. (We’ll just
drag a div block right where the buttons are, and then we’ll move each of the buttons
right inside.) And what this div block lets us do (let’s make sure it’s selected)...is
it lets us set negative margin...which we use as a perfectly valid offset. And now our
alignment is fixed. (We didn’t have to change the button at all.) Let’s name the div block
(let’s name that class) “Button wrapper”. And this works on everything. You can use
a button wrapper (with negative margin) to offset any symmetrical margin you’ve set
on buttons anywhere. It’s really empowering because don’t have to worry about managing
different groups of buttons just because their alignment’s different. But that’s multiple buttons. Finally, let’s
talk about putting other elements inside of buttons. (Here’s what it’ll look like
once we’re done.) For now, let’s all take a moment to recognize that we never changed
the text on our third button. Which is good, because we’re about to delete it. What we’re going to do is use a link block
here. A link block is just like a div block in that it’s just a box that we can put
elements inside. (We’ll drop that in our section.) First thing we’ll do with it?
Let’s apply our button class. Next thing is text. Let’s grab a text block (we’ll
go in and drag a text block inside our link block), we’ll ignore that it’s underlined,
and double click to edit that text. Explore the trend...s. To get rid of the underline on our link block,
we’ll just make sure it’s selected, and we’ll choose no decoration under our typography
styles. Now. By default, links are this blue color. And we can change that here as well.
And we’ll add our arrow. For this example, we’re using an SVG here in our assets...we’ll
drag that SVG right inside. And we can set an explicit width. Let’s just enter a starting
value, and we can use up and down to tweak it. (And if you’re wondering why we’re
using the style panel to enter the value and not clicking and dragging the corner to resize?)
It’s because the class that’s automatically created here will let us change the arrow
size each time we reuse this link block...in other places throughout our project. Now, we want the arrow to be to the right
of the text. So what we'll do is use the magic of flexbox on the Main button here. And right
now...it looks good. But something to note is this: let’s say our arrow was a slightly
different size. Let’s go in and make its width (instead of 15...maybe 30). Notice how
the alignment isn’t centered. So we can go back into our link block, and center that
alignment in our flexbox controls — that means things will be vertically aligned no
matter what their size is (even as we bring our size back to normal). Let’s also add some margin to push it off
(we’ll add margin on the left side to give the arrow some breathing room.) And because we added flex to the Main button
class, our two buttons on the top took up the full width of the Button wrapper div block.
To fix this, we want to set flex to our Button wrapper. But that’s using a link block to create
a more custom button. This is just the beginning and there’s so
much you can do here — especially with interactions and animations. We have a full course and
tons of videos and articles on these topics — so check that out on Webflow University
if you haven’t already. But for now, we just covered the basics of
a button, we covered states, we did animated transitions, we showed using multiple buttons
in a wrapper, we covered using link blocks to build custom buttons with things inside,
and then Dylan accidentally nudged the audio to be just noticeably out of sync with the
end of this video.
