1
00:00:01,290 --> 00:00:09,750
Hello, in this video, I am going to show you buttons so button, but it's something that you usually

2
00:00:09,750 --> 00:00:13,650
click on, but that's not really the point of this video to be had to click on button.

3
00:00:13,680 --> 00:00:16,080
Obviously, you can implement one functionality.

4
00:00:16,080 --> 00:00:22,140
You want link with some JavaScript Jaquie potentially back in, for example, whatever you want.

5
00:00:22,170 --> 00:00:30,570
This is the Front-End component that they put in that bootstrap provides a basic bottom will look like

6
00:00:30,570 --> 00:00:31,740
this and bootstrap.

7
00:00:33,210 --> 00:00:40,350
And let's say if you have a toy call button and it could have a toy also made, for example, it could

8
00:00:40,350 --> 00:00:42,840
be inside a form, that's fine.

9
00:00:42,840 --> 00:00:50,280
You know, you can wrap it up and, you know, do extra stuff as you want to and for it to be a booster,

10
00:00:50,280 --> 00:00:52,590
but need a couple of classes.

11
00:00:52,590 --> 00:00:56,190
You need BTM and then you need basically the theme class.

12
00:00:56,200 --> 00:01:01,380
So to success and are most of the ideas here.

13
00:01:01,390 --> 00:01:02,490
This is optional.

14
00:01:02,910 --> 00:01:07,920
We're going to be using this later in the video just to be able to detect clicking by jonquils.

15
00:01:07,980 --> 00:01:10,260
And that's a cool thing to know as well.

16
00:01:11,850 --> 00:01:15,200
Many things that we get this button.

17
00:01:15,450 --> 00:01:18,700
So it is green and it doesn't do anything like that.

18
00:01:18,720 --> 00:01:20,400
You can make into a submit button.

19
00:01:20,640 --> 00:01:26,700
You can actually make a Anketell into a button up, which we're going to be doing later in this video

20
00:01:26,850 --> 00:01:28,350
and link that however you want.

21
00:01:28,710 --> 00:01:31,400
So opt for the link to this page.

22
00:01:31,410 --> 00:01:33,160
We showed you all the button stuff.

23
00:01:33,200 --> 00:01:35,130
We're going to cover pretty much all of it now.

24
00:01:35,340 --> 00:01:40,530
But obviously, I won't be, you know, between all these different little, you know, themes, I'll

25
00:01:40,530 --> 00:01:45,150
just covered the success one and I'll use a few of that was just a variable.

26
00:01:45,270 --> 00:01:48,240
But you can see all the different ways of doing it.

27
00:01:49,170 --> 00:01:53,040
Another way of creating a button is to.

28
00:01:55,960 --> 00:02:04,090
Make an outline button that when you put the feme, but you play better and cloying dash and then the

29
00:02:04,090 --> 00:02:08,940
FIM type, so it could be primary, could be go, it could be success in this case.

30
00:02:09,190 --> 00:02:17,160
And I'm going to say I known, but apart from that, it's functionality is the same refreshed when I

31
00:02:17,170 --> 00:02:17,500
climb.

32
00:02:17,500 --> 00:02:24,240
But and no one we hover over it goes to the primary theme color, which in this case is green for success.

33
00:02:24,490 --> 00:02:28,140
And again, all of this is covered here.

34
00:02:29,230 --> 00:02:35,230
OK, so the next thing I want to show you is how to create a large.

35
00:02:36,340 --> 00:02:40,210
So to do a nod button or you do it could be any top button.

36
00:02:40,210 --> 00:02:45,990
It could be any female employee, not airplane could be an important an anchor button or stuff.

37
00:02:46,010 --> 00:02:51,940
I am going to show you it could be a button inside of like a button group, which is a separate video

38
00:02:51,940 --> 00:02:53,320
which I'll be doing as well.

39
00:02:53,410 --> 00:02:58,390
Whether you want or you do it here, you push button dash L.G..

40
00:02:58,720 --> 00:03:01,810
So for large and that's it.

41
00:03:03,250 --> 00:03:09,670
And I'll show you the other side while I'm doing Soyuzes need to get rid of this, I should only ever

42
00:03:09,670 --> 00:03:11,640
have one idea that's the same.

43
00:03:11,980 --> 00:03:14,780
Plus we have we don't need it.

44
00:03:15,550 --> 00:03:21,610
OK, so OK, we need one more copy again.

