Okay, so the next thing that I need to do, is that I wanna create a border, right?

Now what I want the border to be,

is that I want it to be the same color as the button, but slightly darker.

In Sass color functions, there's the Darken function.

So I can create my one pixel solid border.

But in, to create the color, I'm gonna use the darken function.

I'm gonna pass in a color, and then make it darker by 10%.

I can do the same thing with the text shadow.

[SOUND] Except I'm gonna do that by 20%.

So again using the blue that's being passed into it, and

then creating all of the other colors around it.

So if I were to, basically come up here and then say I want alert, I could pass

this in as a color, right, because this is an argument that can be consumed.

And so then now, I have this orangish, reddish button, right?

But then the highlights are, the border and then the shadow.

Are basically derivatives of that original color, not just black, 'kay?

So you can kinda makes it a little bit more realistic.

So if you remember from the previous example,

the first thing that there basically was some highlights around this thing.

There was a highlight across the top.

And then there was some shadows along, along the side okay?

So how we do this, is that I need to create a few more variables that we're

gonna pass into this thing right here.

Let's clean this up here.

And do this.

So then, here are my new variables.

So I need to create a highlight color.

And the highlight color I wanted to lighten by 50%,

so I want it to be that original color but just a little bit lighter by 50%.

Now, the shadow color is interesting cuz I'm gonna actually chain together,

two color functions at the same time.

So I want the transparent ties.

To basically take that other color, turn it into an arch RGBA value and

actually you know, lower its opacity by 0.1.

But then I wanna turn this whole thing into a gray scale value,

because I do want it to be closer to black than it is to the original color.

I don't want, if you put in like, pink, I don't want it to be a pink shadow.

You know what I mean, so this is one that I, I actually wanna consume that

original color and get it more closer to a grayscale.

So then how we actually use these things here is I'm gonna use

the box shadow CSS attribute.

[SOUND] So getting this in here, I'm gonna use the box shadow, you know, 0, and

then I'm using the m function in here, and I can actually.

Bring that back down to 0.

And them I'm gonna pass in the shadow color.

So as we see down here, I have that original color which is passed in here.

Let's even change this again to I like success.

[SOUND] Success is good.

Nope, I want success.

Success is better, all right.

So, I have the green highlight for the border.

I have the, the slightly greenish text shadow,

and then I have a pretty gray scale box shadow.

Again, this is being derived a single color.

None of these x values have ever been written by me.

'Kay?

So now the last thing we need to do,

is we need to have that hover state in here, right?

So I'm actually gonna put that hover state inside of my flat button, like so.

So then this becomes part of the mix-in as it's included in to the selector.

So when I come down here, we have our slightly green, slightly darker green,

hover state, all right?

Good stuff, huh?

That's almost getting a little bit too, let's make that 5%.

Change that again, come down here, that feels a little bit better.

All right, that's great.

That's good stuff.

So there we have it.

You know? I basically created a mix-in,

that consumes another mix-in that has a bunch of

great default values that we can change.

You know, if I come in here and

then I say I want my line height to be, [SOUND] I don't know, 64.

You know, I get a taller button, and this is gonna change for all of the buttons.

Let's turn that back to 32.

You know, and then say I have a button padding of 10,

I want to make it a little bit thinner.

You know, we can do that as well from here.

So again, you know, there's a lot of things that we can do that makes this,

this the CSS very configurable very reusable and it wouldn't be

uncommon to basically take something like and put it into an individual library.