All language subtitles for 2. Project 1 Style Fancy CSS Buttons (Part 2)

All right, now, let's do this.

The second 3D button here, the circle looks a little bit like this.

It's a circle.

It's got a radial gradient.

When you got this back here, this kind of depth to it.

So when you it looks like it's popping off the the background and when you click it, it kind of sinks

into it and it's a cool 3D effect.

So we're going to create that button right now.

Pop over to your code editor.

And now I'm going to add that comment flank for 3D button number two.

So I know where I am.

OK.

And first thing I want to do is I'm going to select that button.

So the class of BTN Dash 3D Dash two.

I'm going to start off saying position relative because we're going to be doing a little bit of positioning.

So we need that to have something declared a fallback background.

We're going to have it be kind of like a yellow OECD 300 and then this is going to be default yellow,

but we're going to want to add some radial gradients.

So we're going to also declare another background.

And then we're going to say web kit radial gradient.

And this requires two values you could say like red comma blue, and then it will look something like

this over here in the browser, you could see pretty ugly radial gradient, but that's how the radial

gradient works.

We're going to be declaring a few.

These are browser prefixes.

We're going to do web kit o mas and then just the fallback standard syntax.

So we'll get there.

So instead of red and blue, we're going to do something a little bit more complicated.

We're just going to using Excel again for hue saturation, saturation and lightness, the Hue is 50

for 100 percent for the saturation so fully saturated and 50 percent in terms of lightness.

So slightly dark, not 100 percent white, not zero like black.

We just want to be in the middle and then do another excel and do the same color, the same hue and

saturation, but different lightness.

40 percent So I'm going to copy this based based based change.

The first the second browser prefix to the letter O for opera and the third one to Mars for Mozilla,

and the last one just removed the prefix altogether.

That's the standard syntax that right there is going to give you a radial gradient checked over in your

browser looks a little bit like that makes fine and dandy beauty.

Let's move down back here and our code editor font size.

I'm going to say one point four RAM and then we're going to go ahead and do some text shadows, and

that's going to be zero negative one pixel zero and then see three a f zero seven.

What's that negative one pixel do?

That's the vertical offset for the text shadow.

So if I had a positive number like one pixel, the tech shadow would be one pixel below the text.

But a negative value like negative one is one pixel above the text.

So I want the shadow to be above the text and zero here is the I believe that's the horizontal axis

offset story.

And this is the blur.

The third value is the blur.

I don't want any blur, I don't want any horizontal offset.

I just want negative one vertical offset so that it's slightly above the text and then a slightly lighter.

A more white yellow than what is on the background, you'll see the effect that that gives shortly.

Color of the text is going to be white border solid one pixel.

We've got that cell again.

We're going to do 50 for 100 percent and 20 percent, so a little bit dark.

And then we've got the border radius that's going to be 100 percent for full circle height.

120 pixels width 100.

Twenty Pixels Z Index for because we're going to be playing with some positioning of the Z index because

we're going to have that background behind it, we want to make sure it's above, you know, there's

a method to my madness.

OK, so Z index for now, let's check it out in the browser.

Perfect circle looks great.

You could see the text here.

Look at the text shadow.

You can see that slight dark yellow.

It looks like this circle text is indented within the element, so that's what that effect gives it

versus the Facebook button we did up here where the text shadow is below it makes it look like it pops

off the button.

This one I wanted to make it look like it's in the button a little bit like it's, you know, you take

like a stamp, like it's stamped inside of it.

OK, now we're going to do watch this when I click this has this gnarly looking outline outline doesn't

let me do border radius, so we're going to remove the outline pop over to the code editor outline none

gone.

I don't usually like to remove outlines for accessibility reasons, but in this case it's gone.

We're going to do something else.

All right, we're going to do some dark shadows, we're going to create this effect right here over

in the browser.

It gives this cascading effect that makes it look like it's lifted off in the background.

We're going to do that right now with a bunch of box shadows.

So let's go back to the code editor and start off with Box Shadow.

I'm not going to do the browser prefixes because Box Shadow is pretty widely accepted, and I don't

want to write this out so many times.

So VOC Shadow, we're going to start it with an inset zero one pixels zero HL 50 for 100 percent and

50 percent.

And if I left it at that, it's going to give us this slight hairline above it, making it look like

the light is shining down from above and giving it a little bit of a depth looks nice.

Cool thing is, I can add more.

