Let's now add our second button. To save time on styling, 1
we can duplicate our existing white button. 2
You can right-click and then duplicate. Or use a Control+C, 3
Control+V, a regular shortcut. Or Command+C, Command+V for the Mac. 4
When you do this, 2 funny things will happen that you don't expect. First, instead of pasting it underneath, 5
like most other elements behave, 6
it is placed next to it. 7
This behaviour is happening because of a default display style that is applied to buttons. 8
We'll cover this in a upcoming lesson. In this lesson, we're going to cover the second funny behavior. 9
When we try to make any edits to our second button. 10
everything is being applied to the original button. 11
This is not a bug. 12
On the contrary, it is probably the most powerful feature of CSS and one of the reasons why CSS was created 13
in the first place. This feature is called Class. 14
We can have this button on 100 different places on our website, and by changing one instance, we can change 15
every button with the same Class. Inside Webflow 16
This class is managed from here. A place called Selector. Selector means what it says, it selects a specific 17
Class. 18
There are other things we can select besides classes, like a Tag, but more about that later. When we need 19
it. 20
The blue square saying "Button", is our class. 21
If you select the original button, you will see that it has the same class. 22
This is why the same CSS properties apply to both. 23
But if we remove this class from the button, then we're going to lose all the changes that we made to 24
it. And go back to the default settings or default properties. 25
But don't worry, we can select the class back again and instantly all the properties will come back. When 26
you are looking for an existing class, just start typing and Webflow will filter the search results. 27
If the class already exists, then you'll it here and you can select it. 28
If it doesn't exist then you can create a new class yourself and name it whatever you want. 29
Applying newly created class will do nothing to our button. Because that class has no CSS properties 30
applied to them. On a newly created class 31
we can apply new styles and it won't affect the original button. 32
Classes are removable and can be applied to anything. 33
For example, we take "my pretty button" class and apply to the original button. 34
Classes can also be duplicated or renamed. 35
You can do that from this tiny dropdown. 36
Just rename and hit enter. Duplicating a class is a good way to save time. 37
Our ghost button has a lot of same properties as our primary button. So we can duplicate those properties 38
and create a new class from it. 39
And now we can name it whatever we want. 40
We have two buttons with the same properties but different classes. 41
So when we edit one, the changes won't affect the other. Inside CSS we can see how these classes are presented. 42
It starts with a period followed by a name we wrote. Webflow will generate code in lowercase 43
letters regardless of the way you write it inside the designer. 44
So you can use uppercase if you like. Spaces are not accepted in an actual CSS class naming, but inside 45
Webflow you can use them. Webflow will then change that space into dashes. 46
For any change we need to make to the element, we have to give it a class. 47
We haven't been doing this so far because Webflow actually does it automatically for us. If you select 48
any element that we have already edited, you'll see it has some sort of class applied to it. 49
If you drop a new element, they don't. 50
The selector is empty. 51
The moment you style an element, Webflow will automatically generate a class name for us. 52
You cannot style an element without having a class applied to it. When you look at the navigator, you'll 53
see that elements are named according to their classes. 54
Let's change the name of our Div Block that holds all our content. Let's call it a container because that's 55
what it does. 56
We have applied very specific rules to this container - making it center in the middle, not stretching 57
more than 1160 pixels and so on. 58
This is a very useful container and we will reuse it elsewhere on our page. And let's do the same 59
thing with the blue box. Our blue box is, in reality, is a hero section that holds everything inside this 60
section, so let's give it some respect and name it a more appropriate name, like hero section. 61
All right. 62
Back to our ghost button. Now that we have a different class, we can style it as we want. Ghost button 63
is made of same material, but the background field is transparent and instead it has borders. 64
We can change this in a similar way as we did in Figma. Under background, 65
open up the color picker and select the first value, which is transparent. 66
You can also do this by decreasing the opacity slider. Same result. It has completely ghosted out of the page, 67
but text is still there. 68
It's invisible because it's the same color as our background. 69
Let's change the text to white. 70
And now let's add borders. 71
This we can do directly under Border section. 72
It says 0 pixels. If we increase it to 1 pixel, the border will show and then we can change color to 73
white. 74
Looks complicated in the beginning, but it's quite simple. Style shows what sort of border we want to 75
use, 76
solid line, dashes or dots. And those squares show on which side are we adding the border. 77
Right now, the middle square is selected, which means we are adding all 4 sides. 78
If we select the top square, we can edit the top border only. 79
Finally, we need to add some space between two buttons. 80
What do you think we should use, 81
margins or padding? 82
Trick question. 83
We can't use padding. Padding only adds space inside a box. Measure the space in Figma. 84
We use 30-pixel space, so we need to add 30-pixel left margin on the ghost button. Or the 30 pixel right 85
margin on the first button. 86
All right. 87
Things are looking neat. 88
So to recap. In this lesson, we learned how to use CSS classes. Which in Webflow is managed through the styles 89
panel. 90
We learned how to create new classes, how Webflow automatically creates classes for us and how to duplicate 91
classes, so we can reuse existing elements on our page.