0
1
00:00:00,240 --> 00:00:03,670
Let's now add our second button. To save time on styling,
1

2
00:00:03,720 --> 00:00:06,060
we can duplicate our existing white button.
2

3
00:00:06,210 --> 00:00:10,770
You can right-click and then duplicate. Or use a Control+C,
3

4
00:00:10,770 --> 00:00:15,350
Control+V, a regular shortcut. Or Command+C, Command+V for the Mac.
4

5
00:00:15,450 --> 00:00:22,020
When you do this, 2 funny things will happen that you don't expect. First, instead of pasting it underneath,
5

6
00:00:22,020 --> 00:00:24,050
like most other elements behave,
6

7
00:00:24,090 --> 00:00:25,290
it is placed next to it.
7

8
00:00:25,740 --> 00:00:31,200
This behaviour is happening because of a default display style that is applied to buttons.
8

9
00:00:31,200 --> 00:00:36,690
We'll cover this in a upcoming lesson. In this lesson, we're going to cover the second funny behavior.
9

10
00:00:36,930 --> 00:00:39,510
When we try to make any edits to our second button.
10

11
00:00:39,510 --> 00:00:42,300
everything is being applied to the original button.
11

12
00:00:42,300 --> 00:00:43,280
This is not a bug.
12

13
00:00:43,320 --> 00:00:48,930
On the contrary, it is probably the most powerful feature of CSS and one of the reasons why CSS was created
13

14
00:00:48,930 --> 00:00:52,310
in the first place. This feature is called Class.
14

15
00:00:52,320 --> 00:00:57,540
We can have this button on 100 different places on our website, and by changing one instance, we can change
15

16
00:00:57,600 --> 00:01:00,390
every button with the same Class. Inside Webflow
16

17
00:01:00,390 --> 00:01:06,390
This class is managed from here. A place called Selector. Selector means what it says, it selects a specific
17

18
00:01:06,390 --> 00:01:07,250
Class.
18

19
00:01:07,260 --> 00:01:12,360
There are other things we can select besides classes, like a Tag, but more about that later. When we need
19

20
00:01:12,360 --> 00:01:12,920
it.
20

21
00:01:13,110 --> 00:01:15,630
The blue square saying "Button", is our class.
21

22
00:01:15,660 --> 00:01:19,890
If you select the original button, you will see that it has the same class.
22

23
00:01:19,890 --> 00:01:22,950
This is why the same CSS properties apply to both.
23

24
00:01:22,950 --> 00:01:28,170
But if we remove this class from the button, then we're going to lose all the changes that we made to
24

25
00:01:28,170 --> 00:01:32,250
it. And go back to the default settings or default properties.
25

26
00:01:32,250 --> 00:01:37,740
But don't worry, we can select the class back again and instantly all the properties will come back. When
26

27
00:01:37,740 --> 00:01:43,230
you are looking for an existing class, just start typing and Webflow will filter the search results.
27

28
00:01:43,230 --> 00:01:47,740
If the class already exists, then you'll it here and you can select it.
28

29
00:01:47,820 --> 00:01:52,810
If it doesn't exist then you can create a new class yourself and name it whatever you want.
29

30
00:01:52,810 --> 00:01:58,140
Applying newly created class will do nothing to our button. Because that class has no CSS properties
30

31
00:01:58,140 --> 00:02:00,470
applied to them. On a newly created class
31

32
00:02:00,480 --> 00:02:04,770
we can apply new styles and it won't affect the original button.
32

33
00:02:04,950 --> 00:02:07,470
Classes are removable and can be applied to anything.
33

34
00:02:07,470 --> 00:02:12,240
For example, we take "my pretty button" class and apply to the original button.
34

35
00:02:20,580 --> 00:02:23,400
Classes can also be duplicated or renamed.
35

36
00:02:23,400 --> 00:02:25,620
You can do that from this tiny dropdown.
36

37
00:02:28,880 --> 00:02:33,010
Just rename and hit enter. Duplicating a class is a good way to save time.
37

38
00:02:33,020 --> 00:02:38,840
Our ghost button has a lot of same properties as our primary button. So we can duplicate those properties
38

39
00:02:38,900 --> 00:02:41,230
and create a new class from it.
39

40
00:02:41,390 --> 00:02:44,760
And now we can name it whatever we want.
40

41
00:02:44,800 --> 00:02:47,950
We have two buttons with the same properties but different classes.
41

42
00:02:47,950 --> 00:02:55,960
So when we edit one, the changes won't affect the other. Inside CSS we can see how these classes are presented.
42

43
00:02:55,960 --> 00:03:00,670
It starts with a period followed by a name we wrote. Webflow will generate code in lowercase
43

44
00:03:00,670 --> 00:03:04,440
letters regardless of the way you write it inside the designer.
44

45
00:03:04,480 --> 00:03:10,660
So you can use uppercase if you like. Spaces are not accepted in an actual CSS class naming, but inside
45

