1
00:00:00,810 --> 00:00:02,220
Let's now work on this button.

2
00:00:02,520 --> 00:00:05,040
So for the button, let's add here a design.

3
00:00:05,040 --> 00:00:08,460
So I'm going to add the design of the button right here.

4
00:00:09,330 --> 00:00:15,960
Here I'm going to say button because they want the design to be the same for all buttons that I have.

5
00:00:16,590 --> 00:00:18,560
But I'm going to change later on.

6
00:00:18,750 --> 00:00:23,760
I might change some designs of some colors by basically most color.

7
00:00:23,910 --> 00:00:26,510
Most buttons will have the same exact I'm using.

8
00:00:26,910 --> 00:00:33,000
Therefore I'm going to say here font size and then point eight already am for the font size of the money

9
00:00:33,450 --> 00:00:35,760
for the font weight, I'm going to increase the font weight.

10
00:00:36,210 --> 00:00:38,010
So the font width is going to be 900.

11
00:00:39,510 --> 00:00:42,900
For the outline, I'm going to remove the outline.

12
00:00:43,410 --> 00:00:46,920
So the outline is going to be on the border as well.

13
00:00:46,930 --> 00:00:48,480
I'm going to remove all borders.

14
00:00:48,520 --> 00:00:49,910
I'm going to say border none.

15
00:00:50,040 --> 00:00:51,180
We don't need any border.

16
00:00:53,040 --> 00:00:54,930
I'm going to also change the background color.

17
00:00:55,260 --> 00:01:05,790
So for the background color back around color for the background color, I'm going to use this color,

18
00:01:05,790 --> 00:01:09,240
which is a degree of the black color.

19
00:01:12,170 --> 00:01:15,760
Next, I'm going to add I'm going to change the color of the text itself.

20
00:01:15,770 --> 00:01:18,290
So for the text, I'm going to use the.

21
00:01:19,490 --> 00:01:20,690
Ali's blue color.

22
00:01:23,300 --> 00:01:31,190
I'm going to add batting and and I'm going to change the text to two uppercase.

23
00:01:31,190 --> 00:01:39,260
So for the batting I'm going to add adding top and bottom 13 when I was right and left 30 and right

24
00:01:39,260 --> 00:01:46,940
next transform is going to be uppercase so that all letters will be displayed in uppercase.

25
00:01:48,170 --> 00:01:51,740
The cursor cursor is going to be pointer.

26
00:01:52,280 --> 00:01:53,810
And finally, the transition.

27
00:01:55,010 --> 00:02:00,800
So this transition again, the transition is the amount of time you need in order for the for the parent

28
00:02:00,800 --> 00:02:04,190
to be completely displayed on the screen.

29
00:02:04,580 --> 00:02:12,620
So it takes, let's say, 5 seconds, point 5 seconds is, which means that it's going to happen within

30
00:02:13,010 --> 00:02:14,060
half of a second.

31
00:02:14,180 --> 00:02:15,440
Let me show you that now.

32
00:02:15,440 --> 00:02:16,850
What's going to happen if I refresh?

33
00:02:17,480 --> 00:02:21,050
As you can see, this is the button and this is how it's going to look like.

34
00:02:21,860 --> 00:02:24,080
So the transition happens super fast.

35
00:02:24,080 --> 00:02:29,480
You will not you will probably not notice this because it's it happens super fast.

36
00:02:29,840 --> 00:02:31,580
So this is going to be the reason for your button.

37
00:02:32,240 --> 00:02:34,880
However, I'm going to add a hover effect to the button.

38
00:02:35,300 --> 00:02:38,960
So I'm going to say here button and then I'm going to say hover.

39
00:02:39,350 --> 00:02:43,250
So if I hover over a button, I want to change its color.

40
00:02:43,640 --> 00:02:48,080
So if I hover over, they don't I want the color to go orange.

41
00:02:48,080 --> 00:02:50,420
I'm going to say coral or orange.

42
00:02:50,420 --> 00:02:51,320
I'm going to say coral.

43
00:02:52,280 --> 00:02:53,510
Now, if I refresh.

44
00:02:55,690 --> 00:03:01,630
As you can see, the color will be orange or you can change the background color itself.

45
00:03:02,140 --> 00:03:06,070
So instead of changing the color, I'm going to name background color.

46
00:03:07,490 --> 00:03:12,400
Now the background color is going to be, as you can see, it's going to be orange.

47
00:03:12,430 --> 00:03:13,360
I think this is better.

48
00:03:14,290 --> 00:03:15,610
I think this looks better.

49
00:03:17,410 --> 00:03:23,560
The next thing that I'm going to be working on is the year.

50
00:03:23,590 --> 00:03:25,750
Remember, I added the font.

51
00:03:26,170 --> 00:03:31,750
I just one wanted to show you that this font depends up on your design.

52
00:03:31,750 --> 00:03:35,320
If you want to use less pop ins like me, you can do this.

53
00:03:35,560 --> 00:03:37,330
But if you don't, you can remove this.

54
00:03:37,720 --> 00:03:41,800
And if you remove this, the design is going to be different.

55
00:03:42,650 --> 00:03:45,280
As you can see, the the texts are going to be different.

56
00:03:46,720 --> 00:03:48,570
But I prefer to use this.

57
00:03:48,580 --> 00:03:49,840
I like this Poppins.

58
00:03:50,500 --> 00:03:55,500
It looks it gives the the design of the text a better look.

59
00:03:55,510 --> 00:03:56,770
I think it looks better.

60
00:03:57,310 --> 00:03:58,840
So the again, the.

61
00:04:00,200 --> 00:04:03,200
The font that you are using can be different.

62
00:04:03,230 --> 00:04:04,580
It doesn't have to be this one.

63
00:04:05,060 --> 00:04:07,280
There are so many fonts given by Google.

64
00:04:07,650 --> 00:04:11,150
You can use one of them or you can use some one.

65
00:04:11,150 --> 00:04:12,260
From the built in.

66
00:04:13,160 --> 00:04:14,180
From the built in.

67
00:04:17,120 --> 00:04:20,300
For families, for example, here we have an impact.

68
00:04:21,020 --> 00:04:23,330
Let me show you what the impact is going to look like.

69
00:04:24,170 --> 00:04:26,690
So the impact would like wouldn't look like this.

70
00:04:27,410 --> 00:04:29,660
So you can choose your font family.

71
00:04:29,660 --> 00:04:36,710
If you if you don't want to use the pop N's like me, you can change that and use another one.