**Introducing CSS3: A Powerful Tool for Web Designers**

In this article, we will delve into the world of CSS3, a powerful tool that allows web designers to create stunning and interactive websites. We will explore various techniques and examples of how to use CSS3 to achieve specific design effects.

**Creating a Checkbox Input with a Toggle Button**

We begin by creating a checkbox input element. This is the basic building block for our toggle button. We select this element using the CSS selector `input[type="checkbox"]`. Next, we hide the display of the input element using the `display: none` property. This will make the input element invisible to the user.

**Selecting the Adjacent Sibling**

We then select the adjacent sibling of the checkbox input element using the `span { margin-left: 0; }` selector. This selects the span tag that is immediately next to the checkbox input element.

**Styling the Toggle Button**

We then style the toggle button by setting its position to `relative`, display to `inline-block`, and line height to `20px`. We also set text transform to uppercase, background color to white, border width to 1 pixel, and add a triple C heading. Additionally, we use transition effects to make the button more engaging.

**Creating a Circle Element**

To create a circle element, we add the `border-radius` property with a value of `100%`. This will give us a perfect circle shape. Alternatively, we could have used a fixed width and height to achieve the same effect.

**Styling the Checked State**

We then select the checked state of the checkbox input element using the `input[type="checkbox"]:checked` selector. We also select the adjacent sibling span tag using the `span { display: block; }` selector. This will style the span tag when the checkbox is checked.

**Adding the Before Pseudo Element**

Next, we add the before pseudo-element to the toggle button. We use the `::before` pseudo-element to create a new element that appears before the toggle button. In this case, we use it to create a small circle shape.

**Styling the Circle Element**

We then style the circle element by setting its background color to white and border width to 1 pixel. We also set the color of the text to black.

**Finishing Touches**

Finally, we add some finishing touches to our toggle button. We use the `:checked` pseudo-class to change the background color of the button when it is checked. We also select the before pseudo-element and style it by setting its background color to white.

**Using CSS3 to Create Practical and Engaging Web Design Elements**

In this article, we have explored various techniques for using CSS3 to create practical and engaging web design elements. From creating a checkbox input with a toggle button to styling a circle element, we have covered a range of topics that will help you take your web design skills to the next level.

**Conclusion**

CSS3 is a powerful tool that allows web designers to create stunning and interactive websites. With its wide range of features and effects, it's no wonder why CSS3 has become a popular choice among web designers. In this article, we have shown how to use CSS3 to create practical and engaging web design elements, including checkbox inputs with toggle buttons, circle elements, and more.

**The Future of Web Design**

In our next article, we will delve into the world of CSS animations and transitions. We will explore various techniques for creating smooth and engaging animations that bring your website to life. From simple hover effects to complex animations, we will cover it all. So stay tuned and get ready to take your web design skills to new heights!

**A Sneak Peek at Day Two**

In our next article, we will be exploring the world of CSS animations and transitions. We will show you how to create smooth and engaging animations that bring your website to life. From simple hover effects to complex animations, we will cover it all. So stay tuned and get ready for a exciting journey into the world of CSS animations and transitions.

**A Final Note**

We hope you enjoyed this article on CSS3 and its many features and techniques. If you have any questions or need further clarification on any of the topics covered, please don't hesitate to ask. We will be back with another article soon, so stay tuned for more exciting content on web design and development.