45
00:03:21,610 --> 00:03:29,250
Just because have removed something now and the other side is fine for small so the only two buttons

46
00:03:29,260 --> 00:03:30,340
are technically free.

47
00:03:30,340 --> 00:03:31,660
And I'll explain that in a second.

48
00:03:31,900 --> 00:03:37,900
The law is slightly bigger, small is slightly smaller, but the free side is large, small and the

49
00:03:37,900 --> 00:03:40,900
regular normal medium, whatever you want to call it.

50
00:03:41,740 --> 00:03:46,460
OK, so the next thing that I'm going to show you is a block level button.

51
00:03:46,720 --> 00:03:53,680
So, again, we can copy and paste this and we can keep the size, the size of the matter to remove

52
00:03:53,680 --> 00:03:55,450
it just for the purpose of this.

53
00:03:55,660 --> 00:04:03,160
And to put it bluntly, leave it just to show that the block level element and the size of small law

54
00:04:03,580 --> 00:04:08,540
can be used at the same time could block level sort of is so easy as well.

55
00:04:09,000 --> 00:04:12,870
They btm the block, not block

56
00:04:15,850 --> 00:04:18,460
level, but a refresh.

57
00:04:18,850 --> 00:04:19,510
That's what we get.

58
00:04:19,660 --> 00:04:26,790
So basically the actual button will fill the entire width of its parent container.

59
00:04:26,950 --> 00:04:32,480
In this case is this div which has which spans 12 columns.

60
00:04:32,710 --> 00:04:34,200
So yeah.

61
00:04:34,210 --> 00:04:35,520
So that's what it does.

62
00:04:35,540 --> 00:04:42,400
If I was to put it, for example, which is half the size, it now only spans that much if I go back

63
00:04:42,910 --> 00:04:49,270
and this will always span if parents full with you can see when you need resiling.

64
00:04:49,270 --> 00:04:56,590
So you'll see Bortolotti especially when he goes down to mobile sizes, you know, instead of having

65
00:04:56,590 --> 00:05:03,130
Lobatón the same line to make it easy to have one big button on a single block level button.

66
00:05:04,360 --> 00:05:06,160
And what about.

67
00:05:09,780 --> 00:05:20,100
OK, so next, I'm going to show you the disabled, but the work I'm gonna do is I'll get rid of Sois,

68
00:05:20,100 --> 00:05:22,530
then I'll get rid of Block again.

69
00:05:22,530 --> 00:05:24,090
You can use these most.

70
00:05:24,180 --> 00:05:25,430
I'm going to get rid of this.

71
00:05:25,440 --> 00:05:31,920
I'm actually going to try a different same color primer, just, you know, to vary it up a bit.

72
00:05:32,280 --> 00:05:34,320
And I'm going to put.

73
00:05:38,280 --> 00:05:41,750
Disabled, disabled, botten.

74
00:05:42,610 --> 00:05:49,250
And this is what we are going to do is not beat you and we'll beat him crime rates.

75
00:05:49,270 --> 00:05:54,690
We need a class of disabled as well.

76
00:05:55,240 --> 00:05:58,270
And we're also going to pay our TAB index

77
00:06:04,540 --> 00:06:05,130
right.

78
00:06:05,560 --> 00:06:06,970
Of negative one.

79
00:06:07,030 --> 00:06:08,760
I'll explain that in a second.

80
00:06:09,130 --> 00:06:13,620
I'm going to play a role of Bertelli to put these roles in well, for all the other.

81
00:06:13,960 --> 00:06:21,910
And so to recommend to an area disabled for, you know, for disability readers so they can detect,

82
00:06:22,150 --> 00:06:29,230
you know, basically the disabled or for poor area disabled and on patrol.

83
00:06:35,720 --> 00:06:36,350
Equals.

84
00:06:38,030 --> 00:06:38,370
Very

85
00:06:41,270 --> 00:06:42,080
true.

86
00:06:42,570 --> 00:06:46,040
And they save it refreshed.

87
00:06:46,070 --> 00:06:46,650
There we go.

88
00:06:46,850 --> 00:06:48,830
This is not clickable like the others.

89
00:06:48,830 --> 00:06:52,900
Like I said, they don't do anything because you can program them whatever you want, but they still

90
00:06:52,910 --> 00:06:54,280
have the functionality anymore.

91
00:06:54,340 --> 00:06:58,070
So it's a great way of having a decent bottom that have things.

