Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Buttons in Bootstrap
0:03 All users know how to click buttons.
0:05 It's one of the primary ways to work with user interfaces,
0:08 there is even great cartoon episodes about the inability
0:11 to avoid clicking the big shiny red button.
0:14 We can use buttons in our websites to help drive user engagement and user action,
0:19 so here is Wistia, they are video hosting company,
0:22 I don't use them, I just think they have a good sign up registration page,
0:25 so I am using it as an example.
0:27 You can see it's easy to see where your name, and your email and whatnot go,
0:31 they are also using the same technique that I recommended,
0:33 actually using the placeholders rather than the separate labels that apply
0:38 to the areas where you type in your text.
0:41 But notice, down here at the bottom, it's very clear what they want you to do.
0:45 They want you to click "create account" and if you look at this in HTML,
0:49 this is actually a button type="submit", it comes from a form.
0:54 Up here, we also have something that looks like a button,
0:57 and this is just a hyperlink to go log in.
1:00 So, the concept of a button doesn't have to tie to the HTML thing - the "button",
1:04 more correctly, it should tie to some kind of user action.
1:07 Sometimes that's submitting the form, sometimes that's going somewhere.
1:13 So, let's take a quick look at Talk Python Training,
1:16 and the use of buttons on the landing page or the homepage, here.
1:20 So, if we scroll down a little bit, you can see the first call to action is...
1:25 I would like for people to subscribe to be notified about new classes,
1:28 ideally, what I would really like, from a customer retention perspective
1:33 is to get somebody to register, it's a little bit stronger commitment to the site,
1:37 to actually create account with the plans of coming back and engaging with it over time.
1:43 But, if they don't want to go straight to register or just straight to one of the classes,
1:47 getting people to just give me their email address
1:51 so I can send them newsletters and announcements
1:53 about upcoming classes and deals and things like that,
1:56 that's really important to the website and to the business.
1:58 And so, I've used a button here to ask people to fill out their email address
2:03 it's like email@example.com, click that and they will be subscribed.
2:10 The other place where I am using buttons on the landing page,
2:13 so if you come down, is here.
2:15 So another great way to keep people engaged with
2:18 my community and my content, is through the podcast.
2:22 And of course the podcast is free, but if people subscribe to the podcast,
2:25 they continue to hear the message about updates to my courses,
2:29 and I think they just generally get inspired a little to learn Python
2:32 and they know that I have courses, right,
2:35 hopefully that that somehow comes back together.
2:37 At least if they just subscribe to the podcast and never came back here, that would make me happy.
2:41 Down here you can see another call to action, now, just like in the Wistia example,
2:45 up here, this is actually a button, if we look at the HTML you'll see that it's a button,
2:51 but down here, this is just a hyperlink that actually opens in a new tab
2:55 over to Talk Python To Me.
2:57 So, let's look behind the scenes how that works.
3:01 So you'll see that buttons are easy in Bootstrap.
3:03 Here is that subscribed form, and I've styled it so it's a nice tight little thing here,
3:09 if we look at the HTML, you can see we've got a form,
3:12 with an "input type=" HTML, required, all that kind of stuff.
3:16 But what's relevant for this discussion is we have a button,
3:19 it has a type="submit",
3:22 and then we're using the Bootstrap classes that say
3:25 "this thing should look like a Bootstrap button", the first Bootstrap class is btn,
3:29 and btn says "this is going to take on the general shape of a button",
3:34 and then, there are specializations,
3:37 you saw the "listen to an episode" looked different than this one that is red.
3:42 So then we can give it a various action class: danger, info, default, and so on,
3:48 and depending on the theme that you are using, those will take on different colors
3:52 and styles but you can classify them like that.
3:55 So I think red converts pretty well, it calls people's attention to it and they know OK,
3:59 I am going to go click this button, so I am using btn-danger,
4:02 which is why this one is red.
4:05 If we look farther down below, the call to action to go listen to the podcast,
4:09 here you can see this looks exactly the same, except for blue.
4:14 So let's look behind the scenes of this one.
4:17 Here we have a hyperlink, and Bootstrap can style buttons and hyperlinks
4:22 to look like these Bootstrap buttons,
4:25 like I said, there is these two basic usecases, right.
4:27 In this one, we have a hyperlink, again, class="btn
4:31 but we are using btn-primary, which is this blueish color rather than btn-danger.
4:37 Now there is actually six types of buttons,
4:41 here we have default, primary, success, info, warning, danger and link,
4:45 like I said, depending on the theme you use, this may, this will look different,
4:50 it's got a little bit of a 3D effect, the hover effect, all that comes from the theme,
4:54 so that may not look exactly like this but you have these categories to work with.
4:59 Then you also have four sizes, the top row,
5:03 from top to bottom is button large and the class for that is btn-lg,
5:08 and then you have just the ones that we have been working with,
5:11 the straight up buttons, normal size, and small and then extra small.
5:16 So be sure to use these buttons in your web design
5:18 any time you need a clear call to action.