0
1
00:00:00,240 --> 00:00:03,270
In this video we're going to cover buttons and links.
1

2
00:00:03,270 --> 00:00:05,420
You'll find two types of buttons in Elements panel.
2

3
00:00:08,480 --> 00:00:14,260
And you will also find two types of links. This duality got me a little confused in the beginning. And
3

4
00:00:14,260 --> 00:00:17,260
I had trouble to understand which one to use and where.
4

5
00:00:17,260 --> 00:00:21,070
So let's clarify why there are two links and two buttons.
5

6
00:00:21,070 --> 00:00:28,400
Let's start with links. Link Block is a regular Div Block, except it can be linked.
6

7
00:00:28,400 --> 00:00:32,450
You can put anything inside the Link Block and the whole thing will be clickable.
7

8
00:00:42,590 --> 00:00:47,750
Text Link, on the other hand, is just that, a text link. You can't put anything inside it. To link the links.
8

9
00:00:47,810 --> 00:00:50,720
We select the link and click on the Settings tab.
9

10
00:00:50,720 --> 00:00:52,840
This is where we can update link settings.
10

11
00:00:52,840 --> 00:00:57,440
First one is URL. Where we can type in the exact destination.
11

12
00:00:57,470 --> 00:00:59,150
Next we have pages.
12

13
00:00:59,150 --> 00:01:02,180
This is where we can link to other pages in our website.
13

14
00:01:02,180 --> 00:01:07,320
And this is exactly the option we would use if these links weren't fake and we actually had other pages.
14

15
00:01:07,460 --> 00:01:09,800
Right now it only shows one page - home.
15

16
00:01:09,800 --> 00:01:10,800
That's where we are.
16

17
00:01:10,820 --> 00:01:15,740
Next, we have a page section. And this is when you link to a specific section on the same page or even
17

18
00:01:15,740 --> 00:01:17,210
on another page.
18

19
00:01:17,210 --> 00:01:18,380
Right now it's empty.
19

20
00:01:18,370 --> 00:01:21,890
There is one extra thing we need to do, to be able to link to a section.
20

21
00:01:21,890 --> 00:01:23,410
We'll get to that at some point.
21

22
00:01:23,540 --> 00:01:29,450
And last two are e-mail and phone links, for email addresses and phone numbers. Email link will open up
22

23
00:01:29,450 --> 00:01:34,790
a default e-mail client that user has set on their computer. For example, like Outlook or Gmail.
23

24
00:01:35,150 --> 00:01:40,880
And it will open the new mail window with e-mail address and subject line pre-filled with the values
24

25
00:01:40,910 --> 00:01:42,200
that we have put there.
25

26
00:01:42,200 --> 00:01:46,850
In my case, it opened up a Gmail window. Because that's what I have set as my default e-mail client
26

27
00:01:46,850 --> 00:01:47,660
on my computer.
27

28
00:01:47,780 --> 00:01:52,970
The phone number is for mobile devices, so the person looking at the site on their mobile device can
28

29
00:01:52,970 --> 00:01:58,880
click a link directly to call without needing to copy and type in the digits. On a computer,
29

30
00:01:58,880 --> 00:02:00,080
this is mostly useless.
30

31
00:02:00,080 --> 00:02:02,120
You'll get the error message sometimes.
31

32
00:02:04,900 --> 00:02:05,800
Now for the buttons.
32

33
00:02:05,800 --> 00:02:12,090
We have two types. A regular button and a form button. The form button can be styled just like
33

34
00:02:12,090 --> 00:02:16,530
a regular button, but it's linked only to the form and submits the form when clicked.
34

35
00:02:24,000 --> 00:02:29,370
The regular button, on the other hand, works just like a text link. It has the same link settings and just
35

36
00:02:29,370 --> 00:02:32,280
like a text link we cannot place other elements inside.
36

37
00:02:32,280 --> 00:02:35,150
This means you can create buttons from text links.
37

38
00:02:35,220 --> 00:02:37,270
You can also create buttons from Link Blocks.
38

39
00:02:37,290 --> 00:02:43,230
And if you want to create a button that has an icon inside or an extra line of text, then Link Blocks
39

40
00:02:43,290 --> 00:02:47,580
are exactly what you'll need to use. If you ever find yourself lost
40

41
00:02:47,700 --> 00:02:53,280
what each element does, use the More Info pop-up from the elements panel. Each element has a little question
41

42
00:02:53,280 --> 00:02:57,930
mark on top, click on it to get a quick explanation, what this element does.
42

43
00:02:57,990 --> 00:03:03,150
And if you're still not sure and want to see the in-depth guide. Click on this link, it will lead you
43

44
00:03:03,150 --> 00:03:08,010
to the tutorial page for that element on Webflow's website. They are very good tutorials.
44

45
00:03:10,690 --> 00:03:14,200
So back to our button. Let's add it the button shape. Our button
45

46
00:03:14,200 --> 00:03:15,790
in Figma has a specific size.
46

47
00:03:15,860 --> 00:03:19,310
It's 168 pixels wide and 50 pixels height.
47

48
00:03:19,390 --> 00:03:24,130
We can use these exact values. But you'll see that using exact width is not a good idea.
48

49
00:03:28,110 --> 00:03:30,470
First, let's try to center the text inside our button.
49

50
00:03:30,480 --> 00:03:33,150
How do we do that? Vertical alignment is quite simple.
50

51
00:03:33,150 --> 00:03:38,100
We can simply use the text alignment option and center it. But for the horizontal alignment, we have to use
51

52
00:03:38,100 --> 00:03:44,760
padding, so we can push the text around until it looks centered.
52

53
00:03:44,770 --> 00:03:47,920
Now, here's the reason why setting and an exact width is a bad idea.
53

54
00:03:48,010 --> 00:03:53,590
If at some point we decide to change text and it's something longer, the button doesn't adjust and text
54

55
00:03:53,590 --> 00:03:54,640
has to overflow.
55

56
00:03:57,900 --> 00:04:00,370
A better way is to use the padding value again.
56

57
00:04:00,590 --> 00:04:06,770
We can grab the padding value right from our designs. Spacing on the left and right is a 48 pixels.
57

58
00:04:06,770 --> 00:04:24,330
We can use these values for our button padding. Remove the width and add 48 pixel padding on both sides.
58

59
00:04:24,360 --> 00:04:26,100
This will make our button non fixed.
59

60
00:04:26,100 --> 00:04:32,830
And it will adopt to the size of the text.
60

61
00:04:32,880 --> 00:04:39,090
And lastly the rounded corners. This can be changed inside the border section under Radius option. Just
61

62
00:04:39,090 --> 00:04:44,390
like we did in Figma, we can just increase this until a button becomes rounded, completely.
62

63
00:04:44,400 --> 00:04:49,890
So, to recap. We have two buttons. Regular and form button. Form button can only be used inside a form.
63

64
00:04:49,920 --> 00:04:56,250
And regular button is used for linking to other pages, sections on the page, e-mail, links, phone links,
64

65
00:04:56,330 --> 00:05:02,430
etc. We have two types of links. Text links and link blocks. Link blocks are just like div blocks-
65

66
00:05:02,430 --> 00:05:08,730
empty boxes that can nest many other elements inside, even other div blocks, but it can act just like
66

67
00:05:08,730 --> 00:05:09,700
a regular link.
67

68
00:05:09,720 --> 00:05:14,550
As for the text links, they can't nest anything inside and they work just like a regular text.