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

Hey, what's up?

Welcome to day one of CSS3 three in 30 days, my name is Brad Hussey, and I'm going to be helping you

out over the next 30 days or so to learn CSS3 by actually building a bunch of things.

So day one is the very beginning, and we're going to be getting started with some pretty cool stuff.

So let me show you what we're going to be doing right here in the browser.

So right here over in the browser this day, one sees three fancy buttons I'm calling it.

We're going to be making some buttons exclusively with three just to kind of what you're whistling,

get you excited about what's to come.

This is a pretty cool thing, something you can use immediately in your websites and all that sort of

stuff.

Here's the shell.

You've seen that in the previous video I showed you kind of the outline.

This is what every lesson is going to look like.

We're not going to be coding that up, but you're welcome to check out the success in the theme files

and stuff.

That's cool.

But what we're going to be building is going to be further down here in the the web page so you can

see we've got the sandbox.

This is what you're going to be using to you're going to manipulate this to make it look like the final

result.

Now below, here is the final result with scroll down.

We've got the final result and this is what we're going to be making.

This is the final example of what we're gonna be doing.

We got the Facebook style buttons.

We've got the 3D buttons, you know, with some 3D cool effects in the circle and all that sort of stuff.

We've got the gradient bordered buttons with some cool hover effects.

You can see that here.

The border of these buttons have gradients.

That's the CSS three kind of hacking their animated buttons.

So when you hover over the buttons, you get some cool animation effects and then adding an element

in there.

We've got toggle switches, changes, the text and the button in the color and all that sort of thing,

the position of the inside switch.

And then, you know, you click to activate a button, those sorts of things.

So that is what we're going to be building in our lesson today for day one six three fancy buttons.

So what you need to do before you get started is download the course file so you can follow along and

actually start making something right away.

Just click the link to download the course files and you'll be given a file that our folder a zip file

with a folder in it that's called one dash fancy buttons.

It's going to have an index file like so it's going to have a sandbox.

That's the CSV file, which you're going to be using to add your own success.

And a final does the CSV file, which has everything that you need to reference.

If you go through the code, you messed something up or you're not quite sure about something that right

there is going to help you out.

You can use that for reference while you're building your projects.

And that final success is what styles over here in the browser.

This stuff over here.

So the sandbox style this this section, the final result is right here.

So those are the three files that you're going to get in this.

The the course files for this lesson.

And what you need to do is just open up your index following your browser.

I'm using Adam as my code editor, so I got my course files in that code editor right here.

But then it also has a feature where you can open up the index HTML file in the preview over here.

So that's what I'm doing, but you can open it up in a browser like Safari or Chrome.

So I suggest you go ahead and do that and then open up your code editor.

Open up your sandbox.

That success.

Now that we're here, we should be at the same spot.

What we're going to start doing now is styling up these Facebook style buttons.

Let's just jump in Northeast any more time.

So in the index file, you're going to see the CSS classes that I use for the Facebook style buttons,

Facebook style button and then Facebook style dark and light.

So let's just jump right in, we're going to say Facebook style BB10, and then we're going to say border

radius to pixels.

Let's do font size 0.9 RAM.

That's referencing the root font size rather than the parent font size.

That's of course, he has two or three feature padding.

We're going to go six pixels on the top and bottom, 12 pixels on the left and the right.

Save that pop over into your browser.

You can see already the changes are taking place.

Looks pretty good so far.

Nothing fancy, but you know we're getting there.

Let's select the Facebook style, dark button Facebook style dark, and I'm going to start adding some

box shadows.

So just to be up to date here, we're going to use Moore's box shadow.

And then I'm going to go ahead and say inset, and I'll explain this in a minute.

Zero one Pixel zero zero.

And then a color for D7 three b f.

I'm going to copy that.

Whoa, that needs to be a pound sign on a dollar sign.

Paste that a couple of times.

The second one going to change the web kit and this last one is just box shadow.

And then I'm going to tab the the rule here.

Oops.

The style so that we can have them line up properly.

Beautiful.

All right.

So Mars is from Mozilla browsers is for web based browsers, and box shadow was just the fallback that

you know, modern browsers are able to pull from.

So that's what you would do to get your box shadow.

You can just put box shadow, but then, you know, some browsers might not recognize it, and then

you won't have the box shadow effect.

So it's up to you if you want to do that.

See us this story is a bit progressive, so some browsers aren't quite up to date with certain rules

and styles and things like that, but at the bottom of every lesson over here in the browser, you can

see how compatible are these styles of major browsers.

If you click on this link, it'll take you to a web site that will basically say, Can I use, you know,

box shadow?

And you can see see us history box shadow and where it works, it works in these versions of IEEE Firefox

