Hello, in this ionic programming video, we're going to look at the button CSS component, pretty self explanatory, this CSS classes that allow you to do some really cool styling for buttons. So let's just get down to it. So what I've done here is already put in a comment, the different button classes that you can use, we're going to show you how to use them, but we probably won't be doing all of them. As a result, we want you to actually do yourself experiment. That's always the best way of learning. So first, let's create a simple button to do that.

Turn this class of button and then inside here, it's gonna have the text. But save that now let's build our project. Okie dokie. So, ROM Doom is just running it in an iOS simulator, you can open it up as a web page, you can run it on Android, however you feel. Okay, as you see we've got a button right there. It's a very basic button so there's not much to it.

So let's actually create a nother button, copy and paste that. And for this one, we're gonna add one of the button classes. So you have the regular button class and then you have one of the additional styling classes. So I'm going to pour I fancy doing gutter, dash positive plug in very positive today. oopsy Daisy almost got to build the project. Then let's run it again and let's see our button with a class.

There you go. We now have our button right there. What I'm going to do is actually put it on a separate line like so. We run this do please. So let's go back to Xcode. run this again.

There you go. We got our button right there. What you can also do is add a class called flutter dash. You know what, I'm going to copy and paste the fake into the difference between this and the button. Another variety of different classes they can use to store your button. So if you have distinct classes, you can also have a class Bottom block, which makes your button 100% of its parents with.

So let's save that. And I'm just gonna put in here. Save the build the project, reran it in the simulator. There you go we have our 100% but so the next thing we're going to show you is what if you want to do a full width block button. So ignore any padding. You can do that simply by putting full and instead of block you need to put button dash full save that project, we run our application.

There you go, there is a slight difference because it has no curvature. And obviously, if let's say this particular one right here was in other elements, which had wrong padding, it would look a lot different. So and actually recommend doing that in this and it's on element point in this insert element, which has a bit of padding, and to see the difference. So the next thing we're going to look at is the different sizing of buttons. For that, we're going to actually just copy and paste this button right here. Actually, I'm just going to get this one.

Paste it twice. And I call this small on call this large. So I'm pretty sure you can guess the class required to attend small, large save that build our project. And if you don't have classes, the button essentially medium sois or less. We run project. They give you a small button and like button and we compared this to this button right here, which doesn't have any sizing class.

You can see that this would go right in between these two in terms of size. The next class we're going to look at is outline buttons, which allow us to have a hollow button with just a simple outline. I'm going to copy and paste this. Don't need the button dash large we need button dash out mine. I'm also on chain button dash positive just to vary it up a little bit. So I'm going to royal paste that right here.

I'm going to call this outcome wind save this build our project No, that's just one project. Okey dokey. As you can see, we have the outline button as well. So we just have simply put up the outline and also for go back to the simulator As you can see, the text color is the same as the outline instead of it being white, like the buttons. So the next button we're going to look at the clear button, which has no border and has no background whatsoever. So let's just copy and paste this butter and chain button dish outline to bottom dash clear color.

And inside here I'm going to change the styling again, just to vary a little bit. We run this project, I mean we build it, we run it. Now, this project in our simulator as you can see, we have a button and we can click on it coding So the next topic we're gonna look at is an icon button which has text and an icon. And with this, you can essentially use any of Simply put, you can mix and match these as you would logically. So if let's say you wanted to do a, an outline button and you wanted it to be small, you could just put the button that's more class as well thing with the clear and that's the same with the icon button so you can mix and match it with an outline button, a clear button, small button, etc, etc. So, I'm going to copy and paste what we're going to copy and paste this one right here.

And what we're going to do is just get rid of all automatically change the style into call to go through the different classes like this. Right, so I'm just going to put the home button. So I'm just going to put it on dash left. And this is just going to range the icon to the left. If you want it to the right, simply change left to right. Very simple.

Ion dash home. So this is the home icon. You want to know that more of the icons in ionic. If you just Google ionic icons, you'll get a bunch of different classes and previews of what you can use in something in here, oh, my calm, put Kali icon. Save this filled out project again. One project again in our simulator As you can see, we have a button with an icon in it, which is really cool because it just helps the user experience become a lot better.

Next button we're going to look at is buttons within headers. So we're going to quickly just create a header. We've already covered headers in a previous video. So check that out for more information. So class, dash header and button. Class going to put icon so this is going to be an icon as well.

You don't need to put the position in for this function. There isn't going to be text in here. I'm going to put it on what icon should I have I fancy pointing these seconds That's usually quite common in headers. So close that off. And now just do h1 tag. Yeah big class of title.

I taught for young to add another button so you can see how to use it for the plus button again and inside. I want to be oriented to the left and want to be oriented oriented to the right temperature. You can guess which one is which affect this build our project. Will you run it in our simulator There we go, we have a header. And we have the buttons themselves, which is really, really cool. As you can probably hopefully notice some sort of like border around it, you can easily make them clear by simply just put in.

Let me show you what you need to do to put a clear button. So if we go to bar dash header, instead of icon, you put button dash icon and button dash clear, very simple. I'll actually leave that as an extra test for you guys. And the final thing I'm gonna show you for button is bottom bar, which is essentially multiple buttons grouped together. So div class of button. Call In here, I'm gonna put an anchor tag very last term first copy and paste a few times second chain the fourth chain and I'm actually going to put some styling as well so I'm going to turn dash.

Which one should we use the last one? Let's use energize CLI we are quite energized now. Because we know a lot about button. 40 Yeah, say bit run, filled out our application. rerun it in our simulator. There we go.

We have a button. Well for different the moment that was a little awkward, so there you go, we have a really cool cool button that Well, I mean, a set of buttons. And it is that simple to create this really cool but mixing my words Yeah, it's that simple to use button classes and ionic CSS components. If you have any questions, feel free to actually just messed up one thing. Go back to the first show, you know, styling applied. And that's just not meant to be but it isn't like it's a bye bye dashing.

Enjoy.