FREELessons: 8Length: 45 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Buttons

In this lesson, you will learn how to create a few different variations of buttons using Materialize classes and icons.

Useful Links

2.5 Buttons

Hello, and welcome back. In this lesson, we're gonna talk about buttons in materialize. As you can see here on the screen, I've created a button and an anchor tag, a link. And what we see here is just the default look of buttons and links, nothing too exciting. But if we apply a little bit of materialized market to it, it's gonna look a lot better. So you can find the URL for our starting pin here and your course notes for this lesson. Once you open that up, go ahead and click on fork create a new copy of it and we'll get started. So really what we're gonna focus on here is buttons, but I want you to note that you can add these button classes to either a button or an anchor tag it doesn't matter which. And so I've included examples of both here. For our anchor just for the sake of keeping things clean I'm gonna get rid of the href attribute there and let's get started. So for our first button here let's just give it a class, Of btn. And when we do that, it already makes this button look a lot better. It has a nice little hover effect, it's a different color, it's larger, the text looks nicer, and there's a nice little drop shadow behind it. Well we can add this same class to our anchor tag to make it look identical to the first one. We can also add other classes to it, such as btn-large. And that will give us a little bit more padding inside the button. We can also add a few color classes to our button for example. We could turn it orange by giving it the class of orange and there we go. We've also pointed earlier to if we go back to the CSS link and click on color on the materialized website, we can see a number of different color classes that we can use here. So if we scroll down to the orange section, we can see that here. But notice you can also use orange darken-1, darken-2, darken-3, etc to make it darker or lighten to make it lighter. And there's also a few accent classes as well. So, this might be a very useful page for you to get familiar with because there are a lot of different color options there for you. But for example we can just do in orange dark-1 and that will just darken our button up a little bit. So let's take a look at some other options that we have for buttons. And I'm putting these in paragraphs here for no other reason than just to space them out a little bit on the screen so that they're easy to see. So I'm gonna create another paragraph here and, inside this paragraph, I'm gonna create what's called a floating button. So we're gonna create another button element. Actually, it's just using anchor tags since it's easier to type. And we're gonna give this a class of btn-floating. So we'll go and hit Tab there and inside here I'll just type, Button 3, and we'll see that we don't actually have a lot of room for that text here, in fact we don't have room for the text. But these floating buttons are actually meant for something else, so I'll show you what that is. Now in Materialize we also have access to certain icons. But in order to use these icons, we have to import the icons. If we go over to our settings here and jump over to our CSS, we need to add some material icons here and the way we do that is we can just jump back over to the Materialize website. Go to the Getting started link, and scroll down a little bit. And here where we have, under HTML Setup, you'll notice that there is a link, and this probably shows up somewhere else, too. But we have this link for this Google icon that contains these material icons in it. All we need for the purposes of CodePen is the URL itself. So we're gonna grab that URL, copy it, jump back over into CodePen, and then underneath our materialize CSS we'll just paste it here, so now we have access to those material icons. So the way we use these icons, and we're gonna use it inside this floating button here and you can see this floating button is just a circle and this works really great with icons. The way these icons work is we simply create an i element. And we give it a class of material icons, material-icons, and when we do that it's going to look at the text inside this i element. And this text is, basically, a tag that tells our browser which element to use. And we can jump back over to the Material website, and go to the CSS link. Maybe it's under components. Yeah, under components, you'll see a section for icons. And, when you click on that and scroll down, and here's another place where you can find that link. But, if we scroll down, we can see a list of icons and the tags for those icons. So if we were to give a thumb up or if we were to put the text thumb up inside our button or inside that eye element, then it would give us that icon. So let's just copy that, jump back over to CodePen and paste that there. And you'll see we now have a thumb up icon inside our button. Now again, I'm just gonna get rid of this href here, just for the sake of keeping our HTML a little bit more concise. And keep in mind, we can also add other classes to this. So we could add, for example, btn-large to this one as well, in order to make that button a little bit larger. And we can also add a color here. So let's say we want this one to be blue, We could do that. So now I'm just gonna copy some HTML that I have for button and this is gonna be very similar to the one that we just created. But you'll see that we have another class here called waves-effect. This waves-effect class gives us a really cool effect whenever we click on the button. So if we click on this you'll see that we have this circle that kind of grows out from wherever we click. So that gives us a really cool click effect in addition to everything else that we see there on the button. Now, there's one more type of button that I want to show you and it's called a fixed action button, and it has a little bit more in the way of mark ups. So, I'm just gonna copy and paste it as well. So, let's skip a couple lines here to give us a little room and we'll paste that. And we might need to stretch it out in order to see it all. But here we have a div with a class of fixed action button. Inside that div, we actually have a floating button. And that floating button has an icon in it and that icon has a tag of mode_edit. And we can see in the bottom right hand corner that gives it a pencil icon. But just underneath that, we have this unordered list with three more floating buttons in it, and they all have their own icons. Well, by default when you create this fixed action button. This un-ordered list is not going to appear, we're gonna be able to see it. But, when we hover over this first button that we created inside that fixed action button div, you'll see what happens. The other three buttons appear and we can hover over and click on those other three buttons. So it's a really cool effect that you're able to accomplish with just a little bit of HTML Markup. Now we can add another class to this, if we want this to show up horizontally, right now it's showing up vertically above our button. But if we were to change this to horizontal, and then hover it, you'll see that it expands out to the side. And right now this is happening on hover. We can also create this so that it happens only when we click on it, by adding another class called the click-to-toggle. And now when we hover over it, it doesn't do anything but when we click on it, we see those buttons appear. And we can click on it again to make them disappear. So those are just a few options you have for creating buttons in Materialize. Again, you can jump over to the Materialize documentation and find a lot more that you can do with your buttons, including creating drop downs and things like that. So thank you for watching, and I'll see you in the next lesson.

Back to the top