Chrome's Afari and, you know, you can kind of see.

So basically, it says.

On prefix, so this is prefixed styles over here in the code editor.

These are prefixed styles, so technically we don't even really need to do that because it looks like

ninety four point eighty eight percent of browsers are going to support the UN prefix box shadow.

So that's pretty cool.

Let's see Safari six, iOS default browser iOS six.

Don't work with zero pixel value or blurb, so there's information there.

You know, you can reference that it's up to you if you want to do that.

So I won't waste any more of your time looking at that.

You can do that on your own time.

So let's go back to the style here.

There we go.

And let's jump back in here, and I'm going to explain this here.

Inset, it makes the box shadow on the inside of the the box, the block level element.

So inside of the dev, it's going to be the box.

It was within the element rather than on the outside.

Casting a shadow behind it is going to be inside the element itself.

The first a number here, the first value is the horizontal, the horizontal offset.

And that's if you put a positive number like five pixels, it's going to be shift to the right.

And if you put negative five, it's going to go to the left.

So at zero, it's dead center.

The second one is the vertical offset.

So positive number like five pixels is going to be shifted down.

And if if you put a negative number like negative five, it's going to be shifted up.

And then the second, the third number here is the the blur radius.

And that's a blur.

You want that box shadow a zero would mean a sharp line and like 10 pixels would be a blurry black shadow.

Depending on the effect you want and this one is the spread radius.

So if you want it to be a really big, you know, as the box shadow to spread, then you'd have a higher

number if you don't want to do anything than zero.

These are the only two that are required.

These two are optional values that you don't need to put.

And so then the last one is the color of the shadow.

So if I say this hat over here, you're going to see just the thin hairline in the browser, and that's

what we've created, just a thin little blue hairline, and that's all we wanted.

All right, so next, what I want is to change the background to it's going to be four to six, seven

be two just for the background color border.

Solid one pixel.

Same color as the previous color there.

That's the Facebook blue purple color.

Color of the text is going to be white text shadow.

Let's go four zero one pixel zero and then three three five nine a five.

And that's just going to be, you know, a little bit darker of a text shadow under the white text.

So let's have a look and see what that looks like over in the browser.

If I save that button looks good.

Got that slight border, that little bit of a glow on the top, as if a light was shining down on the

button to give it a little bit of depth.

White text, slight text, shadow and under there beautiful.

It looks great now.

We don't have any hover or active effects when you interact with the button, so let's do that over

here in the code editor.

I'm going to go down a couple of spaces and Tab N1.

That's not going to change the CSS at all.

It's just for organization.

I like having my related rules to be organized in a manner that I can see.

So if I tap in, I know that this rule that I'm doing so Facebook style dark and then hover.

I know that this rule is directly related to this rule right here, whereas these two are not as related.

They're kind of, you know, it's more so for my own organization purposes so you can do what you want.

But this is what I like to do, feel free to follow along in that manner.

All right.

So on the hover, what I want to do is change the background color to to be five for a seven.

And I say that, and then we're going to copy this and paste it and change the hover too active so that

what I'm going to do here is I'm going to change the background to one D four six nine eight and then

the border color to the same.

Save that now, if I go over here and interact with that button, hover a little bit darker, click

an act of state a little bit darker.

Still, the borders dark looks great.

All right.

Let's dial up that light button over there, so head back to our code editor here.

A couple returns there.

Let's go.

Facebook style light.

And I'm going to say the background is f six seven, f nine.

The border is going to be a solid one pixel c d o d four zero d for.

The border radius we already covered, that's the color of the text color is going to be for.

Be.

For.

EF five, six.

Really, that's right, yeah, that's like a grey and then the padding is good, so that's all we need

to do for the light button.

Let's check it out.

It looks good, much more minimal and simple.

I like that style.

And now what you need to do is add to the hover and active states for that button as well.

So a couple of returns down Talbot in Facebook style light hover and we're going to change the background

to E9 EBIT.

And then we're going to copy this whole rule and change this one to active and then is going to change

the background.

To date, daddy.

Copy that and we're going to do is change the border caller to the same, save that.

Check it out, interact with it, hover a little bit darker.

Click darker.

Still looks great.

I like it.

All right.

So those are the Facebook style buttons.

Now let's jump in to the 3D buttons down here so you can see we've got these 3D buttons.

Let's go ahead and call those up.

Hey, welcome back to day one.

We're going to be coding the 3D CSS3 three buttons.

We're still in the fancy button section of the course day one.

But we're going to do the 3D buttons now.

So here in the browser, you can see that two 3D buttons that are going to be styling up.

So let's just do that.

Go to our code editor.

I'm going to add a CSS comment flag here so we know where we are.