I can add more than one line to this box shadow instead of writing Box Shadow Box in a boxer like that,

which I don't even know if will work.

You can actually just separate the values with the comma.

Go to a new line just for readability purposes and add another value for the box shadow style.

So that's cool.

So we're going to do not insert for the second one two pixels, zero eight yourself, you guessed it

50 for 100 percent and 20 percent.

Now what we're going to do here, we're going to copy this line and separated by comma pasted change,

a couple of values three pixels for the next one and take off a couple of percent.

You'll be able to see a pattern here, 16 percent separated by comma.

This is going to be six pixels.

This is going to be 14 percent.

This one is going to be seven pixels.

Oops.

This four five six pixels and this is going to be 12 percent.

Seven pixels.

10 percent.

Just a couple more.

Eight pixels.

Eight percent.

And this was going to be nine pixels and then six percent basically goes to black ended with a semicolon.

Save that.

Check it out over here in the browser.

You get that cool effect.

Looks pretty, pretty cool.

You can see what happens.

Just adding more block shadow values.

It's just giving that affects.

It's gradually going to darker.

That gives the illusion that it's kind of three dimensional.

Pretty cool.

Now what we're gonna do is when we hover and click on it, we're going to give it some, some styles.

So I'm going to go over here to my thesis tab.

And in not final sorry BTN Dash 3D Dash to hover.

We're going to change the radial gradient, so I'm just going to copy it up here.

We'll leave the fallback, I don't mean to change that.

If you want, you can, and I'm going to change the radial gradient all around so that when you hover,

it changes the color of it.

So HL 50 for 100, that's going to say the same, but we're going to change the lateness to 45 on here

and 35.

From there.

Copy that.

The two Excel values, paste them in each of the styles here.

Save you typing.

Save that.

Check it out in the browser.

You're going to hover.

It's going to work for you beautifully.

And then now we're going to do is on the act of state.

We're going to change the real gradient as well.

Copy all that and then change.

Hover to active.

I'm going to change the values from forty five to forty three and thirty five to thirty thirty three.

Copy both of those.

Paste them in each of the lines here to save you some typing just like that.

Cool.

And now we'll just check it out.

So here in the browser, hover active, hover, active, default, hover active looks good.

OK, now below these lines here we're going to do top two pixels.

We're going to bump it down to pixels when we click on it.

Now watch what happens over here in the browser.

Click pops down to pixels, but there's a problem.

It moves the entire element down.

I only want it to rumble to move the foreground down to pixels, not the block shadows.

So how do we do that?

Because here you can see we kind of do a similar thing and almost sinks into the button like you're

clicking, you know, clicking a button that sinks down.

So that's what we want to do here at the Circle.

We don't want to move the background, the that we want to move just the top.

So how do we do that?

Easy.

Over here in your active casserole, we're just going to copy that box shadow that we did up here.

And all we're going to do because we need to account for two pixels that we're bumping down.

All we need to do is remove the last two lines of box shadow.

Place that last one with semicolon, save it, and now because we've taken two of those out, those

two pixels, it's going to accommodate this click.

Looks pretty good.

Cool.

So that is the Circle 3D button, that's all we need to do for that one.

Let's jump down now into the gradient bordered buttons.

All right, now, we're going to mess around with these gradient bordered buttons right here.

You can see we got this one kind of this orange, red to yellow from the bottom right bottom left hand

corner up into the right hand corner.

There you get that.

You see the point here is that the border has a gradient on it.

And then when you hover, you get the gradient on the inside.

But the point here is that you can make God borders have gradients, which is cool.

And then the second example we actually have this.

I don't know if it's necessarily practical, but it's just a cool practice.

Something just to show you what you can do is you can actually have the border fade out.

So we have it from going left to right and then it just fades out kind of into nothing.

And then when you hover, the background does the same.

So why don't we jump in and do that over in our code editor sandbox that CSC?

We're going to go ahead and add that CSC comment.

Just like so gradient bordered buttons, you can do something simpler if you want.

I just like doing that.

All right.

So we're going to check out in the index of each HTML, what is what are the classes that we're working

with?

We got gradient button, one gradient button to.

Beauty, OK, so gradient, but in that one, we're going to start off and give it a position of relative.

Oh, that's weird.

That's all we want relative and then Z Index one just to keep it all at one level, just in case we

have some weird stuff going on with overlaps and stuff.