46
00:03:10,670 --> 00:03:14,180
Webflow you can use them. Webflow will then change that space into dashes.
46

47
00:03:16,760 --> 00:03:20,530
For any change we need to make to the element, we have to give it a class.
47

48
00:03:20,600 --> 00:03:26,480
We haven't been doing this so far because Webflow actually does it automatically for us. If you select
48

49
00:03:26,540 --> 00:03:31,150
any element that we have already edited, you'll see it has some sort of class applied to it.
49

50
00:03:35,810 --> 00:03:37,620
If you drop a new element, they don't.
50

51
00:03:37,640 --> 00:03:39,370
The selector is empty.
51

52
00:03:39,410 --> 00:03:44,660
The moment you style an element, Webflow will automatically generate a class name for us.
52

53
00:03:44,660 --> 00:03:52,520
You cannot style an element without having a class applied to it. When you look at the navigator, you'll
53

54
00:03:52,520 --> 00:03:55,510
see that elements are named according to their classes.
54

55
00:03:55,520 --> 00:04:00,830
Let's change the name of our Div Block that holds all our content. Let's call it a container because that's
55

56
00:04:00,830 --> 00:04:01,880
what it does.
56

57
00:04:01,880 --> 00:04:07,160
We have applied very specific rules to this container - making it center in the middle, not stretching
57

58
00:04:07,160 --> 00:04:10,900
more than 1160 pixels and so on.
58

59
00:04:10,910 --> 00:04:16,160
This is a very useful container and we will reuse it elsewhere on our page. And let's do the same
59

60
00:04:16,160 --> 00:04:21,390
thing with the blue box. Our blue box is, in reality, is a hero section that holds everything inside this
60

61
00:04:21,390 --> 00:04:29,370
section, so let's give it some respect and name it a more appropriate name, like hero section.
61

62
00:04:29,490 --> 00:04:29,870
All right.
62

63
00:04:29,870 --> 00:04:34,910
Back to our ghost button. Now that we have a different class, we can style it as we want. Ghost button
63

64
00:04:34,940 --> 00:04:39,710
is made of same material, but the background field is transparent and instead it has borders.
64

65
00:04:39,710 --> 00:04:43,520
We can change this in a similar way as we did in Figma. Under background,
65

66
00:04:43,520 --> 00:04:47,540
open up the color picker and select the first value, which is transparent.
66

67
00:04:47,570 --> 00:04:53,060
You can also do this by decreasing the opacity slider. Same result. It has completely ghosted out of the page,
67

68
00:04:53,270 --> 00:04:54,890
but text is still there.
68

69
00:04:54,890 --> 00:04:57,930
It's invisible because it's the same color as our background.
69

70
00:04:58,340 --> 00:04:59,800
Let's change the text to white.
70

71
00:05:03,000 --> 00:05:04,380
And now let's add borders.
71

72
00:05:04,380 --> 00:05:07,650
This we can do directly under Border section.
72

73
00:05:07,650 --> 00:05:14,250
It says 0 pixels. If we increase it to 1 pixel, the border will show and then we can change color to
73

74
00:05:14,250 --> 00:05:14,910
white.
74

75
00:05:14,920 --> 00:05:20,190
Looks complicated in the beginning, but it's quite simple. Style shows what sort of border we want to
75

76
00:05:20,190 --> 00:05:20,870
use,
76

77
00:05:20,910 --> 00:05:27,130
solid line, dashes or dots. And those squares show on which side are we adding the border.
77

78
00:05:27,210 --> 00:05:31,780
Right now, the middle square is selected, which means we are adding all 4 sides.
78

79
00:05:31,860 --> 00:05:36,060
If we select the top square, we can edit the top border only.
79

80
00:05:36,090 --> 00:05:39,680
Finally, we need to add some space between two buttons.
80

81
00:05:39,690 --> 00:05:40,820
What do you think we should use,
81

82
00:05:40,860 --> 00:05:42,530
margins or padding?
82

83
00:05:42,600 --> 00:05:43,230
Trick question.
83

84
00:05:43,230 --> 00:05:48,530
We can't use padding. Padding only adds space inside a box. Measure the space in Figma.
84

85
00:05:48,930 --> 00:05:55,200
We use 30-pixel space, so we need to add 30-pixel left margin on the ghost button. Or the 30 pixel right
85

86
00:05:55,200 --> 00:05:57,600
margin on the first button.
86

87
00:05:57,600 --> 00:05:58,070
All right.
87

88
00:05:58,080 --> 00:05:59,270
Things are looking neat.
88

89
00:05:59,280 --> 00:06:05,430
So to recap. In this lesson, we learned how to use CSS classes. Which in Webflow is managed through the styles
89

90
00:06:05,430 --> 00:06:06,050
panel.
90

91
00:06:06,090 --> 00:06:11,850
We learned how to create new classes, how Webflow automatically creates classes for us and how to duplicate
91

92
00:06:11,850 --> 00:06:15,440
classes, so we can reuse existing elements on our page.