So the 3D button, you can do what you want.

You could do a simpler comment if you want.

This is what I like to do.

Keeps it nice and easy to to organize and read.

So what we're going to be doing now is we're going to be selecting 3D buttons here.

We're going to be doing the button 3D one.

I mean, if I go up here, actually.

Button 3.1 and button 3.2, that's what are going to be selecting, so let's go ahead and select Button

a 3D one and that is going to select that first 3D button.

We're going to style that position relative important because we're going to be doing a little bit of

movement.

Background is going to be orange, red, nice and simple.

No border color of the text is going to be white, patting me 15 pixels, 15 pixels top and bottom,

24 pixels on the left and the right, the font size.

We're going to be one point REM when you're using and it's relative to the parent element, whereas

when you're using RAM, it's relative to the route, so just more consistent.

It's a nice little measurement for CIUSSS three box shadow four.

For this, we're going to do box shadow.

We're going to say negative six pixels, six pixels, zero blobs.

That's five pixels, zero.

And then we're going to excel for hue saturation in little, whatever that is.

HS also 16.

One hundred percent and then 30 percent.

16 is the Hue, 100 is the saturation.

And then 30 percent is the lightness.

So we want it to be this kind of like blood red sort of color for the shadow and then the outline,

we want no outline.

If I save that and we head over to our sandbox here, you can see we have the 3D button.

It has the shadow over here.

But the thing is, if I look at the final version it has, it has this kind of corner that connects

the two.

So while that looks pretty cool, I want it to be connected.

So we're going to go ahead and work with that here in a moment.

But before we do that, we might as well.

While we're here, let's do the hover, the hover and active states button 3D one hover.

We're going to do background is going to be SL 16, 100 percent and then 40 percent.

I got these colors from Photoshop, by the way.

If you're wondering, I'm not just pulling them out of the top of my head.

Top pixels, the top three pixels left negative three pixels.

This is why it was important to do position relative so that we could position the elements based on

when we hover it.

So and then the box shadow, we're going to change it a little bit to negative three pixels, three

pixels, zero and then excel the same here.

So what that's going to do is when you click it, let's or when you hover it, let's check it out,

see how it pops down.

That's pretty cool.

Actually, I don't want that to do it on hover, I want that to do it on active.

So that's going to actually be the active state.

And now above this, I want to do the button, 3D hover button, 3D one hover.

And that's going to be simple.

We're just going to change the background to HL 16.

One hundred and forty five for lightness.

This can be a little bit lighter.

So hover.

It's actually it's actually a little bit darker.

So there we go.

And when we click, it moves that button down.

So cool.

Now, what we want to do is we want to give those corners.

We want to add those little corners to connect these two, so it gives the illusion that they are one

entire uniform box so we can do that by doing them before.

Let me show you here.

So we're going to do three button 3D one.

And then to Collins, if we go before it's like a virtual, it's like a pseudo element of the here we

go.

It's a pseudo element that is the first child of the element matched.

So it creates a pseudo element that it's not actually on in the markup, but it allows us to basically

create an element of a thin air that's connected to this device.

So what we're going to do is we're going to use that before pseudo element position in absolute.

This is where the magic happens.

It's pretty cool display block content.

We need to do this in order for it to appear on the screen.

It needs to have the content in an empty string.

You can put text in there too if you want, which will do at some point height zero, width zero or

we're going to be doing is creating a triangle and putting it in that corner there.

So if I were to save this now, you're not going to see anything.

So there's no point in showing you what we're going to do is create a border now.

And let's see, this is going to be solid six pixels, transparent wolf does that word?

Transparent.

Now the border with needs to be the size of the elements box.

Shadow.

The box shadow here, you can see it here.

So we have six pixels, so we have six pixels up here, so you'll see why in a moment and we're going

to do border.

What's border, right?

Solid six pixels.

We're going to do that color there.

16, one hundred and thirty now.

I'm going to say this, I'm going to show you over here in the browser.

Look at this right here, you can see this little triangle that we made, do you see that?

So it's just appearing here in the within the button so you can see what we've made so far.

So we've made that.

And what we want to do is.

Basically, pull that up into the corner so we can use it, a section of it to give the illusion that

there's a connection between that, between the button and its shadow.

So let's go back here and our code editor.

We're going to say border.

Left with zero pixels.

And what that's going to do is if we go back over here, all it's done is moved the element over about

six pixels.

So if I were to comment this out and save it.

Now watch here in the browser.

As I refresh, it's got moved it back over.

It's just when I add zero was a border left width.

It has no border here, so technically.

The whole element is this big 12 pixels, but I want it to be just the six pixels right here, so I'm

saying border left width or here in the code ED is zero.