Display in line block padding 20 pixels.

A 40 40 pixels.

And then we're going to say font size, let's go for one point for RAM, box sizing is going to be broader

box so that the 20 and 40 pixels, it doesn't add more width and height to the button.

When we add a thick border to it that stays within the constraints of the dimensions that we set.

I'm going to go background color e seven e f one.

And that's just a background color.

And then we're going to do a border of solid 10 pixels and transparent.

So we're going to give it a semi-solid and 10 pixels, but no color because we're going to we're going

to add that here using border image.

We're going to do the linear gradient and then parentheses.

Then we have a couple few values here.

So we're going to say to top right, which means it's coming from the bottom left and moving up to the

top right.

That's what that means.

You could also say to bottom right to top left to, you know, bottom left, or you could just say top

right, bottom or left and have it be linear, you know, have it go from the top to the bottom, left

to the right?

All this does is it goes up on an angle and that's what I want to be able to achieve here.

And then we need to have some colors, the first color.

I'm going to go with orange, red and then the second yellow.

And then if I see that, let's see what that looks like.

OK, so we've got each of the corners have that gradient.

So it's kind of looks weird.

It's not really what we want from, but it has the color.

So from bottom left to top right, it's got that orange and yellow.

So the gradients, right, but it's just popping into the corners.

Now the way we fix that is using a CSE's property called Border Image Slice.

Basically, it specifies how to slice the image so you can use the border image and put an actual image

as the border.

But I'm using a gradient.

So I found that if we put if we go back here to our code editor and if we were to put the border image

slice, now you can put different values in there.

But the value that I'm going to put is literally just the number one.

And what that does is it fills out so that each of those corners connect.

That's what that does.

You can also play around with different values and see what happens.

And there's also different things like Phil and so on and so forth.

You can read about it in the browser support, but border image slice one connects all those corners.

And so there we are gradients.

And essentially, essentially, it's done.

That's gradient button, you know, gradient border button one.

But I just want to make it a little bit more interactive.

It doesn't really look like a button.

Hmm.

Good.

Hmm.

All right.

And then colorless, I think the text color orange, red as well.

And then we're going to say transition.

This is just for when we have a little bit of an effect, a hover effect 0.3 seconds is in out.

I like that one.

You can use EAS, you can use linear, you can use quad easing or whatever.

There's a bunch of different transition properties.

So transition is in out.

Works fine for me, but you won't see it until we use it on the hover.

So we're going to tab in here.

We're going to see gradient button dash one.

And that's going to be.

However, and we're just going to say background.

Image linear gradient from the linear gradient as well, and then to top right, and we're just going

to fill out the same style gradient orange, red, comma yellow.

That's what that will get you.

Save that.

Check it out here.

When I hover, it's going to give us that gradient in the background.

And then let's say color whites say that.

Check it out.

It should look pretty good there.

When you hover the the text color slowly fades into white from the orange red and then the background

pops in there filling in that gradient.

So that looks pretty cool.

The point here was the gradient border around the button itself.

Hmm.

OK, so now let's jump down to a gradient button to let's do that one real quick here.

So we're going to do a gradient button to.

And we're going to do position relative that index, one that should do the trick.

Padding, we'll see we did recover, just copy a lot of this, actually.

Why don't we just Hey, folks, let's save some time.

Copy all this.

Goodness gracious.

All we're going to do is just paste that in there.

We're not doing anything new or crazy, except for maybe let's change the size of the border.

So instead of 10 pixels, just just make it like four pixels and the colors.

Let's do orange, red to transparent.

But right now, because we're doing to top right, it's not what I want.

I want it to go to right.

So orange, red, transparent.

So it's going to fade out and leave the color in the transition there.

And then we're going to copy the hover as well.

Because we need that for interactive kind of accessibility reasons.

It's going to be button to grading button, too.

And this is going to be too right.

This is going to be too transparent.

And that should do the trick.

Well, let's see what happens.

Save it.

Check it out in your browser.

Looks good so far when I hover.

Woops, it's going on their border shows up on the right side.

What we need to do on hover is remove that border.

So let's go back to our code editor and simply say border write style.

None that should do the trick.

Go back here.

Hover.

Perfect.

There you go.

We agree.

A great border button.

One ingredient border button.

Two Very simple, nice little trick using border images and linear gradients.

I like it.

Moving on to the animated buttons.