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