It just cleans it up a little bit.

So it doesn't mess with my measurements when we move it.

And background, none.

Sometimes there's a background in the way I don't think I need to do that.

Now what I'm going to do is say the top is zero pixels.

That's going to push it over here in the browser to the top of the element.

And now I need to push it over and fitted in right here like a puzzle piece like Tetris and the Left.

If I were to say left zero.

What that's going to do is just put it over here in the browser and put it to the left here.

So I need it to be all the way over here and that if we know our math, when we set that element up,

there is negative six or six pixels wide.

So this needs to be negative six pixels.

So the left needs to be negative six.

If I say that, it's going to put it over there.

Check out what just happened.

A little bit of magic gives the illusion that that element is connected just by creating a little CSS3

three triangle with borders and moving it with positioning into that corner right here to give the illusion

just.

This is cool.

OK, so we're going to the same thing for that bottom right corner.

But because we've already used the before pseudo element, we need to use the after pseudo elements,

we have access to that as well.

So I'm going to copy.

I'm going to copy this because much of it is the same.

And I'm all I'm going to do is paste it.

Change it to after.

But we need to change the position of certain parts of the elements so we can't just have it be the

same because it's just going to show up in the same top left corner.

So we need to change it a little bit.

So it's actually me, I remove all of this right here.

Except for the border, solid, transparent, what we're going to do now is going to say border top.

It's going to be solid six pixels and then we have that cell, we're going to copy that color.

Like so border bottom with groups.

Is zero pixels.

So now, if I say that, come over here and you could see all we're doing now is the border, you can

see.

Imagine this as a box.

It's actually a whole box and I'm displaying only the top section of the border.

So there's no there's no size for the box.

There's nothing in the David or the height is zero in the width zero.

But the border itself is six pixels wide.

So we've got a six pixel border on all sides one two three four.

This is the top.

All I'm doing is hiding the left, right and the bottom borders and only showing the top border.

So it has this triangle effect.

So it's a cool little illusion that you could do in season three.

So the the border top is six pixels in the border bottom is going to be zero.

And the also you can see here the border transparent, all the borders are transparent.

So if I were to remove the border top overwrite and then go back here in the browser refresh, you could

see it's gone because the border is transparent but six pixels wide.

But now, if I change the border top, which is the one I want to show to solid so we can see it six

pixels and give it a colour.

Save it.

Now it's going to show and then the border bottom width and just making it zero so that it collapses.

So it doesn't give us this messy 12 pixel box when all I need is six pixels.

Does that make sense?

I hope it does.

It's it's quite simple and awesome, it's a pretty cool little concept to create the necessary triangles.

OK, so we've done that.

Now all we need to do is we need to move it.

So the right is going to be zero, so it's all the way over to the right.

So as you can see in the browser, if I were to save this, it's going to pop over.

All I need to do now is move it down all the way to the bottom.

So let's go here.

We're going to go bottom negative six pixels in the browser.

Pop over here.

Look at that.

It moved it over to the bottom.

Now we have this effect that it's connected.

It's quite magical.

Cool.

OK, now we have one little thing that we need to fix here.

If I were to click on this, watch what happens.

It's going to move the whole element.

But now we can see our little triangles.

So that's a problem.

So what we need to do now is when we on the hover on the active states of the before and after pseudo

elements, we need to shrink those triangles so that it still gives the effect to the illusion that

it's a full box.

So that's quite simple.

All we need to do is add a couple extra things here.

I'm going to say button 3D, one active and then before.

So this means when it's active, I want to select the before pseudo elements and we're going to change

the border to solid three pixels rather than six pixels because it needs to be the size of the border

width transparent.

Perfect.

The border, right, is going to be solid three pixels.

It's going to be that cell up here.

Copying that, pasting that and then the border left width is going to be three zero pixels.

Although I don't know if we necessarily need to do that, so I'm just going to remove that because I've

already declared it and then left is going to be negative three pixels rather than negative six pixels

if I save that and now watch this.

The left side?

Well, that doesn't look good at all.

OK, something went weird there, maybe I do need to to declare the border left with to zero, let's

see what that does.

So I needed to do the border left with two zero for some reason.

And now that looks good, but the bottom one doesn't look good.

So let's just copy all this and then paste it below.

We're going to change it to the after pseudo elements.

Border is going to be solid three pixels.

The border top is going to be solid three pixels and then the border bottom width is going to be zero.

And then the bottom is going to be negative.

Three.

Save that.

Check it out in the browser.

Now we've got a perfectly working 3D button with all of the corners and the triangles working perfectly

in sync.

Awesome.

That is beautiful.

So now what we're going to do is we're going to create the Circle 3D button.

Let's do that.