All language subtitles for 18. Using Buttons

Here we are at the code editor and back with my split screen so that we can watch our changes and we're

going to be adding the orange estimate button up in the top right corner of our header if you don't

remember exactly what that looks like.

Go ahead and take a look at the design file real quick.

But we're just going to jump on into it.

We'll start by coming up to the top and underneath our tab we're going to import the button from ad

material.

Dash UI sized core slash button.

Next we're going to come down and underneath our tabs but inside of the toolbar we are going to place

the button that we just imported so let's create a button and we'll open it up like this.

And inside we know we want the text free estimate just like that if we go ahead and save this and make

sure your development server is still running.

And I think mine is but I need to go ahead and refresh the page and yup.

Now you can see we have a text button that says Free Estimate.

Now we know that we don't just want this basic text.

So if you remember we can go ahead and set the variant property on our button and the orange button

that we want to create has an orange fill.

So that means we're going to want to use the contained variant.

If we go ahead and save that you can see the page refresh.

And now we've got the gray fill in the drop shadow around our button.

We definitely don't want it to be that gray color though.

And so if we add a color property and we can actually set that to the secondary color because in the

theme we have already set up our primary and secondary colors which will give us this orange.

So if we go ahead and save the file we see that our button is now updated with our secondary orange

color.

You can see how easy a lot of this stuff starts to become when you properly set up and use the systems

that material UI provides to you.

We have our basic styles set in so now we're going to further customize the button by giving it a class

name equal to classes dot button.

We're just going to give it the button name and then up here in our styles object we're going to create

our button style the first thing that I want to change about the button is I actually want those corners

to be a lot more rounded.

You can see in the design file there.

I actually have it as a completely elliptical button and so we're going to round those corners completely

out using a border radius of 50 pixels if we go ahead and save that then we'll see the page update.

And now we've got those perfectly rounded asides here like I was wanting the next problem for the button

is the fact that you see it's sitting all the way against this right edge and it's scooted pretty close

up to the Contact Us tab as well.

And I kind of just want to give it a little more spacing on both of those sides.

So let's give it a margin left of.

Also 50 pixels and a margin right.

Right.

Of just 25 pixels.

If we go ahead and save that you'll see that gives us a nice looking spaced out even header.

This is really coming along now and starting to look almost exactly like the header in the design file

and we can finish it up by fixing that font inside of the button.

First we want to give it a font family of Pacific Co.

And that's one of the fonts that we added to the Google font style sheet link when we also added real

way for the tabs.

So we already have access to Pacifica so we can specify that.

And I also already know that I want a font size of one rim.

Again let's save that to see where we are.

And you can see that looks pretty weird honestly.

It doesn't definitely not work how we want it to and that's being caused by some of the default styling

applied to the text within a button and to get rid of that.

We're going to also give the button a text transform trans form of none.

So if we save that now we've got a much more normal looking button.

All right now let's flatten the button up a little bit and give it a height of 45 pixels and save that.

And then you'll see it just gets a bit thicker around the top edges and bottom edges which I feel I

give you a little bit more of a clickable feel.

And lastly let's go ahead and change that font color to white.

Now if you go ahead and compare to the design vile you will see we have perfectly and identically copied

over and created in code the exact header that we set out to design this header looks really great.

And it really went above and beyond any of the defaults and presets and it showed you how you can really

really take control of a material UI components to create the perfectly crafted design that you have

envisioned.

We're gonna do one real quick last thing here before we go and we're going to go ahead and take some

of these styles out of the button again and just move them up to the theme so that we can reuse them

later on in our application.

We'll take the text transform the font size and the font family.

Go ahead and cut those and then we'll head over to the theme dot J.S. file and here under typography

we're going to underneath the tab object create a another object and call this estimate and open that

up and then we're going to paste those styles along with a color of white because we didn't end up grabbing

that from the last one.

So we'll go ahead and save that save our theme and then we'll come back to the header and we can get

rid of the color white down there which we just specified and then we'll get rid of this extra lime.

And now we can extend the theme dots typography dot estimate and now we should be able to save.

And we will still have all of these styles for our estimate button.

I hope that you guys are really proud of yourselves for getting to this point already because we really

have already made a great start to creating our full scale production application and it's really off

to a great looking start.

So let's go ahead and continue with this and start adding some functionality to our great looking design

in the next video.