92
00:06:58,070 --> 00:07:02,700
If I press tab selected a swarm, press it again because the next one's the next one.

93
00:07:02,760 --> 00:07:03,350
The next one.

94
00:07:03,500 --> 00:07:08,330
Unless you change the tab index or double click, click, click one more time, you would think it goes

95
00:07:08,330 --> 00:07:13,850
to the disable bottom, but it goes back to because no more elements.

96
00:07:13,850 --> 00:07:20,620
He goes to the you are out and then you go back onto the, you know, all the other buttons anyway to

97
00:07:20,630 --> 00:07:22,900
get back on the page skipped this.

98
00:07:23,300 --> 00:07:25,450
So that is great as well.

99
00:07:25,640 --> 00:07:28,720
The next thing I want to show you is an active button.

100
00:07:29,150 --> 00:07:31,490
So let me copy and paste this one.

101
00:07:33,580 --> 00:07:46,860
And the two button, I'm going to put a new theme of danger for a class of active online data, although

102
00:07:47,800 --> 00:07:53,720
you can use it for the other or depending on their functionality, if they're taken to it, know no

103
00:07:53,740 --> 00:08:02,500
page doesn't really need it on the autocomplete or this toggle and remote area.

104
00:08:03,460 --> 00:08:14,980
Pressed again, just for disability readers, are you going to be able to say this is an active talk

105
00:08:14,990 --> 00:08:18,980
about why refresh it is toggles.

106
00:08:19,000 --> 00:08:23,320
If I press it, it is now sort of going to lead to colorful press.

107
00:08:23,380 --> 00:08:32,120
Again, it's a dog collar, so it toggles on and off the benefit of this idea that we might be able

108
00:08:32,830 --> 00:08:34,310
for doing nighttime button.

109
00:08:35,200 --> 00:08:35,680
So.

110
00:08:36,610 --> 00:08:41,680
Because it's already togged, it's filled, if I press it, it's no longer filled in.

111
00:08:48,630 --> 00:08:53,460
There we are so that they toggle button, so in case you have some sort of feature on your website,

112
00:08:53,580 --> 00:08:54,800
I can toggle on and off.

113
00:08:54,870 --> 00:08:57,020
You could use this, for example.

114
00:08:57,150 --> 00:09:03,760
And it's a way of showcasing to the user that it's the you know, the toggle is on or it is off.

115
00:09:04,050 --> 00:09:09,960
The last thing that I really just want to show you is that we've just been doing this with buttons.

116
00:09:10,200 --> 00:09:16,040
But you could apply this sort of button, you know, bootstrap component to an eight page recipe.

117
00:09:16,050 --> 00:09:18,720
Well, that is more than doable.

118
00:09:18,960 --> 00:09:25,160
So on this Hasheem navigate to any page what you could do on a class.

119
00:09:26,130 --> 00:09:40,080
You just put BTM in between that danger, for example, whether you want a roll button link and the

120
00:09:40,080 --> 00:09:45,440
other one that we can have is an input class.

121
00:09:45,810 --> 00:09:48,540
Again, this is not a demo tutorial.

122
00:09:48,810 --> 00:09:52,670
And I do have an estimate for a series of feel free to check that out.

123
00:09:52,860 --> 00:09:57,780
If you're just showcasing that, you can apply to anything that you would conventionally sort of use

124
00:09:58,230 --> 00:10:01,350
as a sort of a button feature in HTML.

125
00:10:01,500 --> 00:10:07,890
You can apply your bottom component from bootstrap because there may be specific functionality from

126
00:10:07,890 --> 00:10:14,340
an input type, from a tag that you want, and you can still maintain that the type is going to turn.

127
00:10:14,340 --> 00:10:15,850
The tide could be submitted well.

128
00:10:16,050 --> 00:10:20,970
And I was telling you to value and put a button

129
00:10:23,580 --> 00:10:30,690
refresh video and they essentially like they look indistinguishable from the others, but they will

130
00:10:30,690 --> 00:10:36,810
have their own specific functionality, this being an ref, this being an input tag.

131
00:10:37,110 --> 00:10:37,750
So that's it.

132
00:10:37,770 --> 00:10:40,620
If you have any questions, feel free to drop me a message.

133
00:10:40,800 --> 00:10:47,070
There will be a link to the source code in the description along with Desco page and a few other useful

134
00:10:47,070 --> 00:10:47,900
links as well.

135
00:10:48,180 --> 00:10:50,850
And I look forward to seeing you in the next video.