1
00:00:02,230 --> 00:00:04,350
So we worked on all these inputs,

2
00:00:04,360 --> 00:00:06,550
let's work on the button

3
00:00:06,760 --> 00:00:12,340
now. Now the button actually is something we styled before because that's clearly not the default browser

4
00:00:12,340 --> 00:00:13,260
style.

5
00:00:13,300 --> 00:00:17,290
We have a button style in our shared.css file, there

6
00:00:17,380 --> 00:00:22,440
if you scroll down, you find the button styles at the bottom of the file,

7
00:00:22,450 --> 00:00:24,390
here is how we style the button.

8
00:00:24,580 --> 00:00:29,500
In the end, one important thing you learned there already is that font inherit thing because the button,

9
00:00:29,500 --> 00:00:36,010
just like the other form elements, has some browser defaults which actually overwrite your default fonts set

10
00:00:36,010 --> 00:00:37,410
up for your entire page,

11
00:00:37,420 --> 00:00:40,290
font inherit makes sure you're inheriting again.

12
00:00:40,550 --> 00:00:45,170
You also saw there that you can basically style all the things you always style:

13
00:00:45,170 --> 00:00:49,820
background, border, text color, paddings, stuff like that.

14
00:00:49,960 --> 00:00:55,170
You also saw the pseudo classes; hover and active, as well as focus and the outline we used there.

15
00:00:55,190 --> 00:01:02,260
Now one thing I want to show here too is how you can style the disabled state of the button.

16
00:01:03,170 --> 00:01:10,820
In a real web project, it's not that uncommon for the button to be disabled, until the form as a whole

17
00:01:10,970 --> 00:01:12,460
is treated as valid.

18
00:01:12,660 --> 00:01:16,780
Now important note; to switch this button from disabled to enabled,

19
00:01:16,910 --> 00:01:22,310
so to remove that disabled attribute, you need Javascript again because that is something that needs

20
00:01:22,310 --> 00:01:23,860
to change during runtime,

21
00:01:23,870 --> 00:01:25,980
this is only possible with Javascript.

22
00:01:26,090 --> 00:01:31,460
So here, we'll again hardcode it in there so that we can see these different styles.

23
00:01:31,460 --> 00:01:37,880
Let's go back to the shared.css file and for that button, I'll use the button class selector and add

24
00:01:38,300 --> 00:01:40,440
the disabled attribute selector.

25
00:01:40,460 --> 00:01:48,540
Now this syntax here simply means target any element with the button class that also has a disabled attribute.

26
00:01:48,590 --> 00:01:54,230
If I would put a blank in between, this would target all elements with disabled that are nested inside

27
00:01:54,230 --> 00:01:54,960
of a button,

28
00:01:55,110 --> 00:01:58,350
of course we have none of such here in our web app.

29
00:01:58,790 --> 00:02:01,900
So with that, we can set up a disabled style

30
00:02:02,120 --> 00:02:07,460
and typically, you want to give the user some idea about that this button is not clickable,

31
00:02:07,490 --> 00:02:11,810
for example you could set the cursor to not allowed,

32
00:02:11,870 --> 00:02:17,480
this automatically changes the mouse cursor and gives a clear feedback that this is not clickable.

33
00:02:17,480 --> 00:02:28,950
You could also set the border to some grey color, maybe a little bit darker than that though, this maybe,

34
00:02:28,950 --> 00:02:36,300
give it a background of grey then and also a text color of maybe this dark grey

35
00:02:36,300 --> 00:02:42,090
again. With this style, if we save that and note that our button has the disabled attribute now,

36
00:02:42,090 --> 00:02:46,290
if I reload, this clearly does not look clickable,

37
00:02:46,320 --> 00:02:53,280
we got no hover effect and you also note that my mouse cursor here changed. By the way, we got no hover

38
00:02:53,280 --> 00:02:59,990
effect only because all the styles we change in hover are overwritten by our disabled style here.

39
00:03:00,300 --> 00:03:05,010
So if you got more styles here set up for hovering, you might want to overwrite them here,

40
00:03:05,010 --> 00:03:12,330
just as a side note. If we remove the disabled attribute in our HTML code, we'll go back from that

41
00:03:12,330 --> 00:03:15,150
disabled style to the old enabled style

42
00:03:15,180 --> 00:03:20,540
and again, this transition is typically something you would do with the help of Javascript.

43
00:03:20,610 --> 00:03:22,710
That's it for this module,

44
00:03:22,710 --> 00:03:24,700
this is our form style

45
00:03:24,720 --> 00:03:31,200
and this hopefully gave you some ideas about how you can approach the styling of inputs, of forms as

46
00:03:31,200 --> 00:03:33,730
a whole, structure them in the way you want.

47
00:03:33,930 --> 00:03:37,640
We'll revisit this later when we learn about CSS grid

48
00:03:37,830 --> 00:03:39,930
but for now, this is where we'll finish.