In this video we're going to cover buttons and links. 1
You'll find two types of buttons in Elements panel. 2
And you will also find two types of links. This duality got me a little confused in the beginning. And 3
I had trouble to understand which one to use and where. 4
So let's clarify why there are two links and two buttons. 5
Let's start with links. Link Block is a regular Div Block, except it can be linked. 6
You can put anything inside the Link Block and the whole thing will be clickable. 7
Text Link, on the other hand, is just that, a text link. You can't put anything inside it. To link the links. 8
We select the link and click on the Settings tab. 9
This is where we can update link settings. 10
First one is URL. Where we can type in the exact destination. 11
Next we have pages. 12
This is where we can link to other pages in our website. 13
And this is exactly the option we would use if these links weren't fake and we actually had other pages. 14
Right now it only shows one page - home. 15
That's where we are. 16
Next, we have a page section. And this is when you link to a specific section on the same page or even 17
on another page. 18
Right now it's empty. 19
There is one extra thing we need to do, to be able to link to a section. 20
We'll get to that at some point. 21
And last two are e-mail and phone links, for email addresses and phone numbers. Email link will open up 22
a default e-mail client that user has set on their computer. For example, like Outlook or Gmail. 23
And it will open the new mail window with e-mail address and subject line pre-filled with the values 24
that we have put there. 25
In my case, it opened up a Gmail window. Because that's what I have set as my default e-mail client 26
on my computer. 27
The phone number is for mobile devices, so the person looking at the site on their mobile device can 28
click a link directly to call without needing to copy and type in the digits. On a computer, 29
this is mostly useless. 30
You'll get the error message sometimes. 31
Now for the buttons. 32
We have two types. A regular button and a form button. The form button can be styled just like 33
a regular button, but it's linked only to the form and submits the form when clicked. 34
The regular button, on the other hand, works just like a text link. It has the same link settings and just 35
like a text link we cannot place other elements inside. 36
This means you can create buttons from text links. 37
You can also create buttons from Link Blocks. 38
And if you want to create a button that has an icon inside or an extra line of text, then Link Blocks 39
are exactly what you'll need to use. If you ever find yourself lost 40
what each element does, use the More Info pop-up from the elements panel. Each element has a little question 41
mark on top, click on it to get a quick explanation, what this element does. 42
And if you're still not sure and want to see the in-depth guide. Click on this link, it will lead you 43
to the tutorial page for that element on Webflow's website. They are very good tutorials. 44
So back to our button. Let's add it the button shape. Our button 45
in Figma has a specific size. 46
It's 168 pixels wide and 50 pixels height. 47
We can use these exact values. But you'll see that using exact width is not a good idea. 48
First, let's try to center the text inside our button. 49
How do we do that? Vertical alignment is quite simple. 50
We can simply use the text alignment option and center it. But for the horizontal alignment, we have to use 51
padding, so we can push the text around until it looks centered. 52
Now, here's the reason why setting and an exact width is a bad idea. 53
If at some point we decide to change text and it's something longer, the button doesn't adjust and text 54
has to overflow. 55
A better way is to use the padding value again. 56
We can grab the padding value right from our designs. Spacing on the left and right is a 48 pixels. 57
We can use these values for our button padding. Remove the width and add 48 pixel padding on both sides. 58
This will make our button non fixed. 59
And it will adopt to the size of the text. 60
And lastly the rounded corners. This can be changed inside the border section under Radius option. Just 61
like we did in Figma, we can just increase this until a button becomes rounded, completely. 62
So, to recap. We have two buttons. Regular and form button. Form button can only be used inside a form. 63
And regular button is used for linking to other pages, sections on the page, e-mail, links, phone links, 64
etc. We have two types of links. Text links and link blocks. Link blocks are just like div blocks- 65
empty boxes that can nest many other elements inside, even other div blocks, but it can act just like 66
a regular link. 67
As for the text links, they can't nest anything inside and they work just like a regular text.