"WEBVTTKind: captionsLanguage: enhey what's up welcome to day one of css3 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 uh right here in the browser so right here over in the browser this is day one uh css3 fancy buttons i'm calling it uh we're going to be making some buttons exclusively with css3 just to kind of wet your whistle and 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 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 css and 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 uh 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 let's 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 going to be doing we've got the facebook style buttons we've got the 3d buttons you know with some 3d cool effects and the circle and all that sort of stuff we got the gradient bordered buttons with some cool hover effects you can see that uh here the border of these buttons have gradients that's a css3 kind of hacking there animated button 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 in the button and 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 css3 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 i just click the link to download the course files and you'll be given a file that or 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.css file which you're going to be using to add your own css and a final css file which has everything that you need to reference if you go through the code you mess 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 css is what styles over here in the browser this stuff over here so the sandbox styles this uh 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 file in your browser i'm using atom uh 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 uh 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.css 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 not waste 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 btn and then we're going to say border radius 2 pixels let's do font size 0.9 ram that's referencing the the root font size rather than the parent font size that's a cool css3 feature padding we're going to go 6 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 we're going to start adding some box shadows so just to be um up to date here we're going to use moz box shadow and then i'm going to go ahead and say inset and i'll explain this in a minute 0 1 pixel 0 0 and then a color 4d73 bf i'm going to copy that whoa that needs to be a pound sign not a dollar sign paste that a couple times the second one i'm going to change to webkit and this last one is just box shadow and then i'm going to tab the uh the rule here whoops the style so that we can have them line up properly beautiful all right so moz is from mozilla browsers webkit is for webkit-based browsers and box shadow is just the fallback that uh 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 css3 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 say css3 box shadow and where it works it works in these versions of ie firefox chrome safari and you know you can kind of see so basically it says um unprefixed 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 94.88 of browsers are going to support the unprefixed box shadow so that's pretty cool let's see safari 6 ios default browser ios 6 don't work with zero pixel value for blur 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 uh 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 div it's going to be the box shadows within the element rather than on the outside casting a shadow behind it it's going to be inside the element itself the first 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 shifted to the right if you put negative five it's gonna go shift it 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 uh if you put a negative number like negative five it's going to be shifted up and then the second uh the third number here is the the blur radius and that's how blurry you want that box shadow uh zero would mean a sharp line and like 10 pixels would be a blurry box shadow depending on the effect you want and the this one is the spread radius so if you want it to be a really big you know 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 head 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 4 2 6 7 b2 just for the background color border solid 1 pixel same color as the previous color there that's the facebook bluey purple color color of the text is going to just be white text shadow let's go for 0 1 pixel 0 and then 3 3 5 9 a 5 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 we've 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 looks great now we don't have any hover or active effects when you interact with the buttons so let's do that over here in the code editor i'm going to go down a couple spaces and tab in one 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 tab in i know that this rule that i'm doing so facebook style dark and then um hover i know that this rule is directly related to this rule right here whereas these two are not uh 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 2b54a7 and save that and then we're going to copy this and paste it and change the hover to active so that what i'm going to do here is i'm going to change the background to 1 d 4 6 9 8 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 active state a little bit darker still the border is dark looks great all right let's style 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 6 f 7 f 9. the border is going to be solid 1 pixel c e d o d 4 0 d4 the border radius we already covered that the color the text color is going to be 4 b 4 f 5 6. i believe that's right yep it's like a gray 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 uh and now we need to do is add the the hover and active states for that button as well so a couple returns down tab it in facebook style light hover and all we're going to do is change the background to e9 ebe and then we're going to copy this whole rule and change this one to active and then we're just going to change the background to d8 dade copy that and what we're going to do is change the border color 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 we're going to be coding the 3d css3 buttons we're still in the fancy buttons section of the course day one but we're gonna do the 3d buttons now so here in the browser you can see the two 3d buttons that we're 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 organize and read so what we're going to be doing now is we're going to be selecting 3d buttons here uh we're going to be doing the button 3d one let me if i go up here actually button 3d1 and button3d2 that's what we're going to be selecting so let's go ahead and select button a 3d one and that is going to uh 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 padding's me 15 pixels 15 pixels top and bottom 24 pixels on the left and the right the font size we're going to do 1.4 rim when you're using m it's relative to the parent element whereas when you're using ram it's relative to the root so it's just more consistent it's a nice little um measurement for css3 box shadow for uh for this we're gonna do box shadow we're gonna say negative six pixels six pixels zero whoops that's five pixels zero and then we're going to do hsl for hue saturation and whatever that is hsl so 16 100 and then 30 16 is the hue 100 is the saturation and then 30 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 hsl 16 100 and then 40 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 can position the element based on uh when we hover it so in the box shadow we're gonna change it a little bit to negative three pixels three pixels zero and then uh hsl 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 uh 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 a hover and that's going to be simple we're just going to change the background to hsl 16 145 for lightness so it's gonna be a little bit lighter so hover uh 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 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 the before uh let me show you here so we're gonna do three button 3d one and then two colons if we go before it's like a virtual it's like a pseudo element of the here we go for 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 thin air that's connected to this div so what we're going to do is we're going to use that before pseudo element position it absolute this is where the magic happens it's pretty cool display block content we need to do this in order to for it to appear on the screen it needs to have the content uh and an empty string you can put text in there too if you want which we'll do at some point height zero width zero what 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 uh and let's see this it's going to be solid 6 pixels transparent whoa that is that word transparent uh now the border width needs to be the size of the elements box shadow so the box shadow here uh 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 gonna do border whoops border right solid six pixels hsl we're going to do that color there 16 130. 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 in our code editor we're going to say border left with 0 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 6 pixels so if i were to comment this out and save it now watch here in the browser as i refresh so i move it back over it's just when i add zero as the 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 over here in the code editor is zero it just cleans it up a little bit so that doesn't mess with my measurements when we move it uh the 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 0 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 fit it in right here like a puzzle piece like tetris and the left if i were to say left 0 what that's going to do is just put it over here in the browser it's just going to 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 save 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 triangle with borders and moving it with positioning into that corner right here to give the illusion it's just this is cool okay so we're going to do 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 element so 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 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 element 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 going to be let me 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 is going to be solid 6 pixels and then we have that hsl we're going to copy that color like so border bottom width whoops is zero pixels so now if i save that come over here and you can 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 to the box there's nothing in the div at all the height is zero and the width is 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 css3 so the the border top is six pixels and the border bottom is going to be zero and the oh so you can see here the border transparent all the borders are transparent so if i were to remove the border top uh over right and then go back here in the browser refresh you can 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 color save it now it's going to show and then the border bottom width i'm just making it zero so that it collapses so it doesn't give us this messy you know 12 pixel box when all i need is six pixels does that make sense i hope it does it's quite simple and awesome it's a pretty cool little concept to create css3 triangles okay 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 let's uh let's go here we're gonna go bottom negative six pixels in the browser pop over here look at that it moved it all the way to the bottom now we have this effect that it's connected it's quite magical cool okay 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 1 active and then before so this means when it's active i want to select the before pseudo element and we're going to change the border to solid 3 pixels rather than 6 pixels because it needs to be the size of the border width transparent perfect the border right is going to be solid 3 pixels it's going to be that hsl up here copying that pasting that and then the border left width is going to be three uh 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 okay something went weird there maybe i do need to to declare the border left width to zero let's see what that does so i needed to do the border left with to zero for some reason uh 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 a pseudo element border is going to be solid 3 pixels the border top is going to be solid 3 pixels and then the border bottom width is going to be 0 and then the bottom is gonna 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 all right now let's do these uh the second 3d button here the circle looks a little bit like this it's a circle it's got a radial gradient uh when you've got this back here this kind of depth to it so when you it looks like it's popping off the the background and then 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 uh and now i'm going to add that comment flag for 3d button number two so i know where i am okay and first thing i'm going to do is i'm going to select that uh button so it's the class of btn-3d2 we're 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 uh something declared a fallback background we're going to change have it be kind of like a yellow ecd 300 and then that's just 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 webkit 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 can 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 so i'm going to do webkit oh moz 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 be using hsl again for hue saturation saturation and lightness the hue is 54 100 for the saturation so fully saturated and 50 in terms of lightness so slightly dark not 100 like white not zero like black we just wanted to be in the middle uh and then i'm gonna do another hsl i'm gonna do the same color the same hue and saturation but different lightness 40 so i'm going to copy this paste based based change the first the second browser prefix to the letter o for opera and then the third one to moz for mozilla and the last one just remove the prefix altogether that's the standard syntax that right there is going to give you a radial gradient check it over in your browser looks a little bit like that nice fine and dandy beauty let's uh move down back here in our code editor font size we're going to say 1.4 ram and then we're going to go ahead and do some text shadows and that's going to be 0 negative 1 pixel 0 and then c 3 a f 0 7. what's that negative 1 pixel do that's the vertical offset for the text shadow so if i had a positive number like one pixel the text shadow would be one uh 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 uh offset sorry and this is the blur the third value is the blur i don't want any blur and i want any horizontal offset i just want negative one uh 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 got that hsl again we're going to do 54 100 percent and 20 so a little bit dark and then we got the border radius that's going to be 100 for full circle height 120 pixels width 100 20 pixels z index four uh because we're going to be playing with some positioning of the z index because we're going to have that background uh behind it we want to make sure it's above you know there's a method to my madness okay so z index four uh now let's check it out in the browser perfect circle looks great you can see uh the text here look at the text shadow you can see that slight dark gr yellow it looks like the 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 was 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 uh you know you take like a stamp like it's stamped inside of it okay now we're gonna do watch this when i click this it has this gnarly looking outline no outline doesn't let me do border radius so we're just gonna 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 gonna do something else all right we're gonna do some box shadows we're gonna create this effect right here over in the browser it gives this cascading effect that makes it look like it's lifted off of 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 box shadow we're going to start with an inset 0 1 pixel 0 hsl 54 100 and 50 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 um i can add more than one line to this box shadow instead of writing box shadow box shadow box shadow like that which i don't even know it will work you can actually just separate the values with a 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 gonna do not in set for the second one two pixels zero hsl you guessed it 54 100 and 20 now what we're going to do here is we're going to copy this line and separate it by comma paste it change a couple values three pixels for the next one and take off a couple percent you'll be able to see a pattern here sixteen percent separated by comma this is going to be six pixels this is going to be 14 this one is going to be seven pixels oops this four five six pixels and this is going to be 12 uh 7 pixels 10 just a couple more 8 pixels 8 and this one's going to be 9 pixels and then six percent it basically goes to black end it 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 effect it's gradually going to darker that gives the illusion that it's kind of three-dimensional pretty cool uh now what we're going to do is when we hover and uh click on it we're going to give it some some styles so i'm going to go over here to my css tab it in not final sorry btn-3d2 hover we're going to change the radial gradient so i'm just going to copy it up here i'm going to leave the fallback i don't need 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 hsl 54 100 that's going to stay the same but we're going to change the lightness to 45 on here and 35 on there copy that the two hsl values paste them in each of the styles here save you typing save that check it out in the browser and you're going to hover it's going to work beauty beautifully and then now we're going to do is on the active state we're going to change the radial gradient as well so copy all that and then change hover to active and we're going to change the values from 45 to 43 and 35 to 30. 33 copy both of those paste them in each of the lines here to save you some typing just like that cool and now uh we'll just check it out so here in the browser hover active hover active default hover active looks good okay now below these lines here we're gonna do top two pixels we're gonna bump it down two pixels when we click on it now uh watch what happens over here in the browser click pops down two pixels but there's a problem it moves the entire element down i only wanted to to move the foreground down two pixels not the box shadows so how do we do that because here you can see we kind of do a similar thing it almost sinks into the button like you're clicking you know clicking a button see how it syncs down so that's what we want to do here with the circle we don't want to move the background the that part we want to move just the top so how do we do that easy over here in your active css rule 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 2 pixels that we're bumping down all we need to do is remove the last two lines of box shadow replace that last one with a semicolon save it and now because we've taken two of those out that was two pixels it's going to accommodate this click 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 uh orangey red to yellow from the bottom right bottom left hand corner up into the right hand corner there you could 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 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 uh 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 uh over in our code editor sandbox.css i'm going to go ahead and add that css comment uh just like so gradient bordered buttons you can do something simpler if you want i just like doing that all right so we're gonna check out in the index.html what is what are the classes that we're working with we've got uh gradient button one gradient button two beauty okay so gradient button dash one we're gonna start off and give it a position of relative oh that's weird that's not what we want relative and then uh z index one just to keep it all at one level just in case we have some uh weird stuff going on with uh overlaps and stuff uh display inline block padding uh 20 pixels of 40 40 pixels and then we're going to say font size let's go for 1.4 ram box sizing is gonna be border box so that the 20 and 40 pixels uh 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 uh then we're gonna go background color e seven e 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 it's going to be 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 two 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 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 gonna go with orange red and then the second yellow and then if i save that let's see what that looks like okay so we've got each of the corners uh have that gradient so it 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 red to yellow so the gradient's right but it's just popping into the corners now the way we fix that is using a css 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 could put different values in there but the 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 uh you can also play around with different values and see what happens and there's also different things like fill 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 go our gradient 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 hey gun all right and then color let's uh make the text color orange red as well and then we're going to say um transition this is just for uh when we have a little bit of an effect to hover effect 0.3 seconds is in out i like that one you can use ease you can use linear you can use quad ease in or whatever there's a bunch of different transition properties so transition ease 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 say gradient button dash one and that's going to be hover and we're just going to say background image linear gradient we're going to do linear gradient as well and then two 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 white save 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 okay so now let's jump down to gradient button two let's do that one real quick here so we're gonna do gradient button dash two and we're gonna do position relative z index one that should do the trick padding let's see we probably 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 let's just make it like four pixels and the colors let's do orange red to transparent but right now because we're doing the top right it's not what i want i want it to go to right so orange red to transparent so it's going to fade out leave the color and the transition there and then we're gonna copy the hover as well because we need that for interactive kind of accessibility reasons it's gonna be button two gradient button two and this is gonna be two right this is gonna be to transparent and that should do the trick let's see what happens save it check it out in your browser looks good so far when i hover whoops what's going on there a 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 so we have grading border button one and gradient border button two very simple nice little trick using border images and linear gradients i like it all right now let's do these animated buttons here you can see the first example animated button we got a background pattern and then when you hover it just kind of slightly animates you know from you know from the left to the right and continually goes infinitely until you just kind of take your mouse off the off the button uh you use that you know this is just a simple example you can do anything from gradients to background patterns to background images uh you know to when you hover over a button you can do different interactions but this is just an idea just to give you so that you can uh you know play with it and see what you can come up with yourself in your own sites uh animated button number two is simply just a playing with um playing with padding so it's a little bit of an illusion so it looks like this actually animates from the from the right towards the left and then the chevron comes in from the right but really it's just a play on padding and then some transitions and stuff so we'll get to that here so let's jump into our sandbox i'm just going to add my css comment flag so we know where we are at all right so we've got our animated buttons common flag uh let's start off find out the index file here what are these the classes that we use here animated buttons animated button one and two perfect simple animated button dash one let's start off position relative and then we're gonna go display inline block we're going to add some padding and then say oh 20 pixels top and bottom 40 pixels left and right font size let's do 1.4 rim and then background color double ob3 b4 like that green teal blue thing color all right background image i've got a jpeg not a jpeg uh a png file here pattern.png it's 40x40 pixels it's just a pattern i got online from a siteorigin.com it's just a pattern generator website and i'm going to throw in a url there simply just grab pattern.png because it's in the same directory as the css beauty background size we're going to go for 40 pixels by 40 pixels the border of the button itself let's just go for solid one pixel triple five just to give it a little bit of i don't know definition color white transition uh we're gonna go all ease 0.3 seconds and um now if we save that and check it out it's going to look like this you're going to have your pattern here but hovering doesn't do anything so let's go ahead and fix that so what we're going to do is under this animated button we're going to go animated button one uh hover and then we're gonna do animation animation and say uh well we have to call a name of an animation so we have to create an animation in a keyframe right after this but what we're going to do is we're going to call the animation loading button animation it's gonna go over two seconds it's gonna be a linear um animation so it's not gonna have like an ease in out it's just gonna be a linear movement and infinite never stops so now we need to do is create the keyframes so what i'm going to do here is go ahead and go down just below i'm going to call this keyframes well that's what you have to call it keyframes a css animation now you have to give it a name it's going to be loading button animation this is the name of the animation it can be whatever you want it to be and then nice and simple we're just going to say from and then return print curly braces here background position zero and 0 and then after this we're going to go 2 and then the background position is going to be 40 pixels 0. all right so now if we save this let's see what happens hover it moves beauty it looks great so and then you stop it stops cool so that is the loading button animation for number one and now what we're gonna do is i'm gonna go below this one here and i'm gonna style up the animated button two now what we're gonna do here uh we're gonna basically have the same sort of base styles as animated button number one so i'm just gonna copy everything here paste it in but i am going to not have the pattern we don't need the pattern it's just going to have the color now if i save this let's check it out it should look pretty much the same cool this one has animation this one doesn't okay and now we're gonna do is we're going to create that uh chevron that pops in on the right so we need to declare after this animated button dash two and this will be after the pseudo element position is absolute top fifty percent is where we're going to position it so in the center and from the right uh we could just do like you could do any measurement it could be 20 pixels it could be you know one m i'm going to do 0.6 m and we're going to say content now this is where you want to put the content of the what you want to appear so we can have it be text we can say hi and then the letters you know h and i will pop in but we want it to be the chevron so um i just copy to chevron into my clipboard you can do an arrow you can do any you know you can you could just do like this you know you could do whatever it is you want but uh if you want the chevron in the final css you could just go down to uh line 300ish and then copy the chevron and paste it into here all right and and then after that we're going to transition all ease 0.3 seconds and now let's see what this does so far so it shows up here so 50 apparently doesn't quite get in the right position so we can play with the top over here in the code editor and do something like 30 and that will bring it up a little bit to make it look like it's in the center there we go that'll do and now we want to do is set the opacity to zero we don't want it to appear at first we want it to be totally invisible and now what we want to do is when we hover we want to shift this text over to the left so we'll do that by removing some left padding adding some right padding so it looks like um so it looks like the width of the button stays the same just the text shifts over and because we have a transition it will glide over rather than jump over and we'll have the chevron appear in uh with opacity 100 or 1 for 100 so let's uh go below here and simply say uh animated button number two hover and we're going to do something like padding and 20 pixels 60 pixels on the right which is 20 pixels more than usual 20 on the bottom and then 20 on the left which is um i believe 20 pixels less than usual so 60s actually it's normally 20 40 20 40. so we're doing 20 60 20 20. so it's going to give the illusion of the same width but the text sliding over and what we're going to do now is add in that after pseudo element so animated button two hover and then the after pseudo element it's going to be right we're going to move it in from the right we're going to change it to something like 1.2 m rather than 0.6 m so double the the distance and then opacity will be one save that let's check it out let's hover over that button boom look at that it slides over it looks like the chevron is sliding in and the text is sliding over to accommodate it and that's the illusion we're giving but really what's happening is that we're changing the padding on the left and the right i'm making the chevron appear just by changing those measurements but because we have transition it's actually animating those padding adjustments giving the illusion that we're sliding the text over and sliding in the chevron from thin air so it's pretty cool effect and then this one is that sliding background pattern all right so now we're going to coat up these toggle switch ui buttons now i want to show you something a little interesting about this these buttons are different or these switches are different than the previous examples these up here are just buttons so we're so we're actually using button tags let me show you here in the html right here you can see all these examples are actually button tags whereas down here in the toggle switch ui buttons we're actually using a labels wrapping the entire thing then we have an input and then a span so this input is a checkbox input and we're using that to toggle we're going to be using that to tell css you know when the check box is toggled to checked and unchecked and so let's go back over here to the browser and if i go up to the sand box you're going to see toggle switch ui buttons so they're actually just check boxes so this one's the click me to activate one and this one is just the toggle so we're going to be using css to manipulate the the view of this checkbox into an actual switch this is what's cool about css3 is you could do really cool things like this you could take an element itself and completely uh transform it into something totally different to serve the purpose of your website or your application so let's jump into our code editor again we're going to go to our sandbox and let's go right to the bottom here below our last bit of code animated buttons i'm going to put a new css comment up here this is the toggle switch ui buttons okay and now let's get started we're going to start off with the toggle buttons now the classes that we're using here jump into our html you're going to see if i go up here right here toggle classes toggle one toggle one input and toggle one button and then toggle two uses the same naming conventions just with toggle two all right so let's jump in here we're gonna start off and say toggle dash one and let's we're gonna start off because this is not a button it's not grabbing the helvetica font family that we've been using it's falling back to the body's font family which is like roboto or something so we're going to change the font family and override that to a simple helvetica ariel and then sans serif just a nice and simple font stack uh display inline block we're going to need to use that vertical align top this is just some housekeeping right here margin 0 oops 0 15 pixels zero zero save that if i go over here to my browser um you're going to see it just kind of went a little bit wonky uh you know this one's now lined up to the top that's what we want we want everything to be consistent so that when we're working we're working across all the browsers from a similar state whereas when i don't have vertical line top and the margins and the display in line blocks some browsers interpret you know default checkbox style in different ways so we want to remove those inconsistencies and kind of start from the same place that's what we just did there back to our code editor now let's go below that all we're going to do here is we're going to tab in one and i'm going to say toggle one now i'm going to select so double underscore input that's the css class that we used and all i'm going to say is display none so i want to remove that input altogether i don't want to see it because now what i want to do is below that so that will make that input disappear what i want to do now is select the toggle dash 1 button so that's actually the span tag that's a sibling of the input this is where the magic happens we're going to style that up to look like a toggle switch so we're going to go position whoops position relative we're going to say display inline block we're going to go font size 14 pixels uh or actually let's be better about that one ram because that's the default root body size 14 pixels i believe line height 20 pixels text transform uh we want that to be upper case and backgroundcolor let's do something like f2395a and then the border we're going to do solid one pixel seam uh value is up here border okay now we're doing color white we're going to do the width of the switch itself is going to be 80 pixels height is 30 pixels we want that to be hard-coded transition i'm gonna do um all point 0.3 seconds and then ease just something simple and if you want you can do browser prefixes for that you can also check out the can i use website at the bottom of all each lesson there's a link there to the can i use website where you could type in the css property you want to see if that's cross browser compatible and what different prefixes you need to use but i'm just going to use the default one because whatever and the cursor i don't need to do that i did that default already i believe nope this is a span so i need to do cursor pointer because the span tag doesn't do a default cursor uh mario hand this one with the glove i don't know if that was offensive to somebody but um we want to make it look like a button so we we need the interaction to behave like a button which gives us the mario hand mario glove cursor pointer okay that should just really be cursor mario glove you know what i mean pointer okay enough about that okay so now what if we just pop over here to the browser check out what we got so far so now we got the background of that switch so let's keep going back here in the code editor now what we're going to do is select the toggle one button before sudo element we're going to create something here we're going to create something out of nothing out of thin air position absolute uh when you're when you're working with a pseudo element you want it to appear you need to absolutely position it you need to give it a content uh which we're going to get to so let's go uh well content let's make it say off we want it to say off a lot of the time we'll just do an empty string but let's just say off or we're gonna go display inline block i'm gonna go height 20 pixels padding zero and three pixels on the left and the right background color we want it to be white so we can see it on that kind of uh that that salmony color not farm salmon fresh salmon there's a difference color is going to be the f2 it's going to be that f2395a the salmony color we already did the content let's do transition is going to be uh all 0.3 seconds ease and now let's save it and see what we got let's see what we can see all right so here is in the browser you can see the off it's right there it's not centered so we're going to center that just by doing some positioning just to roughly center it so let's do that after position i like doing my top six pixel right after the position because it's related and then left 40 pixels because it's off i want it to be far over to the right so let's see where that puts it perfect almost dead center it's a lit looks like it could maybe do like top five pixels over here now let's go back to the browsers check it out that looks a bit better to me cool so off the off switch is there it doesn't work yet but it will uh so now what we want to do is this when i touch this this element is a span tag but what i want to be able to do is when i click it when i click it with my mouse i want it to well here let's go to our index what's going to happen is when i click on the label because see how the label here is wrapping everything because we're using the four attribute here it's looking for for toggle one which is the id toggle one so it's looking for the input which is hidden but it still will interact normally so when i click on the label it's going to toggle that input because of this four attribute connecting it to the id right here so that means when i'm clicking this label the input is still the checkbox is toggling from on to off css can access that can find out if the input the checkbox is being toggled on and off and then we can manipulate the style based on if it's on or to off this is where the magic happens so let's go back to the sandbox and what we're going to do now is we're going to say toggle one input checked so it's going to match it's going to basically style the checked version so this is selecting the checked version of the of the input of the checkbox but i don't actually want to style that checkbox because i can't see it i want to select its sibling it's direct sibling immediately after it which is the span tag so we use that with the adjacent sibling selector it's a combinator so it combines it allows me to look for the input that's checked but select its direct sibling which is going to be the toggle dash one underscore button so i'm selecting that but only if this is check see what's happening there i'm going to say background color or our background i'm going to change it to 0 0 b 3 b 4 and the border i'm going to change to solid one pixel the same color now when i save that let's see what happens when i click see how change in the background color so when it's checked the checkbox is checked it is changing the background color and now it's not checked now all i need to do is have that this switch change to on to move over to the left so back in our code editor we can do that really easily by selecting the toggle one input checked the adjacent sibling selector we're going to select toggle one button but the before pseudo element the one that is this one right here this before selector we're going to select that when this is checked and we're going to modify the style so we're going to change the position to left 5 pixels rather than 40 and we're going to say content is going to change to on rather than off and the color of the text is going to be zero zero b three b four save that now watch the magic here in the browser click the toggle switch bam slides over just like that the position content and color change turn it off slides back over just like that beauty looks really really good i might even change the position here just like a little bit of a detail uh let's do left i don't know 38 see what that looks like that looks better to me all right now let's go to this next toggle switch ui button right here the click me to activate one uh what we're gonna do here it's a similar it's essentially the same mark at the same htm markup so you can see here when i click on the label it toggles the checkbox which is what we're going to use in css3 to to kind of manipulate the visual so over here in a code editor let's go down to sandbox css and let's keep coding the next toggle button so the class is toggle dash 2 and let's just do some housekeeping so font family helvetica ariel sans serif and then we're going to do the font size is going to be let's do one rim actually let's make it smaller let's do 0.8 rem make it small a little bit a little bit smaller display inline block and then we're going to do vertical align it's going to be top margin 0 5 15 pixel 0 0 and then let's keep going so and under toggle 2 tab it in one just for organization toggle 2 double underscore input now we're going to select that actual input this is the checkbox input and we're going to hide that display none we don't want to see it and then under that we're going to do toggle dash 2 double underscore button now we're selecting that span tag that is the adjacent sibling to the input we're going to do position relative we're going to do display inline block line height 20 pixels should do the trick text transform upper case background is gonna be white uh we're gonna change the color to aaa and the border is gonna be solid one pixel triple c heading let's do 5 pixels in the top 10 on the right 5 on the bottom 30 on the left you'll see why in a moment and then transition we're going to do the same we've been doing for all of them is all 0.3 seconds and then just ease cursor pointer because this is a span tag we need to we need it to behave like a button so we need the mario the mario glove save that let's check out what it looks like in the browser click me to activate cool beautiful very simple kind of white it's got that thin hairline on the outside 30 pixels on the left side of padding this is going to going to allow us to create a little uh element there to just make it look a little bit more interesting so maybe down here i'll show you we've got a little square we're gonna play with that okay so back here in the code editor let's uh let's go toggle to button before pseudoelement and we're going to position absolute top 10 pixels left 10 pixels and we're going to do display inline block we're going to say width is 10 pixels height is 10 pixels the background will be triple c content is going to be just an empty string so that we can actually see the before pseudo element and the transition is going to be all 0.3 seconds ease save that let's see what it looks like here in the browser just a simple square let's do something more interesting and make it a circle so all we got to do here is just add in the css border radius 100 alternatively you could do 10 pixels because we know the fixed width and height but i just like 100 because if we change the the width and the height of the element then the border radius 100 will cover our bases that's going to give us a nice circle over here in the browser beauty i like it all right and now what we're going to do is go back to our code editor below that we're going to style up the we're going to select the checked state of the input because we click that label it turns on the check box we're going to select that but we're going to select it's with the adjacent sibling selector we're going to select the the span tag that is the adjacent sibling so that we can style it so we're going to do toggle dash 2 uh input this is the checked state and then the adjacent sibling selector toggle dash two button and then the before pseudo element we're selecting this thing right here when the check box has been checked and we're going to style that up by saying the background is going to change to double o b3b4 the border color is going to change to the same color and the color of the text will be white and let's save the actually no not the before we're not styling this yet just the button itself so save that so we got the input checked the toggle to button span tag so let's see what happens over here in our browser so click it changes the background color the font uh the font color the background and the border color perfect go back to your code editor one last thing one last little bit of css toggle dash two input the checked state of that input adjacent sibling selector toggle to button now we're selecting the board before pseudo element and we're just going to say background color is going to change to white now let's see what that is that's that little circle that we created go back to your browser click it changes to white and then goes back to gray white gray so those are your buttons there we go we did a lot of css three there we did the facebook style buttons we did the 3d buttons like that the gradient border buttons the animated buttons with the background moving and then that kind of manipulating the padding and doing some transitions we did the toggle switches and uh this toggle switch here so a nice little intro to css3 doing something that's practical that you can use in your websites right now so hope you enjoyed day one i know that was a lot to cover hang tight for day two tomorrow i'll catch you there we're gonna be doing some really fun stuff then so catch you later have a good day byehey what's up welcome to day one of css3 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 uh right here in the browser so right here over in the browser this is day one uh css3 fancy buttons i'm calling it uh we're going to be making some buttons exclusively with css3 just to kind of wet your whistle and 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 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 css and 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 uh 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 let's 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 going to be doing we've got the facebook style buttons we've got the 3d buttons you know with some 3d cool effects and the circle and all that sort of stuff we got the gradient bordered buttons with some cool hover effects you can see that uh here the border of these buttons have gradients that's a css3 kind of hacking there animated button 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 in the button and 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 css3 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 i just click the link to download the course files and you'll be given a file that or 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.css file which you're going to be using to add your own css and a final css file which has everything that you need to reference if you go through the code you mess 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 css is what styles over here in the browser this stuff over here so the sandbox styles this uh 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 file in your browser i'm using atom uh 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 uh 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.css 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 not waste 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 btn and then we're going to say border radius 2 pixels let's do font size 0.9 ram that's referencing the the root font size rather than the parent font size that's a cool css3 feature padding we're going to go 6 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 we're going to start adding some box shadows so just to be um up to date here we're going to use moz box shadow and then i'm going to go ahead and say inset and i'll explain this in a minute 0 1 pixel 0 0 and then a color 4d73 bf i'm going to copy that whoa that needs to be a pound sign not a dollar sign paste that a couple times the second one i'm going to change to webkit and this last one is just box shadow and then i'm going to tab the uh the rule here whoops the style so that we can have them line up properly beautiful all right so moz is from mozilla browsers webkit is for webkit-based browsers and box shadow is just the fallback that uh 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 css3 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 say css3 box shadow and where it works it works in these versions of ie firefox chrome safari and you know you can kind of see so basically it says um unprefixed 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 94.88 of browsers are going to support the unprefixed box shadow so that's pretty cool let's see safari 6 ios default browser ios 6 don't work with zero pixel value for blur 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 uh 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 div it's going to be the box shadows within the element rather than on the outside casting a shadow behind it it's going to be inside the element itself the first 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 shifted to the right if you put negative five it's gonna go shift it 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 uh if you put a negative number like negative five it's going to be shifted up and then the second uh the third number here is the the blur radius and that's how blurry you want that box shadow uh zero would mean a sharp line and like 10 pixels would be a blurry box shadow depending on the effect you want and the this one is the spread radius so if you want it to be a really big you know 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 head 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 4 2 6 7 b2 just for the background color border solid 1 pixel same color as the previous color there that's the facebook bluey purple color color of the text is going to just be white text shadow let's go for 0 1 pixel 0 and then 3 3 5 9 a 5 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 we've 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 looks great now we don't have any hover or active effects when you interact with the buttons so let's do that over here in the code editor i'm going to go down a couple spaces and tab in one 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 tab in i know that this rule that i'm doing so facebook style dark and then um hover i know that this rule is directly related to this rule right here whereas these two are not uh 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 2b54a7 and save that and then we're going to copy this and paste it and change the hover to active so that what i'm going to do here is i'm going to change the background to 1 d 4 6 9 8 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 active state a little bit darker still the border is dark looks great all right let's style 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 6 f 7 f 9. the border is going to be solid 1 pixel c e d o d 4 0 d4 the border radius we already covered that the color the text color is going to be 4 b 4 f 5 6. i believe that's right yep it's like a gray 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 uh and now we need to do is add the the hover and active states for that button as well so a couple returns down tab it in facebook style light hover and all we're going to do is change the background to e9 ebe and then we're going to copy this whole rule and change this one to active and then we're just going to change the background to d8 dade copy that and what we're going to do is change the border color 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 we're going to be coding the 3d css3 buttons we're still in the fancy buttons section of the course day one but we're gonna do the 3d buttons now so here in the browser you can see the two 3d buttons that we're 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 organize and read so what we're going to be doing now is we're going to be selecting 3d buttons here uh we're going to be doing the button 3d one let me if i go up here actually button 3d1 and button3d2 that's what we're going to be selecting so let's go ahead and select button a 3d one and that is going to uh 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 padding's me 15 pixels 15 pixels top and bottom 24 pixels on the left and the right the font size we're going to do 1.4 rim when you're using m it's relative to the parent element whereas when you're using ram it's relative to the root so it's just more consistent it's a nice little um measurement for css3 box shadow for uh for this we're gonna do box shadow we're gonna say negative six pixels six pixels zero whoops that's five pixels zero and then we're going to do hsl for hue saturation and whatever that is hsl so 16 100 and then 30 16 is the hue 100 is the saturation and then 30 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 hsl 16 100 and then 40 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 can position the element based on uh when we hover it so in the box shadow we're gonna change it a little bit to negative three pixels three pixels zero and then uh hsl 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 uh 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 a hover and that's going to be simple we're just going to change the background to hsl 16 145 for lightness so it's gonna be a little bit lighter so hover uh 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 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 the before uh let me show you here so we're gonna do three button 3d one and then two colons if we go before it's like a virtual it's like a pseudo element of the here we go for 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 thin air that's connected to this div so what we're going to do is we're going to use that before pseudo element position it absolute this is where the magic happens it's pretty cool display block content we need to do this in order to for it to appear on the screen it needs to have the content uh and an empty string you can put text in there too if you want which we'll do at some point height zero width zero what 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 uh and let's see this it's going to be solid 6 pixels transparent whoa that is that word transparent uh now the border width needs to be the size of the elements box shadow so the box shadow here uh 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 gonna do border whoops border right solid six pixels hsl we're going to do that color there 16 130. 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 in our code editor we're going to say border left with 0 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 6 pixels so if i were to comment this out and save it now watch here in the browser as i refresh so i move it back over it's just when i add zero as the 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 over here in the code editor is zero it just cleans it up a little bit so that doesn't mess with my measurements when we move it uh the 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 0 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 fit it in right here like a puzzle piece like tetris and the left if i were to say left 0 what that's going to do is just put it over here in the browser it's just going to 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 save 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 triangle with borders and moving it with positioning into that corner right here to give the illusion it's just this is cool okay so we're going to do 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 element so 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 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 element 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 going to be let me 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 is going to be solid 6 pixels and then we have that hsl we're going to copy that color like so border bottom width whoops is zero pixels so now if i save that come over here and you can 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 to the box there's nothing in the div at all the height is zero and the width is 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 css3 so the the border top is six pixels and the border bottom is going to be zero and the oh so you can see here the border transparent all the borders are transparent so if i were to remove the border top uh over right and then go back here in the browser refresh you can 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 color save it now it's going to show and then the border bottom width i'm just making it zero so that it collapses so it doesn't give us this messy you know 12 pixel box when all i need is six pixels does that make sense i hope it does it's quite simple and awesome it's a pretty cool little concept to create css3 triangles okay 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 let's uh let's go here we're gonna go bottom negative six pixels in the browser pop over here look at that it moved it all the way to the bottom now we have this effect that it's connected it's quite magical cool okay 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 1 active and then before so this means when it's active i want to select the before pseudo element and we're going to change the border to solid 3 pixels rather than 6 pixels because it needs to be the size of the border width transparent perfect the border right is going to be solid 3 pixels it's going to be that hsl up here copying that pasting that and then the border left width is going to be three uh 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 okay something went weird there maybe i do need to to declare the border left width to zero let's see what that does so i needed to do the border left with to zero for some reason uh 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 a pseudo element border is going to be solid 3 pixels the border top is going to be solid 3 pixels and then the border bottom width is going to be 0 and then the bottom is gonna 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 all right now let's do these uh the second 3d button here the circle looks a little bit like this it's a circle it's got a radial gradient uh when you've got this back here this kind of depth to it so when you it looks like it's popping off the the background and then 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 uh and now i'm going to add that comment flag for 3d button number two so i know where i am okay and first thing i'm going to do is i'm going to select that uh button so it's the class of btn-3d2 we're 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 uh something declared a fallback background we're going to change have it be kind of like a yellow ecd 300 and then that's just 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 webkit 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 can 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 so i'm going to do webkit oh moz 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 be using hsl again for hue saturation saturation and lightness the hue is 54 100 for the saturation so fully saturated and 50 in terms of lightness so slightly dark not 100 like white not zero like black we just wanted to be in the middle uh and then i'm gonna do another hsl i'm gonna do the same color the same hue and saturation but different lightness 40 so i'm going to copy this paste based based change the first the second browser prefix to the letter o for opera and then the third one to moz for mozilla and the last one just remove the prefix altogether that's the standard syntax that right there is going to give you a radial gradient check it over in your browser looks a little bit like that nice fine and dandy beauty let's uh move down back here in our code editor font size we're going to say 1.4 ram and then we're going to go ahead and do some text shadows and that's going to be 0 negative 1 pixel 0 and then c 3 a f 0 7. what's that negative 1 pixel do that's the vertical offset for the text shadow so if i had a positive number like one pixel the text shadow would be one uh 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 uh offset sorry and this is the blur the third value is the blur i don't want any blur and i want any horizontal offset i just want negative one uh 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 got that hsl again we're going to do 54 100 percent and 20 so a little bit dark and then we got the border radius that's going to be 100 for full circle height 120 pixels width 100 20 pixels z index four uh because we're going to be playing with some positioning of the z index because we're going to have that background uh behind it we want to make sure it's above you know there's a method to my madness okay so z index four uh now let's check it out in the browser perfect circle looks great you can see uh the text here look at the text shadow you can see that slight dark gr yellow it looks like the 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 was 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 uh you know you take like a stamp like it's stamped inside of it okay now we're gonna do watch this when i click this it has this gnarly looking outline no outline doesn't let me do border radius so we're just gonna 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 gonna do something else all right we're gonna do some box shadows we're gonna create this effect right here over in the browser it gives this cascading effect that makes it look like it's lifted off of 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 box shadow we're going to start with an inset 0 1 pixel 0 hsl 54 100 and 50 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 um i can add more than one line to this box shadow instead of writing box shadow box shadow box shadow like that which i don't even know it will work you can actually just separate the values with a 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 gonna do not in set for the second one two pixels zero hsl you guessed it 54 100 and 20 now what we're going to do here is we're going to copy this line and separate it by comma paste it change a couple values three pixels for the next one and take off a couple percent you'll be able to see a pattern here sixteen percent separated by comma this is going to be six pixels this is going to be 14 this one is going to be seven pixels oops this four five six pixels and this is going to be 12 uh 7 pixels 10 just a couple more 8 pixels 8 and this one's going to be 9 pixels and then six percent it basically goes to black end it 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 effect it's gradually going to darker that gives the illusion that it's kind of three-dimensional pretty cool uh now what we're going to do is when we hover and uh click on it we're going to give it some some styles so i'm going to go over here to my css tab it in not final sorry btn-3d2 hover we're going to change the radial gradient so i'm just going to copy it up here i'm going to leave the fallback i don't need 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 hsl 54 100 that's going to stay the same but we're going to change the lightness to 45 on here and 35 on there copy that the two hsl values paste them in each of the styles here save you typing save that check it out in the browser and you're going to hover it's going to work beauty beautifully and then now we're going to do is on the active state we're going to change the radial gradient as well so copy all that and then change hover to active and we're going to change the values from 45 to 43 and 35 to 30. 33 copy both of those paste them in each of the lines here to save you some typing just like that cool and now uh we'll just check it out so here in the browser hover active hover active default hover active looks good okay now below these lines here we're gonna do top two pixels we're gonna bump it down two pixels when we click on it now uh watch what happens over here in the browser click pops down two pixels but there's a problem it moves the entire element down i only wanted to to move the foreground down two pixels not the box shadows so how do we do that because here you can see we kind of do a similar thing it almost sinks into the button like you're clicking you know clicking a button see how it syncs down so that's what we want to do here with the circle we don't want to move the background the that part we want to move just the top so how do we do that easy over here in your active css rule 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 2 pixels that we're bumping down all we need to do is remove the last two lines of box shadow replace that last one with a semicolon save it and now because we've taken two of those out that was two pixels it's going to accommodate this click 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 uh orangey red to yellow from the bottom right bottom left hand corner up into the right hand corner there you could 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 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 uh 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 uh over in our code editor sandbox.css i'm going to go ahead and add that css comment uh just like so gradient bordered buttons you can do something simpler if you want i just like doing that all right so we're gonna check out in the index.html what is what are the classes that we're working with we've got uh gradient button one gradient button two beauty okay so gradient button dash one we're gonna start off and give it a position of relative oh that's weird that's not what we want relative and then uh z index one just to keep it all at one level just in case we have some uh weird stuff going on with uh overlaps and stuff uh display inline block padding uh 20 pixels of 40 40 pixels and then we're going to say font size let's go for 1.4 ram box sizing is gonna be border box so that the 20 and 40 pixels uh 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 uh then we're gonna go background color e seven e 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 it's going to be 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 two 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 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 gonna go with orange red and then the second yellow and then if i save that let's see what that looks like okay so we've got each of the corners uh have that gradient so it 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 red to yellow so the gradient's right but it's just popping into the corners now the way we fix that is using a css 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 could put different values in there but the 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 uh you can also play around with different values and see what happens and there's also different things like fill 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 go our gradient 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 hey gun all right and then color let's uh make the text color orange red as well and then we're going to say um transition this is just for uh when we have a little bit of an effect to hover effect 0.3 seconds is in out i like that one you can use ease you can use linear you can use quad ease in or whatever there's a bunch of different transition properties so transition ease 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 say gradient button dash one and that's going to be hover and we're just going to say background image linear gradient we're going to do linear gradient as well and then two 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 white save 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 okay so now let's jump down to gradient button two let's do that one real quick here so we're gonna do gradient button dash two and we're gonna do position relative z index one that should do the trick padding let's see we probably 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 let's just make it like four pixels and the colors let's do orange red to transparent but right now because we're doing the top right it's not what i want i want it to go to right so orange red to transparent so it's going to fade out leave the color and the transition there and then we're gonna copy the hover as well because we need that for interactive kind of accessibility reasons it's gonna be button two gradient button two and this is gonna be two right this is gonna be to transparent and that should do the trick let's see what happens save it check it out in your browser looks good so far when i hover whoops what's going on there a 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 so we have grading border button one and gradient border button two very simple nice little trick using border images and linear gradients i like it all right now let's do these animated buttons here you can see the first example animated button we got a background pattern and then when you hover it just kind of slightly animates you know from you know from the left to the right and continually goes infinitely until you just kind of take your mouse off the off the button uh you use that you know this is just a simple example you can do anything from gradients to background patterns to background images uh you know to when you hover over a button you can do different interactions but this is just an idea just to give you so that you can uh you know play with it and see what you can come up with yourself in your own sites uh animated button number two is simply just a playing with um playing with padding so it's a little bit of an illusion so it looks like this actually animates from the from the right towards the left and then the chevron comes in from the right but really it's just a play on padding and then some transitions and stuff so we'll get to that here so let's jump into our sandbox i'm just going to add my css comment flag so we know where we are at all right so we've got our animated buttons common flag uh let's start off find out the index file here what are these the classes that we use here animated buttons animated button one and two perfect simple animated button dash one let's start off position relative and then we're gonna go display inline block we're going to add some padding and then say oh 20 pixels top and bottom 40 pixels left and right font size let's do 1.4 rim and then background color double ob3 b4 like that green teal blue thing color all right background image i've got a jpeg not a jpeg uh a png file here pattern.png it's 40x40 pixels it's just a pattern i got online from a siteorigin.com it's just a pattern generator website and i'm going to throw in a url there simply just grab pattern.png because it's in the same directory as the css beauty background size we're going to go for 40 pixels by 40 pixels the border of the button itself let's just go for solid one pixel triple five just to give it a little bit of i don't know definition color white transition uh we're gonna go all ease 0.3 seconds and um now if we save that and check it out it's going to look like this you're going to have your pattern here but hovering doesn't do anything so let's go ahead and fix that so what we're going to do is under this animated button we're going to go animated button one uh hover and then we're gonna do animation animation and say uh well we have to call a name of an animation so we have to create an animation in a keyframe right after this but what we're going to do is we're going to call the animation loading button animation it's gonna go over two seconds it's gonna be a linear um animation so it's not gonna have like an ease in out it's just gonna be a linear movement and infinite never stops so now we need to do is create the keyframes so what i'm going to do here is go ahead and go down just below i'm going to call this keyframes well that's what you have to call it keyframes a css animation now you have to give it a name it's going to be loading button animation this is the name of the animation it can be whatever you want it to be and then nice and simple we're just going to say from and then return print curly braces here background position zero and 0 and then after this we're going to go 2 and then the background position is going to be 40 pixels 0. all right so now if we save this let's see what happens hover it moves beauty it looks great so and then you stop it stops cool so that is the loading button animation for number one and now what we're gonna do is i'm gonna go below this one here and i'm gonna style up the animated button two now what we're gonna do here uh we're gonna basically have the same sort of base styles as animated button number one so i'm just gonna copy everything here paste it in but i am going to not have the pattern we don't need the pattern it's just going to have the color now if i save this let's check it out it should look pretty much the same cool this one has animation this one doesn't okay and now we're gonna do is we're going to create that uh chevron that pops in on the right so we need to declare after this animated button dash two and this will be after the pseudo element position is absolute top fifty percent is where we're going to position it so in the center and from the right uh we could just do like you could do any measurement it could be 20 pixels it could be you know one m i'm going to do 0.6 m and we're going to say content now this is where you want to put the content of the what you want to appear so we can have it be text we can say hi and then the letters you know h and i will pop in but we want it to be the chevron so um i just copy to chevron into my clipboard you can do an arrow you can do any you know you can you could just do like this you know you could do whatever it is you want but uh if you want the chevron in the final css you could just go down to uh line 300ish and then copy the chevron and paste it into here all right and and then after that we're going to transition all ease 0.3 seconds and now let's see what this does so far so it shows up here so 50 apparently doesn't quite get in the right position so we can play with the top over here in the code editor and do something like 30 and that will bring it up a little bit to make it look like it's in the center there we go that'll do and now we want to do is set the opacity to zero we don't want it to appear at first we want it to be totally invisible and now what we want to do is when we hover we want to shift this text over to the left so we'll do that by removing some left padding adding some right padding so it looks like um so it looks like the width of the button stays the same just the text shifts over and because we have a transition it will glide over rather than jump over and we'll have the chevron appear in uh with opacity 100 or 1 for 100 so let's uh go below here and simply say uh animated button number two hover and we're going to do something like padding and 20 pixels 60 pixels on the right which is 20 pixels more than usual 20 on the bottom and then 20 on the left which is um i believe 20 pixels less than usual so 60s actually it's normally 20 40 20 40. so we're doing 20 60 20 20. so it's going to give the illusion of the same width but the text sliding over and what we're going to do now is add in that after pseudo element so animated button two hover and then the after pseudo element it's going to be right we're going to move it in from the right we're going to change it to something like 1.2 m rather than 0.6 m so double the the distance and then opacity will be one save that let's check it out let's hover over that button boom look at that it slides over it looks like the chevron is sliding in and the text is sliding over to accommodate it and that's the illusion we're giving but really what's happening is that we're changing the padding on the left and the right i'm making the chevron appear just by changing those measurements but because we have transition it's actually animating those padding adjustments giving the illusion that we're sliding the text over and sliding in the chevron from thin air so it's pretty cool effect and then this one is that sliding background pattern all right so now we're going to coat up these toggle switch ui buttons now i want to show you something a little interesting about this these buttons are different or these switches are different than the previous examples these up here are just buttons so we're so we're actually using button tags let me show you here in the html right here you can see all these examples are actually button tags whereas down here in the toggle switch ui buttons we're actually using a labels wrapping the entire thing then we have an input and then a span so this input is a checkbox input and we're using that to toggle we're going to be using that to tell css you know when the check box is toggled to checked and unchecked and so let's go back over here to the browser and if i go up to the sand box you're going to see toggle switch ui buttons so they're actually just check boxes so this one's the click me to activate one and this one is just the toggle so we're going to be using css to manipulate the the view of this checkbox into an actual switch this is what's cool about css3 is you could do really cool things like this you could take an element itself and completely uh transform it into something totally different to serve the purpose of your website or your application so let's jump into our code editor again we're going to go to our sandbox and let's go right to the bottom here below our last bit of code animated buttons i'm going to put a new css comment up here this is the toggle switch ui buttons okay and now let's get started we're going to start off with the toggle buttons now the classes that we're using here jump into our html you're going to see if i go up here right here toggle classes toggle one toggle one input and toggle one button and then toggle two uses the same naming conventions just with toggle two all right so let's jump in here we're gonna start off and say toggle dash one and let's we're gonna start off because this is not a button it's not grabbing the helvetica font family that we've been using it's falling back to the body's font family which is like roboto or something so we're going to change the font family and override that to a simple helvetica ariel and then sans serif just a nice and simple font stack uh display inline block we're going to need to use that vertical align top this is just some housekeeping right here margin 0 oops 0 15 pixels zero zero save that if i go over here to my browser um you're going to see it just kind of went a little bit wonky uh you know this one's now lined up to the top that's what we want we want everything to be consistent so that when we're working we're working across all the browsers from a similar state whereas when i don't have vertical line top and the margins and the display in line blocks some browsers interpret you know default checkbox style in different ways so we want to remove those inconsistencies and kind of start from the same place that's what we just did there back to our code editor now let's go below that all we're going to do here is we're going to tab in one and i'm going to say toggle one now i'm going to select so double underscore input that's the css class that we used and all i'm going to say is display none so i want to remove that input altogether i don't want to see it because now what i want to do is below that so that will make that input disappear what i want to do now is select the toggle dash 1 button so that's actually the span tag that's a sibling of the input this is where the magic happens we're going to style that up to look like a toggle switch so we're going to go position whoops position relative we're going to say display inline block we're going to go font size 14 pixels uh or actually let's be better about that one ram because that's the default root body size 14 pixels i believe line height 20 pixels text transform uh we want that to be upper case and backgroundcolor let's do something like f2395a and then the border we're going to do solid one pixel seam uh value is up here border okay now we're doing color white we're going to do the width of the switch itself is going to be 80 pixels height is 30 pixels we want that to be hard-coded transition i'm gonna do um all point 0.3 seconds and then ease just something simple and if you want you can do browser prefixes for that you can also check out the can i use website at the bottom of all each lesson there's a link there to the can i use website where you could type in the css property you want to see if that's cross browser compatible and what different prefixes you need to use but i'm just going to use the default one because whatever and the cursor i don't need to do that i did that default already i believe nope this is a span so i need to do cursor pointer because the span tag doesn't do a default cursor uh mario hand this one with the glove i don't know if that was offensive to somebody but um we want to make it look like a button so we we need the interaction to behave like a button which gives us the mario hand mario glove cursor pointer okay that should just really be cursor mario glove you know what i mean pointer okay enough about that okay so now what if we just pop over here to the browser check out what we got so far so now we got the background of that switch so let's keep going back here in the code editor now what we're going to do is select the toggle one button before sudo element we're going to create something here we're going to create something out of nothing out of thin air position absolute uh when you're when you're working with a pseudo element you want it to appear you need to absolutely position it you need to give it a content uh which we're going to get to so let's go uh well content let's make it say off we want it to say off a lot of the time we'll just do an empty string but let's just say off or we're gonna go display inline block i'm gonna go height 20 pixels padding zero and three pixels on the left and the right background color we want it to be white so we can see it on that kind of uh that that salmony color not farm salmon fresh salmon there's a difference color is going to be the f2 it's going to be that f2395a the salmony color we already did the content let's do transition is going to be uh all 0.3 seconds ease and now let's save it and see what we got let's see what we can see all right so here is in the browser you can see the off it's right there it's not centered so we're going to center that just by doing some positioning just to roughly center it so let's do that after position i like doing my top six pixel right after the position because it's related and then left 40 pixels because it's off i want it to be far over to the right so let's see where that puts it perfect almost dead center it's a lit looks like it could maybe do like top five pixels over here now let's go back to the browsers check it out that looks a bit better to me cool so off the off switch is there it doesn't work yet but it will uh so now what we want to do is this when i touch this this element is a span tag but what i want to be able to do is when i click it when i click it with my mouse i want it to well here let's go to our index what's going to happen is when i click on the label because see how the label here is wrapping everything because we're using the four attribute here it's looking for for toggle one which is the id toggle one so it's looking for the input which is hidden but it still will interact normally so when i click on the label it's going to toggle that input because of this four attribute connecting it to the id right here so that means when i'm clicking this label the input is still the checkbox is toggling from on to off css can access that can find out if the input the checkbox is being toggled on and off and then we can manipulate the style based on if it's on or to off this is where the magic happens so let's go back to the sandbox and what we're going to do now is we're going to say toggle one input checked so it's going to match it's going to basically style the checked version so this is selecting the checked version of the of the input of the checkbox but i don't actually want to style that checkbox because i can't see it i want to select its sibling it's direct sibling immediately after it which is the span tag so we use that with the adjacent sibling selector it's a combinator so it combines it allows me to look for the input that's checked but select its direct sibling which is going to be the toggle dash one underscore button so i'm selecting that but only if this is check see what's happening there i'm going to say background color or our background i'm going to change it to 0 0 b 3 b 4 and the border i'm going to change to solid one pixel the same color now when i save that let's see what happens when i click see how change in the background color so when it's checked the checkbox is checked it is changing the background color and now it's not checked now all i need to do is have that this switch change to on to move over to the left so back in our code editor we can do that really easily by selecting the toggle one input checked the adjacent sibling selector we're going to select toggle one button but the before pseudo element the one that is this one right here this before selector we're going to select that when this is checked and we're going to modify the style so we're going to change the position to left 5 pixels rather than 40 and we're going to say content is going to change to on rather than off and the color of the text is going to be zero zero b three b four save that now watch the magic here in the browser click the toggle switch bam slides over just like that the position content and color change turn it off slides back over just like that beauty looks really really good i might even change the position here just like a little bit of a detail uh let's do left i don't know 38 see what that looks like that looks better to me all right now let's go to this next toggle switch ui button right here the click me to activate one uh what we're gonna do here it's a similar it's essentially the same mark at the same htm markup so you can see here when i click on the label it toggles the checkbox which is what we're going to use in css3 to to kind of manipulate the visual so over here in a code editor let's go down to sandbox css and let's keep coding the next toggle button so the class is toggle dash 2 and let's just do some housekeeping so font family helvetica ariel sans serif and then we're going to do the font size is going to be let's do one rim actually let's make it smaller let's do 0.8 rem make it small a little bit a little bit smaller display inline block and then we're going to do vertical align it's going to be top margin 0 5 15 pixel 0 0 and then let's keep going so and under toggle 2 tab it in one just for organization toggle 2 double underscore input now we're going to select that actual input this is the checkbox input and we're going to hide that display none we don't want to see it and then under that we're going to do toggle dash 2 double underscore button now we're selecting that span tag that is the adjacent sibling to the input we're going to do position relative we're going to do display inline block line height 20 pixels should do the trick text transform upper case background is gonna be white uh we're gonna change the color to aaa and the border is gonna be solid one pixel triple c heading let's do 5 pixels in the top 10 on the right 5 on the bottom 30 on the left you'll see why in a moment and then transition we're going to do the same we've been doing for all of them is all 0.3 seconds and then just ease cursor pointer because this is a span tag we need to we need it to behave like a button so we need the mario the mario glove save that let's check out what it looks like in the browser click me to activate cool beautiful very simple kind of white it's got that thin hairline on the outside 30 pixels on the left side of padding this is going to going to allow us to create a little uh element there to just make it look a little bit more interesting so maybe down here i'll show you we've got a little square we're gonna play with that okay so back here in the code editor let's uh let's go toggle to button before pseudoelement and we're going to position absolute top 10 pixels left 10 pixels and we're going to do display inline block we're going to say width is 10 pixels height is 10 pixels the background will be triple c content is going to be just an empty string so that we can actually see the before pseudo element and the transition is going to be all 0.3 seconds ease save that let's see what it looks like here in the browser just a simple square let's do something more interesting and make it a circle so all we got to do here is just add in the css border radius 100 alternatively you could do 10 pixels because we know the fixed width and height but i just like 100 because if we change the the width and the height of the element then the border radius 100 will cover our bases that's going to give us a nice circle over here in the browser beauty i like it all right and now what we're going to do is go back to our code editor below that we're going to style up the we're going to select the checked state of the input because we click that label it turns on the check box we're going to select that but we're going to select it's with the adjacent sibling selector we're going to select the the span tag that is the adjacent sibling so that we can style it so we're going to do toggle dash 2 uh input this is the checked state and then the adjacent sibling selector toggle dash two button and then the before pseudo element we're selecting this thing right here when the check box has been checked and we're going to style that up by saying the background is going to change to double o b3b4 the border color is going to change to the same color and the color of the text will be white and let's save the actually no not the before we're not styling this yet just the button itself so save that so we got the input checked the toggle to button span tag so let's see what happens over here in our browser so click it changes the background color the font uh the font color the background and the border color perfect go back to your code editor one last thing one last little bit of css toggle dash two input the checked state of that input adjacent sibling selector toggle to button now we're selecting the board before pseudo element and we're just going to say background color is going to change to white now let's see what that is that's that little circle that we created go back to your browser click it changes to white and then goes back to gray white gray so those are your buttons there we go we did a lot of css three there we did the facebook style buttons we did the 3d buttons like that the gradient border buttons the animated buttons with the background moving and then that kind of manipulating the padding and doing some transitions we did the toggle switches and uh this toggle switch here so a nice little intro to css3 doing something that's practical that you can use in your websites right now so hope you enjoyed day one i know that was a lot to cover hang tight for day two tomorrow i'll catch you there we're gonna be doing some really fun stuff then so catch you later have a good day bye\n"