CSS Button Animation Projects

1. Introduction: Hello, everyone. I am Join the Shortcut. And welcome to the exciting course on CSS animated Hobart buttons. In this class, you are going to deep dive into the world of micro interaction by building 20 different buttons animation project, all using just CSS transition and transformation. Hobart animations may seem small, but they have a huge impact on the user experience. Whether you are a beginner trying to level up your CSS game or a Db pile looking for design inspiration. This course is for you. Each project is short, practical and packed with three tip effects. From growing buttons to sliding cakes, rotating icons, bouncing effect, and more. You will get hands on with real CSS code and learn how to transform boarding buttons into something eye catching and interactive. No libraries, no frameworks, CSS magic. So are you ready to add some animation thread to your web designs? Let's jump and start coding. 2. Creative rotating button effect using css: So this is our first project using CSS transform properties. We are not going to use keyframe to animate the element. So as you can see in this example, here we create a button. If I open my car on this button, here you can see a beautiful button transition effect. So we are going to build today in this project. So let's get to the isal Studio code editor and see how we can create this project. So as you can see, I already opened my isal Studio code editor. And I already create TML file named index dot TML. Also, we create another file style dot CSS, and I already open this website using my live server. This is our website. It's completely blank. Then let's back to the user studio code. At first, inside my body tag, I'm going to add an NCat tag, A, and HI hashtag. Inside this Anca tag, I'm going to type hover Me. Then I'm going to jump into the CSS file style CSS. I already link this file with this estemL document. Here we are going to start this styling. At first, I'm going to target the body tag. Then inside the liss I'm going to assign height, height, and I'm going to assign 100 VH. I want to place the anchor tag middle of this page, so I'm going to use the propriety. Display flakes justify content, Justify content center. Also, I'm going to use align item, align items center. I'm going to set this file. After set this file, if I back to my browser, as you can see, it centered the text, I centered the anchor tag. Now I'm going to open my browser and my code editor side by side. As you can see, here we open my browser and my code editor side by side for our convenience. Using flexbox, we centered this element middle of this page horizontally and vertically. Basically, it has nothing to do with animation. If you want to learn flexbox and greet, you can enroll my other courses. Now, let's style the leak. I want to target this link using its tag name A, and inside the calyces, first property, I'm going to use text decoration, text decoration, text decoration, none, and I'm going to set this file. If I set this file, as you can see, it going to remove this underline from the text. After that, I'm going to assign a font color. So type color, and I'm going to assign black color. I want to use black color font for this example. Then I'm going to define the font family, font family, and I want to use aerial font, aerial. After that, let's turn on the trouble Raf view and Waraph. Then after that, I'm going to assign font size font size, and I want to assign 45 pixel font size, 45 pixel. Then I want to assign Border. Border. I want solid fight pixel border, solid, and border color is black also. Black. Then I want to define padding. Adding from top and bottom, I'm going to define 30 pixel and from left and right, I'm going to assign 80 pixel. At last, I will provide the position of this element, some type position relative. I'm going to set this file. After set this file, this is how our button look like. Now, in order to create nice green background, we need to use before pseudo element. If you don't know any knowledge about pseudo elements, it is allow us to create before the estimL element, otherwise, after the estimal element using CSS. So I will select anchor tag and here I'm going to use before p zero class before d inside the alias, here I'm going to use a property called content, content, and it's a empty content. And to define the empty content, we need to use codes single cops. After that, we need to define the position position and I'm going to use absolute. Also, I need to define the starting position, so I'm going to type lab zero and from the top also zero. So now we have our before pseudo element and its position is top left corner of this link. Right now, before psudoelement is placed at top left corner of this link. Now, let's add the background color. Background color instead of using green, I would like to go with yellow color. I already copy a Higa value for this background color and I'm going to paste it here. It's going to return orange color. And then I'm going to assign height to this before positive element, height, 100%, 100%, and also next, I'm going to assign wed also 100%. And I'm going to set this file. After set this file, this is how it looked like. So now you can see the before positive element appearing as a background color of this anchor tag, and also it take full width and height of this link. But the problem is this element, height the text of this anchor tag. Here we cannot see the Hoberm word. We can easily fix it. If I pass, if I use this propriety Z index, and if I use minus one value, then set this file. Now it resolves the problem. This text will show up again in front of this orange background, and now we need to rotate this yellow background clockwise from this direction. And we need to rotate it from the bottom lip corner. So first, we need to define the transform orgin from which position I want to transform this before positive element, Sandro type transform Oisin and I'm going to provide the value bottom leg from this corner. Then I'm going to use another property called transform, transform, and I'm going to use rotate value, rotate inside the round verses, I want to rotate it up to -90 degree. After I set this file, this is how it look like if I rotate this element -90 degree from that corner and then I'm going to add it transition. Transition transform, and I want to assign once again for this transition 1 second. I want to transition this transform property for 1 second, so it's going to complete the rotation in 1 second. Next, we need to create the Huber selector. If I uber this element, then I want to rotate it up to zero degree. For that, here, I'm going to type. First, I'm going to select the anchor tag, then I'm going to use Huber selector, HoberPosito class, Hover. Then after that, I'm going to select the before posito class before. Then inside the car says, I'm going to use transform property again, transform, and again, I'm going to use rotate value. This time, I want to rotate this element up to zero degree. I want to say I want to move this element to the original osition. Now, after I set this file, if I hober over this link, you can see the result. As you can see, when I hober my car on this element, it rotate the before element zero degree. So it's working. But the problem is we need to hide this orange background outside this box outside this border area. It is very simple to hide this element. For that, you need to go jump into the anchor selector and here you need to use a property called overflow. Overflow herein, and you need to set this file. After set this file, you can see the result. Basically it hide the element outside of this border area, but if I hober my cursor on this element, you can see the result. This time, you can see this beautiful hoar effect, Huber button effect. This background is only visible only in the anctg area. Outside the anchtg area, it not visible because we hide this element. And if you want to change the position of this rotation, yes, you can. Let me show you how, but before I'm going to uncommend this line, because we need to understand how its work. Now this time I want to rotate this element from this corner bottom right corner. So instead of bottom left, I'm going to use bottom right. I'm going to set this one. And now you can see whenever I Hobe my cards are on this element, this orange color element rotate from the bottom right corner. But if I change the value of rotation, if I make it 90 degree instead of using -90 degree and then this file, you can see the different result. This time, it's going to rotate this element from anti glaucois. So if I hop my car on this element, you can see the result. And if I use the overflow property overflow hidden and save it again and hover my caror on this button, you can see the result. So here we change the position of the rotation, if I change the value of this transform origin and transform value. So this is how we can create this beautiful button hover effect without using animation, to use transition properties. Using transition and hover, we can do a lot of things. This is it for this tutorial. In our upcoming Tutorial, we are going to cover lot of animation projects. So thanks for watching this video, Stay tuned for our next Tutorial. 3. Swipe button effect using css: Hello, everyone. In this project, we are going to create this beautiful, nice swipe Heft. When I hover over this link, as you can see, a background swipe smoothly to this button and it's cover the button background. Also, it's cheesy button text color. When I remove my casa, again, it's back to its own position. Let's see how we can create this beautiful Heft. So as you can see side by side, I open my z sto code editor and my browser using Live Server extension, and I already create an TML document named index dot TML. With that, I already include style CSS file in this page. Basically, we are going to create a swipe Hoverifi button. So at first, in my body tag, I'm going to add an anchor tag, A, and hero type hover me. And I'm going to set this file. Up to set this file, as you can see in my page, by default, it place it here at laptop corner. Next, we need to place this link at the middle of this page. For that, we need to jump into the tile dot CSS file. Here, I'm going to select the body tag body then inside the Curses, I'm going to assign height to our body. Height 100 VH, 100 view foot height, and display here I'm going to use flex. Then justify, contain, justify contain center. And also, I'm going to use another property called aligns align items center. And I'm going to set this file. After I set this file, this is how it look like. Now it takes the anchor tag horizontally and vertically middle of this page. Next, we need to make this link nicer. For that, I will target this anchor tag using its tag name A. Then inside the curly recess, at first, I want to remove the underline from this anchor tag. For that, I'm going to use property called text decoration. Text decoration, none. After that, I'm going to assign a color, color, and I want to assign a hexa Value, hashtag, 35, 14 and 35 again. It is a purple colored. Then I'm going to assign font family font family, and here I'm going to assign area. Aerial font. Next, I'm going to assign font size, font size 40 pixel. After that, after that, I'm going to assign border. Border, I want three pixel solid border. I'm going to use the same border coolor as font. I copy the hexa Velo and I'm going to paste it here. Then I'm going to set this file. After I set this file, this is how it looked like. Now we need to add padding in this angle link. For that, I'm going to type padding. From top and bottom, I'm going to add 40 pixel and from left and right, I'm going to add 80 pixel. I'm going to set this file. After I set this file, this is how it looked like. Also we need to define a position. Position and position, I want to assign relative. Also, we need to assign transition because without transition, we cannot animate this button. I'm going to type transition and I'm going to add all and I'm going to run in for 1 second. I pass one and I'm going to set this file. After set this file, this is how it looked like. Now it's look very nicer and now we are going to working on Swipe Effect. So the idea behind this wife effet, we need to create a before pseudo element. That will take up the full width and height of this link. Then we will translate it outside the link. And if we hober this link, then we will remove the translition. So it's going to return to its own place. Now, let's create the pseudo element before pseudo element. At first, I'm going to type, I'm going to set the anchor tag then before. Then inside the class, first, we need to create an empty content. Contain is empty, and it is a empty content. And so we will do in this line. Then we need to define the position, position, and I'm going to assign absolute. Next, we need to place this element at top lip corner. Here I'm going to type lap t zero, top also zero, and I'm going to assign height, height, 100% Width, 100%. Then I'm going to assign the background color, background color, and I'm going to assign the same background color, so I paste this link this hexa V I'm going to set this file. After set this file, as you can see, as you can see, our pseudo element appear above the Huber Mi text and it's bar text. We need to use Z index value to resolve the problem. I'm going to assign Z index, and I'm going to pass value minus one. I'm going to set this file. After set this file, after I set this file, now it go behind the text, but it is not visible because of the text color and the background color is same. And now we are going to create this swiping effect from the late that will be easily done by the transition. So we need to move this element from the XXs direction. So I'm going to use transform property, transform, and I'm going to use translate X value, translate X, Translate x, and here I'm going to pass. -100%. And I'm going to set this file. After I set this file, this is how it looked like. Now it's go beyond the border. Now it move this element 100% lip side because we use minus width. Also, our text is visible because of white background color. Now when I hover over this link, I want the before pseudo element back to its own place. Also I want to change the text color into white. When I hover over this link, so I'm going to select this link, I'm going to create the Hober selector at the red, ATAC, colon, before selector. Then inside the class, I'm going to transform, transform, translate X, and amnopas zero. This means it going back to its own place again. Also, I want to add a smoothing effect, so at transition. With that, we need to define time, so I'm going to define 1 second. So after set this file, when I hover over this link, as you can see it back to its own place again. Now we need to change the font color of this text. Also, we need to hide the background outside the link. And it is very simple to hide the overflow element. Just we need to go and jump into the anchor tag, then we need to use the overflow property overflow hidden. And I'm going to sit this file. Upset this file, as you can see, it hide the element, the fore positive element. And if I hop my cars are on this text, as you can see, again, this slide appear, is back to its own place. So the background is invisible outside ding, and also we got the effect that we want. And finally, let's trace the text colored. So at first, I'm going to select the anchor tag, A, hover. Then inside the car ***, if I ho this link, I want to change the color, color white. I'm going to set this file. So after set this file, if I hover my cursor on this link, as you can see, it's become white and it also happened smoothly because we add transition all in our anchor tag, transition all. Now we understand the concept of swipe effect. If you want to change the direction, yes, you can. You can easily change the direction. You can appear this one, this slide from the right side, also from the top and bottom. Now let's change the direction. I want to appare this slide from the right side. For that, you need to change it on one line. I'm going to duplicate this line and comment out previous one. This one is for lip. I'm going to type in my comment lip side. If I change the value, if I make it positive, then it's going to place this one at right side. After set this file, if I back to my browser and hot this, now you can see it coming from opposite direction, right side of this box. So this is how we can change the direction. I hope now it's clear for you how we can create this effect. Thanks for watching this video, stay tuned for our next project. 4. Button hover Effect: Hello, everyone. In this video, we will be creating beautiful Haeffet. If I hover my cards on this button, you can experience this Ha effect. So let's see how we can weld this beautiful effect. So as you can see, we are in my results studio code editor. And here I already opened my previous TML document in Exot TML. In our body tag, we already create this anchor tag. Also, we link with Style Dot CSS file. And if I jump into the style CSS file, then as you can see, we already align these anchor element horizontally and vertically middle of this page over me. I re use this code because I don't want to make our projects very long. And now I'm going to target this anchor element. I'm going to type A, then inside the clivsF property, I'm going to use padding, padding, and I'm going to assign 40 pixel from top and bottom and 80 pixel from left and right. Then I'm going to use another property called font family. Font family, I'm going to use sensory. San Salk. Next, I'm going to remove the underline, so I'm going to use text decoration. Text decoration, none. After that, I'm going to define the font size. Font size, font size, and I'm going to define 45 pixel. Then I'm going to add a color to this font. Some of you use color, and as a color, I'm going to use hexa value 26, 26, 26, this color code, kind of dark gray. Then I'm going to define letter spacing between the letters. So I want to type letter spacing, and I want to add two pixel letter spacing. Next, I'm going to add border. Border I want to add five pixel and solid border, so it. Also, our border color is the same color as font, copy the color code and I'm going to put it here. After that, we need to define the position position relative, and also we need to define the transition. Transition and I want to transition it for 1 second, one is. I'm going to set this file. After set this file, this is our button look like. Now we need to use a pseudo element, and I'm going to use before pseudo element. It is allow us to create an element before the element. I'm going to create the before posed to select I'm going to, I'm going to target the element A, colon, BF. Then inside the alivss first propity I'm going to use to create an empty content type content, CONTENT content and here I'm going to create an empty content. Then semicolon to end this line. After that, I'm going to define the position. Position, I'm going to use absolute. Then we need to define the position where I want to put this element, this empty content element. I want to put it, I want to place it at that place at that corner. So from the top, I'm going to pass zero and from the left, I'm going to pass also zero. Then I want to define with, and I want to use 100% weight of this container. 100%. Also, I'm going to assign height, height, also 100%. Then we need to define a background color to this element. Background and background color as a background color, I want to assign the same background color, so I copy this one. I paste this one and also, I'm going to add it transition. Transition, I want to transition it for 1 second, and I'm going to set this file. After I set this file, this is how it look like our element cover D text, and we need to use Z index value to make apirDtt again. Now you are not able to see the link anymore, the link text anymore because this before element appear in front of it and we know how to resolve the problem using Z index. Now let's talk about rotate field. Are you remember rotate x with earlier in our previous section, we already learn rotate x and rotate Y vds. Using rotate x, we can rotate our element along the Xaxis and using rotate Y, we can rotate the element along the Y axis. Let me show you that. If I open this website, this is the example of rotate X. If I Her my cursar on this rotate x element, you can see the result. This is how it rotate. I rotate this element 80 degree and if I rotate it 90 degree as you can see, and then hover my cars on it, now it sometimes it completely vanish the element. If I rotate this element to 90 degree, it will make it valish at the same way if I hober my cursor at rotate Y element this option, as you can see, this is how it sued this element. This is what rotate X and rotate Y do. Now let's back to the code. Here, I'm going to use another property called transform, transform, and I'm going to use the value rotate X, this one, I'm going to rotate this element 90 dg degree. I'm going to set this file. After this file, as you can see, it vanish the element because as I told you, if I rotate this element at Xxs from the xs 90 degree, it going to vanish the element. Suppose this is the element. If I rotate the element from the xs at 90 degree, as you can see, it vanish the element. Just you can see a single line. So this is what we apply in this element. It disappeared this before psudoelement. Now, if I hover my Kara on this element, I want to make pseudo element zero again. For that, I'm going to create a Her selector s type and categ A, then I'm going to create a Her selector hover, then I'm going to use before positoclass before. Then inside the aliases I'm going to use the same property transform, copy it and paste it here, but this time I'm going to use zero degree. I'm going to make it zero again. Zero DEG after set this file, if I back to my browser and my cards are on this element, as you can see, now it's back to its own place again. It rotate the element at zero degree. Now you can see again, it height the text. Be of once again transition, we can experience this rotation very smoothly. Also we need to change the text color when we hover over the link. We need to convert it into white. So when we target the link, otherwise, hover over the link, hot, then inside the color recess, I'm going to change the color color and I'm going to make it white. I'm going to set this five. Next, I'm going to move this pseudo element one step back. So here, I'm going to type Z index minus one. That the text show in front the element. After set this file, if I hober my cars on this element, you can see the result. You can experience this transition. If I hober my cards are on it, it rotate the element at zero degree and also it changed the text color, and I create a beautiful buttonhver effect. Now what? If I rotate this element at YXS if you create another Posido element using Uter let me show you. I'm going to duplicate this section and this time, I'm going to create another element up the element. I'm going to use Ater selector, after. Then this time, I'm going to rotate it at YX. Y, 90 degree at YXs. Also, I'm going to copy this section, Du get this section? This time, I'm going to hover it on Ater positoGlass. And also we need to change the rotation value. We need to make it rotate Y. And I'm going to set this file. After set this file, if I hober my Carter on this element, here you can experience a beautiful button effect. If I hober my car on this element, it rotate both the element. Before element also the after element from 920 degree. That's why it created a beautiful hover effect. So I hope now it's clear for you, how can we create this beautiful button hover effect. So thanks for watching this video. Stay tuned for our next project. 5. Button glowing effect: Hello, everyone. In this project, we are going to create this effect when I hover over this link. Here you can experience this effect. Now let me show you the snow demonstration. What exactly is happening here. When I hover over this link, you can experience this result. After Her over this link, as you can see, it changed the background color. Also, you can notice that there is a thick white line tilted as 45 degree and it passing the link at the same time when I hover the link and also change the background color. We are going to achieve this effect. Let's back to the user's studio code editor. As you can see, we already create TML document name index dot TML inside our body tag, here type A and CTTagHber me. Then I already connect a CSS file with that style dot CSS. And if I go jump into the style CSS file, as you can see, at first I provide height in our body section, then we use displayflakes, and justify content center and Align In center to position the anchor tag middle of this page vertically and horizontally. Now, at first, I'm going to add a dark gray background, some tight background color. And I'm going to use a hexa value has tag Has tag 22, two, and I'm going to set this file. After I set this file, as you can see, this time it changed the background color as dark gray colored. Next, I'm going to target this anchor tag. I'm going to style this button. So you type A, then inside the clivus first property, I'm going to use takes decoration, text decoration. Takes decoration, I'm going to use non property. Then a remove the underline from the text, I'm going to assign a color to this text, color, and I want to assign white color white. Next, I'm going to assign font family, font family, and I want to assign font family Sans. Then I'm going to assign font size. Font size, I want to assign nearly 40 pixel font size, 40 pixel. I think it's enough for it. I upset this. This is how it look like. Now I'm going to add a border, a solid border. Sort of type border property, and I want three pixels solid border, solid. Then also, I'm going to assign a border coolorF the border color, I'm going to add white color, white, and I'm going to set this file. Then I'm going to add padding, padding from some type, padding. From top and bottom, I'm going to assign 40 pixel and from left to right, I'm going to assign 80 pixel. And I'm going to set this file. I set this file, this is how it look like. Then I'm going to use transition property. Transition for transition, I'm going to assign transition for all of these properties so all, and then I'm going to define the transition duration, which is 0.3 second. Then I'm going to define the position position relative. And I'm going to set this file. After I set this file, this is how it looked like. Next, I want to change the background color when I hover over this link. I want to make it red color. I'm going to create a hover selector, anchor tag, colon hover. Then inside the colss, I'm going to change the background color some type, background colored, and I'm going to assign red colored RED. Now I precept this file. I I Her over this link, as you can see, now the background color change into red color. And now I want to create the thick white line. And for that, I'm going to use before pseudo element. So I'm going to create the before pseudo element. At first, I'm going to target the ka tag, then, colon, and I'm going to tie before. Then inside the calices, at first, I'm going to create an empty content, contain colon, and it's empty content. Then I want to define background color to this element. Background color, and I want to assign white color. White. After that, I'm going to define the position of the pseudo element. I'm type position and this time I want to assign absolute position. Then I want to place this element at that corner, top late corner. From the top, I'm going to assign zero and from the left, I'm going to assign zero also. Then we need to define within height to this element. For width, I'm going to assign 100%, 100% and for height, let me assign height, I'm going to assign 50 pixel and I'm going to set this file. After I set this file, this is how it look like. This is our before pseudo element. And now I want to move it to the left side outside the link area. For that we are going to use, I'm going to use transform property, some type transform transit X minus, I want to translate it up to -100%. And I'm going to set this file. After I set this file, this is how it looked like. I move this before pseudo element out of this area, out of this cat tag area. And now I want to rotate this element 45 degree. So here, I'm going to use rotate value, rotate. And I want to rotate it up to 45 deg degree, and I'm going to sub this file. After rotate it up to 45 degree, this is how our line look like. Now, if I hooper my car on this button, I want to move this line to the right side to get the effect. Also, we need to assign transition for smoothing effect. I'm going to use this propriety transition, so I copy this one and I'm going to put it here. Now, I'm going to make some changes when I hover over the link in my button. I want to move the before psudo element. For that, we need to create a selector anchor tag, then hover, then we need to use the before psudoelement, before. Then inside the car says, Hey, I'm going to use transform property, transform, translate. Translate, and I want to move it up to 100%, not minus, positive 100%. Also during the botment I want to rotate the elements use rotate 45 D EG. Now after septifive when I hobo over my cars are in this ling, now you can see this element move to the right side. And also you can feel the transition. Now we need to height the excess area, the excess area outside the Anca tag. For that, we need to use overflow property. To resolve the problem, we need to jump into the Anca tag selector and here we need to use a property called overflow, overflow hidden. After set this file, now you can notice the before pseudo element is not visible, but if I Open my casa on it, you can get the beautiful effect. This is how we can build this project. I hope now it's clear for you. Thanks for watching this video, stay tuned for our next project. 6. Text scaling button using CSS: Hello, everyone. Once again, I'm back with a new project related button Hover effect. In this lesson, we are going to create this nice Haffet and we will use before psudoelein to create this Hover effect. So let's jump into this is Studio code editor and see how we can do that. So as you can see, we are in my is Studio code editor, and as you can see, we already created TML document named index dot HTML. And in the body tag, Harry take and cut tag, and HeartypeH me. Then I already create a style CSS file and I link this file with the table document. Now, let's jump into the style CSS pile. As you can see, how we assign height, these playfiq justify content center align items center. To make this anchor element center of this page horizontally and vertically. Now, let's style this element. I'm going to select this element using its tag name A, then inside the aliases, the first property I'm going to use takes decoration. Takes decoration, I'm going to use none. Then I'm going to use another property called color, color, and I'm going to assign a text color. I'm going to use some kind of dark gray colors to use Haztag 26, 26, 26. Then I'm going to define font family. Font family, I'm going to assign Sansai. Then I'm going to define the font size font size 40 pixel. After that, I'm going to define border, border, and I'm going to assign three pixel solid border. Solid and our border color is Hatag and I'm going to use the same color which I use for the font color. Next, I'm going to define padding. Padding from top and bottom, I'm going to define 40 pixel from left and right, I'm going to define 80 pixel. Now I'm going to define transition. Transition, and I want to apply transition for Oop, and I'm going to define transition time 0.5 second. And also need to define the position position relative. I'm going to set this file. After I set this file, this is how our button look like. And now I'm going to use before pseudo element to create our effect. So here I'm going to type. First, I'm going to select the anti tag, then I'm going to use before procedure selector BEFORE, before. Then inside the al ress first, I'm going to add content, content, and I'm going to type O M. So inside the single course, I'm going to type over me. After that, after that, I'm going to define the position, position absolute. Next, I'm going to define the pace where I'm going to put this text. I want to put this content at that corner. I'm going to type from the top, I'm going to pass zero and also from the left, I'm going to pass zero egging. Then I'm going to define height and width, height, I'm going to assign height 100%, and also width 100%. Then I'm going to add background color to this element, the positive element. I'm going to type background color, and I want to assign the same color, this dark gray color. Next, I'm going to assign font color, color, and I'm going to assign white color because we need to make it visible white. And I'm going to set this file. After I set this file, this is how it looked like. In our previous examples, most of the time we create a empty content. But this time in this tit, we put this text over me. And now we need to place this text middle of this container, vertically and horizontally. For that, I'm going to use flex propriety, display flakes justify content, justify content center, and align align item also center, and I'm going to set this file. After set this file, this is how it look like. Now I want to scale up this dark gray background fight time. I want to make fit scale from its orizonal size and it will make the background element very huge. Also we are going to make its opacity zero. So it's going to make it transparent. And when I hover over this link, I want to scale de again. I want to make it one again. With that, also, I'm going to change the oposity. I will make it one again. I want to make it visible again. So let's do it. At first, I'm going to apply scale, some t, transform, and I want to use skill value scale, and I want to make it five time. After I set this file, this is how it look like. I make it much larger than previous one. It scale this background elements five time of its size, but I want it to be hidden outside this link. Here here inside this anchor element, I'm going to use overflow property, overflow, overflow. Hidden, and I'm going to set this file. After save it, this is how it looked like. Now you can see outside the link area, the before pseudo part element is hidden. Also, you need to make this element, fully transparent. Inside the before selector, I'm going to apply opacity property, opacity and I'm going to apply opacity zero. If I set this file, this is how it looked like. Now the V fore background element is fully transparent. Also, it not visible in our overflow area. Now I want to apply transition. Here I'm going to try transition, and I want to apply transition all of this property, and I'm going to take 0.5 second. I'm going to set this file. Next, in hovering, I want to make this pseudo element one Eg. I want to reduce the scale of this pseudo element and also we need to increase the transparency value. We need to make it visible. I'm going to type A, colon Heber, colon, and I'm going to use before selector, I'm going to target the force element before then inside the Clses I want to apply transform property, transform scale, and I want to make it one. Also, I'm going to make Opa City Opacity, I'm going to make it one. I want to make it fully visible when I hover around it and I'm going to set this file. Now after set this file, when I hover over this anchor tag, we achieve the desired result. This result. I hope now it's clear for you, how can we create this beautiful va button Hova eft? Thanks for watching this video. Stay tuned for our next project. See you soon. 7. Circular swapping button: Hello, everyone. Once again, I am back with a new project related button Herefit. In this lesson, we are going to create this great looking button Haefet. As you can see when I hover my cursor, you can experience this effect. When I hover over this button, a red background fill this button from the top side. So let's start the practical and see how we can create it. So as you can see side by side, I open my ist studio code editor and my browser using light server extension, and I already create an HTML document named index dot HTML. With that, I already create this style dot CSS file, and I link this CSS file with this document. Now, inside the body tag, at first, I'm going to create a button tag. So here I'm going to type button tag button, and also I'm going to assign a class class and our class name is button T in short form. Then I will just type button. I want to set this file. After I set this file, this is how it looked like. Now we need to place this button middle of this page. For that, we need to go and jump into the style CSS file. First, I'm going to select the body tag, body. Then inside the colss at first, I'm going to assign margin to this page, margin, and I want to assign margin zero, then I'm going to assign this low property. Display flakes Justify content justify content center, also align the items center t align items center. Next, I'm going to assign height to this page height and I'm to assign height 100 H. Then I'm going to assign fontonFamily, and I want to assign Sensory font, Sanserith I'm going to set this file. After I set this file, this is how it looked like it aligned this button middle of this page horizontally and vertically. Next, I'm going to target the button using its class name. For that, I'm going to type dot BTN. Then inside the colors, first property, I'm going to use border border, and hem to assign two pixel solid border, solid watercolor is tomento. I'm going to set this file. After that, I'm going to remove the background. Background, and I'm going to assign none. Then I'm going to change the text color. I'm type color and I want to assign color tomato egging. Next, I'm going to give some padding from top and bottom and right and lift. I'm type padding from top and bottom, I'm going to assign 20 pixel and from left and right, I'm going to assign 40 pixel. I'm going to set this file. After I set this file, this is how it look like. Next, I'm going to define the font size. I'm going to type font, font size. Here I'm going to assign font size 25 pixel. After that, I'm going to use a property called text transform, text transform, text transform uppercase. Next, I'm going to assign another property, which is cursor, cursor pointer. Whenever I move my cursor on this button, it's going to become a pointer. After that, I'm going to assign transition transition, and I want to apply transition for all of this property and my transition duration is 0.5 second. Then I'm going to set this file. Next, I'm going to define the position, position I'm going to use relaty. Now, let's work on the hovering effect. We will use the before pseudo element for that and we know the process. Now, let's create the before pseudo element. So type dot BTN, button, colon, B four. Then inside the alyssF probity, I'm going to use content, content, and I'm going to create empty content. Then I'm going to define the position of this content, position, and I'm use absolute value, absolute. I want to place this element at that corner. From the top top, I'm going to assign zero and also from the left, I'm going to assign zero. I want to start the element from the top left corner. Then I'm going to define within height with 100%. Also, I'm going to define height height, height, 100%. Then I'm going to define the background, background, and I want to use tomato color toma. I'm going to say this. I set this file, this is how it look like. So it takes full width and height and it's sitting top of this button. That's why it's height our text. To resolve the problem, I'm going to use Z index property, Z index, and I'm going to use minus one and it resolves the problem, but our text is not visible yet because our text color and the background color match with each other. Inside the button selected, if I change the color, color. And if I make it white white, and then set this file, this is how it looked like. You can see the text now shows up. But for now, I'm going to make it tomato again. So I'm going to comment out this line, and I'm going to save it again. And now to achieve the desired result, I'm going to use border radius in our pseudo lemate type border radius, zero, zero, and 50% and 50%. From the top left and right corner, I use zero value and for the bottom left and bottom right corner, here I use 50% and 50% border radius. Now, if I set this file, this is how it look like. Now we have the curves in our background, and now we need to work on the hovering effect. Now we will set height of this red background, zero. Then hovering over the button, we will increase the height of this red background. It's going to give you the fills in and cover the button effect. Inside this red background, I'm going to set height, height, and I'm going to make it zero. 0% instead of 100%. I'm going to set this file. After I set this file, as you can see, it disappeared the red background. It is not visible because of its height. Now we need to add HVAD effect on this before element. For that, I'm going to type dot BTN Colon Hal colon and Hemot before. Then inside the car lerss I'm going to define the height, height, 100%. And I'm going to set this file. So whenever I Her my cars on this button, as you can see, it increases the height, but it increases the height instantly. There is no transition between them. For that, I'm going to use property called transition in my Hard element, transition in my posto element. So Hemost transition here I'm going to set transition in all of this element all and I'm going to define the time 0.5 second and I'm going to set this file. This time after I set this file, if I hover over my color on this button, now you can see the smoothing effect. You can experience it. But the problem is it not covering the whole button because of border radius. So to resolve the problem, we need to increase the height. We need to increase more height more than 100%. So instead of using 100%, her I'm to use 190%, and I'm going to set this file. After set this file, if I over my cursor on this button, you can see it resolve the problem, but it creates a new problem. So you need to hike the overflow area for that in my button in this button area, I'm going to use the property called overflow, overflow heating I'm going to set this file. If I set this file and over my cursor on this element, you can see here we achieve the desiring effect. It hide the overflow element. Now, also, we need to resolve another problem. We need to change the color when I hover on this element. We need to change the text color when I hover this button. For that, here I'm going to create another selector BTN and her create a hover selector of it hover. Inside the color ss, I'm going to use the property called color. Color white. I want to set this file. After set this file, if I my cards are on this element, here you can see, we achieve the desired result. I hope now it's clear for you how we can create this beautiful button effect. So thanks for watching this video. Stay tuned for our next project. 8. Rotating 3 layers button: Hello, everyone. In this lesson, we are going to create this beautiful button Hover effect. As you can see when I Hoberm cards are on this button, here you can experience a flipping effect. At first, a green background covered the button, then a red background covered the button, and when I release my mouse from it, it back to its original position again. Let's see how we can create it. As you can see side by side, I open my Visual Studio code editor and my browser using Lifesaver extension and I already create an SML document named index dot HTML. With that, I already create the tile Dod CSS file and I link this Tyled CSS file with this TML document. Now inside my body tag, at first, I'm going to take a Gut tag, A. Here I'm going to just say button. And then I'm going to set this file. Set this file, as you can see in my browser, this is our anchor tag. Now, we need to jump into this style or CSS file. Now, first, we need to style the body tag. Here I'm going to target body using its tag name. Then I'm going to assign margin in our body tag, which is zero. After that, I'm going to assign display property, display, and here I'm going to use slick. Then I'm going to use align item property, Align item center, justify content also center. Then I'm going to assign height to our page height 100 VH, vote height. After that, here, I'm going to assign a background color. Background color, and I'm going to use a hexavalu 212121. It's a dark gray color. If I set this file, this is how it look like. Now we need to change the font style of this text. For that, I'm going to use font family, font family, and I'm going to use Sansai Sansai I'm going to set this file. After I set this file, this is how it looked like. After that, I'm going to style this anchor tag using its tag name A. Then inside the Closs, at first, I'm going to assign padding to this button, so type padding and from top and bottom, I'm going to use 20 pixel paddy and from left and right, I'm going to use 40 pixel paddy. After that, I'm going to use a property call takes decoration, text decoration, takes decoration. He I'm going to use none. Then I'm going to use another property call takes transform, text transform, takes transform, uppercase. Then I'm going to use dground color property. Background color, and here I'm going to use background color, hass tag, if one, C four, zero F, this yellow variant color, and I'm going to set this file. After I set this file, this is how our button look like. Next, I want to change the text color of this button. I want to make it white, Soon type, color, and I want to make its color white. After that, I'm going to define the font size font size, and I'm going to apply to t pixel font. Then I'm going to set this file. After I set this file, this is how it look like, but I want some letter spacing between these characters. So I'm going to use the property call spacing. Lets spacing, I want to pixel space between the characters of this word, yes, it's good. After that, I'm going to define the position position, and I'm going to declare it relative. I'm going to set this file. Next, I'm going to create the green background which will cover the button. For that, I'm going to use before Posidoeleate. Here I'm going to tie anchor tag colon before. Then inside the calivas at first, inside this before Posido element, I'm going to create a content, content, and I'm going to type button. After that, after create the content, we need to position this content, some type position property, position absolute. Next, I'm going to place this content at that corner. For that, I'm going to type from top, I'm going to assign zero and from P and from P, I'm going to assign zero again. Then I'm going to assign within height. I'm going to assign width 100%, and then I'm going to assign height, height 100%. After that, I'm going to define the background color. Background color, I'm going to assign the same background color, so I'm going to copy and hemmed assign a green background color. I'm going to use a hexa Valu has tag two CE, seven, one. This green background color, and I'm going to set this file. After I set this file, this is how it looked like. Now the green background is sitting right above the yellow background. Now we need to center these takes horizontally and vertically. For that, I'm going to use display flex propriety, display and I'm going to use flex and align align items center, justify content. Also center, also center. I'm going to set this file. After I set this file, this is how it looked like. Now to create the effect, we need to use rotate function. We are going to rotate this green element along the Xxs so here, I'm going to use the property called transform and I'm going to apply rotate X here, I'm going to pass the value 60 degree DEG. Now if I set this file, you can notice it going to rotate this green element at horizontal axis. After set this file, you can see the result and it rotated up to 60 degree. As you know, by default, it's going to rotate the element from the center line. But I want to change the position of this rotating point. I want to rotate this element from the top. For that, we need to use a property called transform as transform Aisin animal pass top. And upset this file, as you can see, now it's rotate the element from the top position. Now I want to rotate this element up to 270 degree. Instead of using 60 degree, I'm going to use 270 degree DEG and I'm going to set this file up set this file as you can see, and upset this file, as you can see, it is the element. Now it's not visible anymore. Because a rotate the element, it go behind the button. Now when I hover over this link, I want to reset it. I want to make it zero again. I'm going to create a hover selector using the anchor tag a hover before elem. Then inside the Caria says, how to use a property called transform, transform rotate X, and I'm going to pass pass zero degree zero DEG. I'm going to set this file. Whenever I Hoberm curves are on this element, this button, as you can see, it's going to rotate this green pseudo element into zero degree. You cannot experience the rotation because you do not use any transition on it. I'm going to type transition property transition. Also, I'm going to set the duration of this transition zero coin five second. I'm going to set this file. After I set this file, if I hover my Karza on it, now you can experience this transition. Here you can experience this sleeping effect. Now after I create the green one, I want to create the red one. For that, I'm going to copy this section, this before pseudo element here I'm going to paste it again. And instead of using before posto element, this time, I'm going to use after posito element, and this time I'm going to use red color instead of using green ED. I'm going to set this file. A I want to rotate it after the green one. For that, we need to use some transition delay. Ty transition delay, and I want to delay it up to 0.25 second. That's good. I'm going to set this file. And at the same way, we need back to the zero degree Wi on it on this button. For that, here, I'm going to create another Her selected for after elemide. A, colon hovered, colon, and Hentyp after. Then inside the Cali recess, I'm going to apply this same value and I'm going to sub this file. After set this file, Wi Hoberm cursor on this button, here you can experience this beautiful flipping button effect. Also if you want to get different result, yes, you can change the transform origin position. Instead of using T you apply bottom, if you apply butto bottom and then this file, now you can enjoy a different flipping effect. Whenever I open my color on it, this is how it cross the button. For now, I'm going to use Top. I like to go with top one to value. This is how it's animate this button. I hope now it's clear for you. Thanks for watching this video, stay tuned for our next project. 9. 3 circle to background button effect part 1: Hello, everyone. Welcome to the new project. In this lesson, we are going to create this beautiful, nice little button Ha effect. As you can see, when I hover over this link, three circle coming and cover dling then a beautiful yellow background appear and change the text color. We're going to create this in this project. Let's see how we can create this beautiful effect. So as you can see side by side, I open my Visual Studio code editor and my browser using Light server extension, and I already create an HTML document name index dot HTML. With that, I already create Styler CSS file and I link this file with this document using ink tag. Then inside the body tag, first, I'm going to take a anchor tag. I'm going to take the anchor tag using A and then I'm going to take a span tag, empty span tag inside the anchor tag span, and inside this ancha tag, I'm going to tip over me. We will see later why we need this span tag. Now, let's jump into the style CSS file. At first, I'm going to style the body type, so type, body. Then inside the Cariss first, I'm going to say margin, I'm going to say margin, zero from all of the direction. Then we need to align this cat center of this page. I'm going to take this property, display flex, Justify content, justify content center. Also, we need to pass align Iams center. After that, we need to define height to this page, height and I'm going to define height hundred V g, vote height. Then I'm going to define the font family font family area. After that, I'm going to define a background color. I'm going to use a dark background color type, background color, hashtag, I'm going to use a HixaVu 272727. It's going to retain a dark gray color. After I set this file, this is how our page look like. Also it aligned the text middle of this page. Now we need to style this Anca tag. I'm going to target the ancha tag using its tag name A, then inside the color sus first property I'm going to use weed, and here I'm going to aside we 220 pixel. Then I'm going to assign height, height, 80 pixel. Then I'm going to assign color. I'm going to assign font color, color, her to assign color, kind of yellow hue has tag, F if zero. It's going to return of yellow color, something like that. Then I'm going to define background color. Bagund color, I'm going to make it transparent. This one. Next, I'm going to define the font size. Font size. Here I'm going to use font size 26 pixel. Also going to remove this underline, so I'm going to type text decoration, text decoration. I'm going to make it none. It's going to remove the underline. Next, I'm going to convert this text into uppercase, so I'm going to type text, transform, uppercase. I'm going to set this file. After I set this file, this is how it looked like. And now we need to synta this text horizontally and vertically. For that, I'm going to use a property called text align text, Align, text align centered. Above that, also, I'm going to define some line height line height, 80, line height, 80 pix. So it's Align the text middle of this container. Here we define width 220 pixel and height 80 pixel. Finally, I'm going to add transition. Transition, I'm going to apply transition for all of the element and I'm going to set duration 0.5 second. After that, we need to define the position. Position, after that, we need to define the position, position relative. And I'm going to set this file. After I set this file. Now, let's create these circles, which are coming from the left and the right side. Who am I over this link? Who will use before and after pseudo element to create it? I want to create first circle element at that place and I want to create the second circle element at that place. I'm going to use before and after possudo element together. So type A, colon, before. A, colon after. Then inside the Carrass the first property, I'm going to create the content. I'm going to create the D content. Content is a blank content. I'm going to use Double code cell. Then we need to define the position of this content. So take position, I'm going to provide absolute. Next, we need to place those content. From the top, I'm going to place it 50% from the top, I'm going to place it 50% and then I'm going to define we, and I'm going to define with 20 pixel. Also, I'm going to define height, height, also 20 pixel. After that, I'm going to define the background color. But before I define the background color, let's define the border radius because we need to make it circle. Border radius 50%. Then I'm going to define background color. Background color, I'm going to define yellow color, the same color, hass tag, do leaf, zero, and I'm going to set this file. Now to set this file, you can see the two circle. One is the left side and another one is the right side. It is made by before positoselector, and it is made by ter positoselector. But you can notice our dots are not aligned with the text. Here we position it from the top 50%. I mean, 50% of the ca tag height, which is 40 pixel. But to make it correct, we need to use transform property. Transform, and here I'm going to use translate Y with, translate translate Y, and here I'm going to use -50%. Up to set this file, as you can see, it aligned the dots with the text, and next, I'm going to apply transition property. Transition, transition, I'm going to apply transition to all of this property. Next, I'm going to define the transition duration, which is 0.3 second. So before an upper circle perfectly centered to this text. Now you can notice the before pseudo element covering the letter H and the per pseudo element nearly touching letter E because we did not specify any horizontal position of it. To resolve the problem, I'm going to target the before pseudo element, pudo type A, colon before. Then inside the call recess, I'm going to type the property name late left, zero and I'm going to set this file. After set this file, as you can see, it's resolve the problem. Then I'm going to target the ara element A, upper. Then inside the Cali recess I'm going to place it right side to smut right, zero. I'm going to set this file. After set this file, this is how it looked like. Next, using box shadow propriety, we are going to create shadow of these circles, and we are going to create two shadow of these two circles. So I'm going to create a box shadow for before elements, so I'm going to type box shadow, and it going to except of four value. The first value is for horizontal distance between the shadow and the element. From the right side, I'm going to move move the shadow from the ten pixel. I want to move this shadow from the left side, so I'm going to use -100 pixel. Next, we need to provide the vertical distance from the element. From the element, I want to provide zero vertical distance and the third value represents the blur of this shadow. But I don't want any blurred value, I want short shadow, and the large value, we need to pass the shadow color and for now, I'm going to use red otherwise green. So after set this file, as you can see, here you can see a new circle. It's a shadow of this before pseudo element. I'm going to do the same thing for the after pseudo element. I'm going to create the same shadow just to place it right side of this element. So I'm going to copy this lin and I'm going to paste it here. I'm going to change the value of the horizontal direction. After set this file, you can see the result. Now we have tal four circle. This is the first part of this tutorial. At the next part of this tutorial, we are going to work on Haarefect. Thanks for watching this video Syuned. 10. 3 circle to background button effect part 2: Nice to see you guys, this is the second part of this tutorial, and in our previous part, we already create the shadow of this before and after Posido element. Now, let's work on the Ha effect. At first, I'm going to create Hor selected for the before elements of ti anchor tag, hover colon, F. Then inside the caliss here I'm going to call Left property, left 50%. So whenever I hover my cars on this element, as you can see, it going to move this circle 50% of this element width. Also it move this shadow with it, but I don't want to maintain the shadow distance 100% where I hover on it. Instead of using -100, I want to move it a little closer to the original element. Here I'm going to type box shadow box shadow, and I'm going to define the position of the shadow which is 30 pixel when I hover on it. And also, I'm going to pass the same values and the same color, so I'm going to copy it and I'm going to place it here. I'm going to set this fine. So whenever I hop my cursor on it, as you can see, now, the shadow came closer to this original element. Not only close, it crossed the element and go to the right side of this original element. And also, I'm going to do the same thing for the After pudo element. So I duplicate this section and I'm going to replace before with After. Next, I'm going to change this side. I'm going to make Lab two, right. Also we need to pass the negative value here because we are going to move the shadow to the left side of this circle. I'm going to set this file. After set this file, if I hobo on it, you can see the result. Now we need to do one thing. We need to move the before and upper pseudo element to the same position. User can see only three dots up hoberon it. We need to align both the circle center of this and categ element. For that, we need to use transform property here, transform, and this time I'm going to use translate X value, translate X, translate X, and here I'm going to use -50% value. I'm going to set this file. And because we say translate Y above here, we need to set the same value in our element in our V for psudoelement. Here we need to mention we need to stay on -50% at YXs direction, so I want to paste the value. Translate Y -50%, and then we need to do the same thing for upper pseudo element. I copy this line and I'm going to paste it here. And I'm going to change the values. I'm going to make it positive, not negative. I'm going to set this file. After set this file, if I hooper my cars are on it, yeah, it's working, but hoops from the YXs still we need to use minus value because we need to align it center. After set this file, when I hooper my cars are on it again, now you can see the result. Now you can see only three circuit. Before and upper positive element overlap with each other. That's why you can see only one circle here. Now I'm going to change this sado circle color. I'm going to use the same color, same yellow color for it. Instead of using green, I'm going to use this yellow color. So I replace green with this color every time, and I'm going to save it again. After I said this file, this is how it look like. And now we will work on the yellow background using this span tag. As you know, when we create our ancha tag, here we create a span tag inside it, and now we are going to use this span tag. Let's back to the style CSS file. I'm going to use this spent tag for the background purpose. So to create the background, I'm going to target this span tag using its name tag name. Span inside the clivusus at first, I'm going to define the position of its span tag, which is absolute. Then I'm going to define the place from the top, I'm going to place seed zero. And from the left, I'm going to place set zero again. Then I'm going to say within height, with 100%. And then I'm going to define height, height also 100%. Then I'm going to define the background color, background color, background color, and I'm going to use the same background color, which is HatagFF zero, this yellow color. Next, I'm going to define the border radius. Border radius, border radius, I'm going to use eight pixel. I'm going to set this file. After I set this file, this is how our button look like. Now you can see the yellow background sit top on the text, and then I'm going to use transform property, transform, and I'm going to use scale value scale, and I'm going to say scale zero. Also, I'm going to use transition transition, and I'm going to say transition to all the properties and also I'm going to say the duration of the transition which is 0.3 second. After that, I'm going to create the Hoberselector of the span tag, and our span tag is inside the nctag I'm going to type first I'm going to select nctegHver then I'm going to select the span tag, span. Inside the caliss I'm going to say transform scale value scale, and I'm going to set it this time I'm going to set it to one and transform delay, and then I'm going to use transition delay little transition delay value. Transition delay, and I'm going to set it 0.4 second. I'm going to set this file. After I set this file, as you can see, by default, it hide the yellow background. But whenever I try to move my car on it, now you can see after 0.4 second delay it appeared the background. As you can see, after finish this circle moving, the background appear. Next, I'm going to change the link color when I hobo on it. For that, I'm going to type anchor hover and inside the color races, I'm going to use color fberty colored, this time I'm going to use dark gray color, so I'm going to type has that 262626. Then I'm going to add some little transition delay, and I'm going to use the send transition delay value I'm going to copy this one and I'm going to paste it here. So if I set this file and hover it on it, you can see nothing is happening. It's look as it is because we need to move this background behind the text. For that, we need to use Z index value to type Z index, which is minus one, and I'm going to set this file. So set this file when I open my cards are on it, you can see the result. Now the text come in front of this background element. But the problem is our three rot also come in front of the text. We need to use the same zen index value two hour before and after pseudo element selector. This one. Here, I'm going to pass the same Z index value and set this file. When I ObermGara on this element, this time you can see the resin. Now, our background and three dots element also go behind the text. Then I'm going to set opacity of both the element zero. Let me show you opacity, I'm going to set it zero. I'm going to set this file. Set this file, as you can see, it hide all the pseudo elements, but I want to reappear it when I hover on it. For that, we need to set opacity in our Her selecton. Copy the value opacity and in our before upper PosidoHerselector, I'm going to use the values. I'm going to make it. This time, I'm going to make it one Opacity one. I'm going to set this file. This time I made it fully opaque. After set this slide if I hover my Karza in this link, you can see this beautiful Her effect. This is how we can create this beautiful Her effect. Thanks for watching this video, stay tuned for our next project. 11. New button hover effect: Hello, everyone. Welcome to the new lesson for this animation course. In this tutorial, we are going to create this beautiful, nice looking button Haifat. If you look at this button, you can notice we have total two background here. Lo color background and violet color background. Our Eula background shipped to the top laped corner and our violet color background shipped to the bottom right corner. And when I hover on it, you can notice both the background A and rotate in three D perspective at Xxs diction. So let's see how we can create this beautiful Hoaiff. So as you can see side by side, I open my Wiser Studio code editor and my browser using live server extension, and I already create an SML document named index dot HTML. With that, I create this tile dot Css five. Now at first inside the body tag, I'm going to create the anchor tie using A, then I'm going to tie buttonhver Effect. Button Hover effect. I'm going to set this file. After that, we need to jump into the stylar CSS file. At first, I'm going to select the body tag body. Then inside the calibraces first property, I'm going to use margin, margin zero from all of the direction. Then I'm going to use display. Display and I'm to use display flex, and align item, align IMs center. Also, I'm going to type justify content, also center. Then I'm going to assign height to this page, height, and I'm going to assign height 100 V H, viewport height. Then I'm going to assign font family, font, family, and I'm going to assign Al. That's good. I'm going to set this file. After set this file, as you can see, here you can see it align the button, middle of this page horizontally and vertically. Now I'm going to style this link. For that, we need to select it using the anchor tag A and inside the livers is the first property I'm going to use wide. And the first property I'm going to use with, and I'm going to assign 300 pixel width. Then I'm going to assign height, height, and I'm going to assign 60 pixel height. After that, I'm going to assign text decoration, text decoration, and I want to remove the underline, so here I'm going to use none. Then I'm going to make this text into uppercase, text transform, I'm going to use text transform property and I'm going to use uppercase do. After that, also, I'm going to remove the background. I'm going to make it transparent. Background color transparent. Then I'm going to assign text align text align center. Then I'm going to assign line height, line height. Here I'm going to assign line height, nearly 60 pixel. I think 60 pixel is good for each. Next, I'm going to assign font weight. I need a little bolder font, font weight, and I'm going to pass bold heir. Bold. After that, I'm going to add letter spacing, letter spacing and her to add letter spacing to pixel. Then I'm going to add position, position relative, the less property, I'm going to use transition. Transition and her to assign transition to all of this property, also, I'm going to set the duration, which is 0.2 seconds. I'm going to set this file. After I set this file, this is our button look like. Now, let's create the two background of this button. For that, I'm going to use the fore and after posito element. First, I'm going to create the before posito element, Cctag colon before. Then you set the carlivorss. First, I'm going to create a blank content. Here I'm going to type content, content, and I'm going to create a blank content, so I pass double cores. After that, then I'm going to position the content and I'm going to make it position absolute. Then I'm going to place this content at that corner at that place. From the top, I'm going to pass zero value and from the late, also, I'm going to pass zero, zero position. After that, I'm going to assign with and height. We, I'm going to assign 100%, and then I'm going to assign height, height also 100%. Then I'm going to assign background color, background color, and I would like to go with yellow color yellow. I'm going to set this file. After I set this file, this is how it look like. Now you can see our yellow background take whole within height of this element, the catag element. Now, we need to display this text. For that, we're going to use Z index. So to type Z index, I'm going to make it minus one. I want to move this yellow background color behind the text. So the sb this file, this is how it looked like. And now I'm going to shift this yellow background, something right and top. For that, I'm going to use to value minus three pixel, also the left value minus three pixel. I'm going to set this file after set this file, as you can see, it's move little bit. Now, let's create another background. I'm going to duplicate this section and here I'm going to pass after. Instead of using before I'm going to pass a TR. This time, I want to move it to the right side. Instead of using minus three pixel, I'm going to use three pixel. Also, I'm going to change color, the background color, and I'm going to make it Blue. I'm going to use this one, blue violet. I'm going to set this file. After set this file, this is how it look like. Now you can notice the blue violet background sitting on the yellow color background. But I want to brd the background with each other. For that, we can do it easily. We need to use a property called mix brain mode. Here are type mix Blain mode, and I'm going to apply multiply multiply, and I'm going to set this file. We need to apply the same mixed blend mode, multiply in after subelement. And I'm going to set this file. After I set this file, this is how it looked like. Now instead of ugly blue color, I want to change the font color. I'm going to make it white. So in our anchor tag, I'm going to use the color property color, and I'm going to make it white. And I'm going to set this file. Then you can see two background blended to each other and it creates a nice beautiful effect. Next, we are going to working on the hovering effect. Now in hovering effect, I want to rotate the element in Xxs direction in three D environment. To do that, first, I'm going to select the hover select, anchor hover, then before psudo element. Then inside the rounds, inside the calibraces, at first, I'm going to move the yellow background to the top six pixel. I'm going to use the first value top, and I'm going to make it minus six pixel. Then from the lab, I'm going to make it zero. And then I'm going to use transform property, transform, and we are going to use three D value. And as you know, we are going to use three D environment, so we need to apply perspective on it. Perspective. Here I'm going to define 1,000 pixel perspective, not 100, I'm going to make it 1,000. And then I'm going to apply rotate x, rotate X, and here I'm going to define, but before I'm going to turn on the tower af, Wrap and Hem to define the angle, which is 75 dg degree. I'm going to set this five. And for smooth transition, I'm going to apply transition property in before element. So type transition and I'm going to define the time for the transition which is 0.2 second. I'm going to set this file satisfy. If I open my cursor on it, you can notice the transition. You can notice our yellow background rotate in CD environment on the XXs direction. We need to do the same thing for upper pseudo element, but in opposite direction. But you can notice this is not the result we want. I want to rotate this element from the top position, not from the center position. So we need to change the origin. Transform origin, well let me show you. So in our beaver positive element, Imotype transform origin, and I want to rotate the element from the top position, top. I'm going to set this file. If I my cars are on this element, now you can see, now you can notice this time it rotate the yellow element from the top position in three D environment. Now I need to do the same thing for the violet color background, but before I'm going to cut this section and I'm going to paste it before procedure selector. I'm going to duplicate this section and I'm going to paste it after the after procedure element. Just I'm going to change before to after. Also to purchase the position. Instead of using six pixel heromon to use minus six pixel and instead of using rotate 75 degree Heim to use -75 degree and also use the same properties such as transition and transform origin in our upper pseudo elements. I copy this to property and value and herramoPtich. And I'm going to change the transfer origin position. Instead of using top, I'm going to use bottom do bottom and I'm going to set this file. After I set this file, if I perm curs on this button, you can see the result. Here you can see the beautiful effect, but the problem is after Hober on it, as you can see, our text color white match with the background color. We need to resolve the problem when I hober on it, we need to change the text color of this anchor tag here I'm going to create a Hbaselector of anchor a Her then in the colses I'm going to use color property, and I'm going to apply hass tag 272727. I'm going to set this file. After set this file, if I hover my cursor on it, you can enjoy this beautiful Her effect. I hope now it's clear for you how we can create this beautiful button Hover effect. Thanks for watching this video. Stay tuned for our next project. 12. Splited button effect: Hello, guys. Good to see you back. Once again, I'm back with a new project related button Hova effect, today we are going to create this beautiful button Haefet. As you can see when I hover my cars are on this element four small element COD button from four different side, from the left side from the top, from the bottom and from the right side. This is what we are going to build today in this project. Let's start the practical and see how we can build it. So as you can see side by side, I open my visual studio code iter and my browser using live server extension, and I already create an TML document name index dot HTML. Also, I create style dot css file and I link this file with this document. Then inside this body tag, at first, I'm going to take the anchor tag. Inside the body tag, I'm going to type A for anchor tag, and inside the anchor tag, I'm going to take a span tag, span. Then inside the Span tag, I'm going to type over me. Here we added this pan tag because we want to create four part of background. That will cover of the button, and then I'm going to set this file. After set this file, you can see the button in my browser. Now, first two element we are going to create using before and after psudo element. Then we are going to use this pan tag to create other two. Let's jump into the style dot CSS file. At first, I'm going to style the body tag board. Then inside the Cali, the first property I'm going to use margin and I'm going to set margin Z. After that, we need to place this anchor tag middle of this page. I'm going to use Huber, I'm going to use the property, this play, and I'm going to make it flex. After that, then I'm going to use another property called align item, align item center, justify content, justify content also centered. Then I'm going to define height, height, and I'm going to use height 100 viewport height. After that, I'm going to define font family. Font family, and I'm going to use aerial font. Next, I'm going to define a background color. I'm going to use dark background color, some type background color, hashtag, 222. It's going to return dark gray background color. And after this file, this is how it look like. Next, I'm going to target the anchor tag using its tag name A. Then inside the color recess first property, I'm going to use text decoration, text decoration, and I want to remove the underline so I'm going to use Nun property. NunVlu. After that, I'm going to make it uppercase. I'm going to tie text transformation, text, transform. I want to make it uppercase. Then I want to define the font size, font size, and I'm going to make it 25 pixel. After that, I'm going to define a color. I'm going to define color to this font, some type color, and I want to use this color code, hass tag, F six, B, 93b, this one, this yellowish color, and I'm going to set this five. Then I'm going to provide letter spacing between these characters. So type, letters, spacing, and Heundpass three pixel. After that, I'm going to define some padding. I need some padding. But before I define the padding, let's add the border. Border for border, I want three pixel solid border. Three pixel solid border, and our border color is same as the font color. I copy the color code and I'm going to put it here. After that, I'm going to add padding. Padding from top and bottom, I want to define 25 pixel and from left and right, I'm going to define 50 pixel and I'm going to set this file. After set this file, this is how our button look like. Next, I'm going to add transition because we need some smoothing effect. I'm going to type transition. I want to apply all of this property, then I'm going to set the duration 1.5 second. After that, I'm going to define position, position, I'm going to define relative, and I'm going to set this file. I set this file, I'm going to set this file. Now we are going to work on the fore part of ylow background. When we hover up this link, it's going to cover up this link. We are going to create the first background element using anchor tag. We are going to use before and actor element for that. Now I'm going to create both the before and after pseudo element together. So Ti, A, colon, B port. Then upper comma, Hemotyp A colon after. Then inside the calibrs the first property I'm going to use, I'm going to create a blank content. Content, colon is a blank content. Is a blank content. After that, I'm going to define the position. Position, I'm going to make it absolute. Then I'm going to define. We, I'm going to define 25%. Next, I'm going to define height. Height, I'm going to define height 100%. After that, I'm going to define the background color. Background color, I'm going to use the same background color which I use for text color. Next, I'm going to define the Z index to visible the text. We need to move both the background behind the text. So I'm going to type Z index, Z index, and I'm going to use minus one value. Then I'm going to use transition transition, and I'm going to define transition for all of this element. And also, I'm going to define the transition timing, which is 0.5 second. Now to set this file, this is how our elements look like. Remember, here we use 25% width of this and cut tag element because if we add four element together, then it's going to cover the whole area. That's why I use 25% for each of the element. Now we need to move this before posito element. First, I'm going to target the before Posido element alone before. Then inside the caliberss, I'm going to use top property, Tf. And here I'm going to define the position from the top, I'm going to assign zero value. Then I'm going to define left position, P and here I'm going to pass -25%. And I'm going to sub this file. After set this file, this is how it looked like now. So this is the before element initial position for this kata. And now I'm going to change the position of this after pseudo element. I'm going to place this element at that position. For that, I'm going to duplicate this section and instead of using before, I'm going to use after. A from the top, I'm going to pass -100%. Then from the left, I'm going to use positive 20%. If I set this file, this is where we want to put this element. So when I hober my cursor on this button, I want to move the before element to the right side and I want to move the after element to the bottom side. And it's going to complete the 50% of area. Now, let's walk on Hard effect. I'm going to first, I'm going to create a Hoefect for the before element type A, colon hover. Colon, I'm going to type the element name before. Then in the clirass the first property, I'm going to use top value, top, from the top, I want to put it zero when I Hvar on it. I want to place the position and from the late and from the lab, also, I'm going to make it zero. After this file, when I hopen my color on it, it's going to move this element inside this box. From the top, it's going to make zero and from the lab also it's going to make zero. That's why it place it inside this element. Next, we need to work on upper element hover effect. We need to move the element downward. From the top, we need to position it zero and from the lab, we need to move it 25%. 25% of the nc tag border area. I'm going to create the hover selector of it, some type A, colon, hoval. Then colon, I'm going to select the actor element. After. Then inside the class from the top, I'm going to place it zero and from the late, I'm going to place it 25%. I'm going to set this file. After set this file, if I hover my cursor on this element, this is how it look like. This is how it covered the 50% of this button area. So we are almost done our hub job. At the next part of this tutorial, we are going to create the other two parts using span tag and before positive element, and it's going to cover at the other two portion. Thanks for watching this video, stay tuned for our next part. 13. Splited button effect part 2: Hello, guys. Nice to see you back. This is the second part of this project, as you can see, we already create two element using before and upper posit selector of anger element. Our before element move to the right side and our upter element move to the downward. And now we need to create the remaining two part. Again, we are going to create this two element using before and after pseudo element. But this time we are going to be used before and after psudo element of this span tag, which you create inside this nga tag, this one. Let's get to the styler says fell again. We are going to create these two elements. Let's jump into this section and herm to add span colon befotm span colon after. And I'm going to set this file. Upset this file, this is how it look like. So we successfully create this two element. Now we need to place the two element. For that, first, I'm going to select the span before element, and here I'm going to create a selector of it. Span before. Then its the carver says, here we target the span tag before element, which is inside the anchor element. So type A, space, span, colon before. Then we need to define the position from the top, top 100%. It's going to place this element below the button, and then we need to define the right position. So tip right, 25%. I'm going to set this file. After set this file, this is where we place this element. From the right side, it shipped to the 25% and from the top, it shipped to the 100%. At the same way, we need to place the after pseudo element. I duplicate this section and this time, I'm going to target after element aer. Then at the cariras from the right, I'm going to make it -25%, and from the top, I'm going to say it zero. I'm going to set this file. This is where we place this after element. Then we need to work on Hover selector. Let me show you. First, I'm going to work on before element Hover selector. I'm going to type, anchor, dot, hover, then we need to select the Span tag span before element, span, colon before. Then inside the calices when I hover on this element, I want to move this element to the top side here I'm going to type from the top top top value zero. And also I want to say it right value, right, right value. And for the dike, I'm going to use it 25% as it is, 25%. And I'm going to set this file. A set this file, if I hop on my cursor on it, you can see the result. This is how it moved this element upside. Now we need to work on this element, the per psudo element of this pan tag. So I copy this section and paste it here. And this time, I to select the after element, after. Then here, we need to define the position. Here just we need to make the right value zero, and we need to set this file. After set this file, if I hover my cursor on it, you can see the result. This is how it complete the background with the four different element. Next, we need to change the color of the text when I hover on it. I'm going to create a Her selector of anchor tag, A, colon Her. Then inside the car process, I'm going to use color property color, and I'm going to assign this dark gray color but has tag to two. I'm going to set this file. After set this file, when I hober my car on this button, you can see the result. And our last duty is we need to hide the overflow area outside the Anca tech area. For that, we need to jump into the Anca tax selected this one, then here we need to use the property called overflow. Overflow hidden. I'm going to set this file. A set this file. This is how bit and look like. If I hover my car on this element, you can see the beautiful O effect. I hope now it's clear for you how we can create this beautiful button Heft. Thanks for watching this video. Stay tuned for our next tutorio. 14. Border swapping button hover effect part 1: Hello, guys. Good to see you back. Once again, I'm back with another tutorial relitate our project. And today, in this tutorial, we are going to create this beautiful button ha ffect. So if I Her my cars on it, you can experience this transition. You can see our button have four long border around it. Also, you can notice they don't have same height and width according to the button. It's a little longer than that. You can notice left and right border hab larger height, and top and bottom boerhb larger width. We will learn how to do that and how to make this transition. So let's jump into the visual studio code editor. As you can see side by side, I open my result studio code editor and my browser using if server extension, and I already created an HTML document named index dot TML. With that, I already create this tile CSS file and I link up this file with this document. So first, inside the body tag, I'm going to add an anchor tag, A, and hemo type hover. Me. Then I'm going jump into the style CSS file, and at first, I'm going to style the body tag, body. Then at the Calif first property, I'm going to use Marji I'm going to say margin zero from all of the direction. Then I'm going to say display. Display, I'm going to make it flix because I want to place the ancha tag middle of the speech and heterotype align items center. Also, I'm going to type, justify content, justify content also center. Then I'm going to use another property called height, height, and I'm going to assign height 100 VH with viewfd height. Then I'm going to assign a background color. I want to assign dark background color, so herm type, background color, hastag 222, this color code, dark gray color. And now I'm going to target the anchor tag using its tagnym A, and inside the aliases, the first property I'm going to use text decoration, text, decoration, first, I'm going to remove the underline, so I'm going to use none. Then I'm going to convert these text into uppercase sooty, text, transform uppercase. After that, I'm going to define the font size font size 22 pixel. I think to do two pixel is great for it, and I'm going to set this pine. Then I'm going to change the font family font family, I want to use aerial font. Aerial. After that, I'm going to define letter spacing, gap between the characters, letter spacing, and I'm going to make it three pixel. Also, I'm going to define color. Color, I'm going to make it yellow color, otherwise, white color. I think white color is good for it, white. After that, I'm going to define height and width, height, height, and I want to assign 60 pixel height. Then I'm going to define with. We. Also for weed, I'm going to use 200 pixel. I think it's good for it. Then I'm going to define line height, line height, and her assign line height, 60 pixel. Also, we need to align the text center of this page, so type text align text align center. I'm going to set this file. Now we need to define border, border, and I want to use two pixel solid border, solid, our border color is for now, I'm going to use I think blue color. I think blue is good. Blue. Then I'm going to define the position, position relative, and I'm going to set this file. After I set this file, this is how it looks like. Now we need to work on the long border we saw in the dim to figure out how to create them, we need to work step by step. First of all, to create the left and right border, I will use the before pseudo element. Let's create the before pseudo element of this Anca tag, A, colon before. And inside the calibrss first, I'm going to create the blank content. Content, colon, it's a blank, and I'm going to do in this line. After that, I'm going to define the position. Position is absolute. Next, I'm going to define with and height. Height, I'm going to make it 60 pixel, then I'm going to define with Wi I'm going to make it 200 pixel. I'm going to define top position, top. From the top, I'm going to place it zero and from the left, I'm going to place it zero also. Now you can notice here we assign same height and weight, which we assign in our anchor tag. Until now, the before pseudo element have the exact size of this encord element. It has similar height and similar width. If I set this file, it going to sitting on top of it. Now I'm going to create the left and right border with it. Let me show you some type bordered, left, and I want two pixels bottle then is a solid border also solid. Then our border color is, I'm going to assign red color. Red. Next, I'm going to create the border right. Border, right, and hemo pass two pixels, solid border, solid, and our border color is Also I want to use the same border color which I use for the text. I'm flight this one. Now if I set this file, this is how it look like. It's a white border and here you can see the red border, and it's sitting on the original blue colored border. That's why you can hardly see them. Now I want to make this two border little longer. I'm going to increase the height of this two border. I'm going to increase the before pseudo element height. I'm going to make it 90, and I'm going to set this pile. Now you can see now it's look a little longer. Now the borders are 30 pixel longer than our anctag height because here we assign 90 biixel. And now we need to align this border middle of this content. I want to equally divide the border in the top and the bottom. For that, here, I'm going to use just top value. I'm going to make it minus fif ping. So it's going to divide the border at top and bottom. So I'm going to set this file, you can see the result. So this is the first part of this tutorial. At the next part of this tutorial, we are going to create the top and the bottom border. So thanks for watching this video. Stay tuned for our next part. 15. Border swapping button hover effect part 2: Good to see you guys. This is the second part of this tutorial and here at the section, we are going to create the top and the bottom border. Let's jump into the style CSS spie. Here, I'm going to create the upper pseudo element A at the rate upper. Then inside the Caris first, I'm going to create a blank content, contain and it alan content, then I'm going to define the position. Position, I'm going to pass absolute. Then I'm going to define height, height. Here I'm going to assengn height 60 pixel. Next, I'm going to defined, with, and I'm going to ascend with 230 pixel, and then I'm going to position it. From the top for now, from the top, I'm going to make I'm going to pass zero and from the left, I'm going to pass also zero. Then I'm going to assign border. Bordered. First, I'm going to assign border top, border top, and at top, I'm going to assign two pixels, solid border, and our border color is weight. Then I'm going to define another border for the bottom border bottom. Border bottom, two pixels solid border, and our border color is white. I'm going to sub this file. After set this file, this is how it looked like. Now you can see we have the top and the bottom border, and it is a little longer than width of this button. As you can see, Hero is set with 200 pixel, but for the border, we take 230 pixel and now we need to ship the border to the left side, little bit. We need to align it center. We need to vertically align it. For that, instead of zero, her pass negative 15 pixel px I'm going to satisfy this file, this is how it looked like. And now we don't need this blue border anymore. I'm going to hide this border. I'm going to comment out this line and set this file. Are set this file, this is how it looked like. And now we need to work on the hover effect. Remember, when I hover over this line, I want to change the border to their faces. I want to shape the top red one to bottom and left red one to right side, and this can be done very easily. So let's work on the hover pseudo element. Let's create the Her selector of deferred positive element. So tie, A, colon, hover, and then colon, I'm going to tie before. Then in the calibrass I'm going to use transform Pooper transform, and I'm going to pass rotate Y value, rotate Y. Then I want to rotate this element 180 degree, 180 DG I'm going to set this file. I going to rotate the before psudoelement at Y Xs 180 degree. If I hover my cursor on it, instantly, you can see the result. Basically, it's going to flip on the YXSder to happen smoothly, we need to go inside this before pseudo element and here we need to use transition. Sumo type, transition all and our time is 1 second. Obviously this file when I hober over this link. As you can see, this is how it changed the position. Basically it flip the element. Now you can see the border change the position exactly we want. Now we need to flip the after element. For that, I'm going to duplicate this section and instead of using before, I'm going to select after. Then inside the Cls here, I'm going to use rotate x value. Instead of using rotate Y, I'm going to use rotate x and I'm going to set this file. After I set this file, if I over my car on this button, you can see the result. But also we need to add transition on this upper pseudo element. I copy this value and property, the same value and property, and I'm going to paste it here. Now, if I set this file and whoever my cars are on this link, here you can see the beautiful transition effect. But if you want to make it more attractive, you can add little transition delay on upper pseudo element, some type transition B, and I want to durate up to 0.2, otherwise, 0.2 second. If I set this file and Herm cars are on it, now you can notice after I move the left and right, it moved the top and bottom, and it creates a beautiful effect. So I hope now it's clear for you how we can create this beautiful Hover effect. So thanks for watching this video statue for our next studio. 16. Creative border growing button effect: Hello, everyone. Welcome to the new lesson in this course. In this lesson, we're going to build another cool button HaiftT one. As you can see, this button hab border at top left corner and bottom right corner. And when I Huberm cursor, it increase the border height and width, and it's sit on this beautiful button Harift. So let's see how we can build. As you can see, side by side, I open my salt Studio code editor and my browser using Live server extension and I already created an TML document to name index dot html. With that, I also link with style CSS file and it's an empty file. Now, at first index dot StimLPage I'm going to create a button. Here I'm going to type button, and inside this button, I'm going to type submit. I'm going to sets file. After Sets file, this is how it look like. Then I will jump into my CSS file. Style or CSS. At first, I'm going to target the body tag, body using its tag name. Then inside the aliases, first, I'm going to say margin and I'm going to say margin zero, and I'm going to say margin zero, then I'm going to define the height, height, and I'm going to set it 100 H for height. Next, I'm going to define display. This play, I'm going to use display flex. After that, I'm going to align this item, align item center, justify content, justify content also center. Then I'm going to define the background color. Background color here I'm going to use hashtag 27, 2727. I'm going to set this file. Up to set this file, as you can see, this is dark gray background color. Also, we align this button middle of this page horizontally and vertically. Next, I'm going to style this button tag, Song type button, button inside the cars, first, I'm going to define border. Border, I'm going to set it none. Then I'm going to define padding padding. From top and bottom, I'm going to assign 12 pixel, and from left to right, I'm going to assign 40 pixel. After that, I'm going to define background color. Background color. For the background color, I'm going to search for wave color. Wave color and helm open any website. So from this web color, I'm going to pick one of the color. So I would like to go with this color light salmon. So I copy the hexa value of this color, and I'm going to paste it here. I'm going to set this file. Then back to the document. After that, I'm going to define font family. Font family, I'm going to use any font you can use aerial. Then I'm going to define font size. Font size, I'm going to use 22 pixel font size. Next, I'm going to convert this text into uppercase, text, transform uppercase. Also, I'm going to make our cursor point when I hop my cursor on this button. So to type cursor, I'm going to make it pointed. Also I'm going to position it. Position, I'm going to make position relative. I'm going to set this file. After set this file, this is how it looks like. Also, I'm going to assign little font to it font. I need a little bolder font here I'm going to assign 700 and I'm going to save it again. With that, I'm going to change the color text color, smotype color, and I'm going to make it white. I'm going to set this file. We style this button successfully. Now let's create the borders. First, we are going to create the border on the top left corner using before pseudo element, then we are going to create the border at bottom right corner using after psudo element. To create it, basically, we need to create a small box. Let me show you how. Here, I'm going to type button, colon, before element. Before. Then inside the colors, the first property, I'm going to use content, content, and here I type, I'm going to create an empty content. After that, I'm going to define the position. Position, I'm going to make it absolute. Then I'm going to define wd. Width, I'm going to make it 24 pixel. Also, I'm going to define height. Height, I'm going to define it 24 pixel. Then to position the square box at that corner at the laptop corner. From the top I'm going to position it zero and on the left side, I'm going to position it zero again. Also, I'm going to define a background color, background color, and for now, I'm going to define red color, RED, that we can understand the square box very easily. Preset this file, this is how it look like. Now, if you remember, our border ware outside the area. Outside, I want to say outside the button area. I'm going to ship to the square box, lept and little bit top. So I'm going to ship it negative five pixel, type minus five pixel, five pixel from the lab. Also, I'm going to use the same value for the top. I'm going to set this file. After set this file, you can see the result. Now, after ship it five pixel from the top and from the left, it go outside from this button area. Now, let's add the top and left border. So here, I'm going to use first, I'm going to use top border some type border, top. I want to use two pixels, solid border, and our bottom color is exactly the same color we use for the button. Copy the value color value, and I'm going to paste it here. Then I'm going to duplicate this line. This time, I'm going to create the border at left side, bottle late. I use the same border and I'm going to set this file. Set this file, you can see the border. On the top side and other one is the left side. Next, we need to animate this border. I want to grow when I hober on my cars on this button. We can do that very easily. We need to increase the height and the width of this square box. Let's create the hober selector of this button on the type button, colon, hole, colon, before. Then inside the civuss I'm going to define height height 100%. Also, I'm going to define width, width 100%. And I'm going to set this file. After set this file, if I hover my cousin on it, you can see the result. But we need to add little transition on it when I hover it on it because instantly it increased the height and width of this bar. Here I'm going to use transition property. Transition all. With that, also, I'm going to define the time for this transition which is 0.25 second. I think it's enough. I'm going to set this file. After set this file, if I hop my cars are on it, you can see the result. After add the transition, after set this file, if I hop my cars are on it, you can experience this transformation. Now, we need to remove this red background. We need just only the border. For that, I'm going to comment out this line and I'm going to set this file. If I set this file, you can see the result. Now we need to do the same thing for the border right corner. For that, we are going to use up Posido element. I'm going to copy this section and I'm going to paste it after the Her selector. Then I'm going to first, I'm going to change before after. After that, I'm going to change the position. First, I'm going to change top to bottom, and then I'm going to change left to right. After that, also, we need to change border top to border bottom and border, left to border, right. I'm going to set this file, and here you can see the result. And at the same way, we need to create the hover selected for this after element. I copy this section again and I'm going to paste it here, and here I'm going to replace the four with after. I'm going to set this file. Now after set this file, if I bar my cards are on this element, we achieve this desired result. Harry achieved this beautiful button Hover effect. I hope now it's clear for you how we can create it. Thanks for watching this video. Stay tuned for our next project. 17. Creative first letter rotating button effect: Hello, guys, nice to see you back. Once again, I'm back with a new project related button Haift in this project, we are going to create this beautiful button Haift. As you can see, when I Hoberm cards are on this button, you can notice a background rotate a little bit. Also, it increased the size of this first letter, B, and also it rotate the B letter, 360 degree. Let's see how we can create this beautiful button Hari fit. Let's jump into the studio code. So as you can see, side by side, I open my Visual Studio code editor and my browser using live server extension and I already create an SML document named index dot HTML. With that I link this document styler CSS file. We are going to start adding a Anca tag A and inside the ncatag I'm going to take a span tag span and inside the span tag, I'm going to type capital letter B that we can animate this letter separately. Then outside the span tag, I'm going to type the rest of the word. Button. Then I'm going to reroad my browser. Now we need to align this button middle of this page horizontally and vertically. For that, we need to go jump into the style dot CSS file. At first, I'm going to target the body tag, body the inside the cali vis first, I'm going to define height, and I'm going to set height 100 viewport height. Then I'm going to display display I'm going to make it flakes. Ap that I'm going to apply, justify contain centered. Then I'm going to type align items also centered. Up that, I'm going to define the font family font family, and I'm going to use Aerial font, aerial. And at last, I'm going to hidden the overflow area. Overflow hidden. Then I'm going to use background color. For background color, I'm going to type Hashtag 22, this dark gray background. I'm going to set this file. Next, I'm going to style this catch some type A and inside the CarissF property, I'm going to use text decoration. Text decoration, I'm going to make it none because I want to remove the underline. After that, I'm going to define wet. What, hed set weed, 160 pixel. Then I'm going to assign height. Height for height, I'm going to assign 60 pixel. And I'm going to define color colored, and I want to assign text color white. After that, I'm going to define border. Border, and I want to use, and I want to use two pixel solid color border, solid two pixel solid color border, solid, and our border color is white, Hastag if if A. I'm going to sub this file. After I set this file, this is how it look like. Then I'm going to align the text middle of this container. So to type text align, text align center. After that, I'm going to define line height, line height, and I want to assign line height, nearly 60 weixel I think 60 pixel is good. After that, I'm going to define font size font size, and I'm going to make it 25 pixel. And I'm going to sub this file. After sub this file, this is how orbit and look like. Then I'm going to make the position relative, and also I'm going to add transition. Transition, all of this element and our transition time is zero point something two second. I think it's good for it. I'm going to sub this file. Now let's create the white background. When you hover over this link, it going to rotate this background and we will use before psudoelement for that. Here I'm going to type ancha tag before psudoelement. Before inside the caliber says, first, I'm going to create a blank content. Content and I want to create a blank content. After that, I want to position it, position, I want to make it absolute. Also, you need to place it from the top, I'm going to pass zero and from the late, also, I'm going to pass zero. Then I'm going to define with height to this element. I'm going to use 100% and height. As I'm going to use 100% percent. Then I'm going to define background color. Background color, and I want to use white color, this color code. I'm going to satisfy. After satisfle as you can see, it covered the whole button and order to appear text above it, we need to use Z index. Z index minus one minus one, and I'm going to satisfy. Now, it should be invisible and when I hover over this link, it should appear and fade it. Also it rotated. I'm going to say opacity zero and I'm going to transition transition, and I'm going to define t 0.8 second. Next, I'm going to create a hover selector of this differ element. So here, I'm going to tie. So here I'm going to tie nga tag, colon, Hal. Over selector. Then I'm going to target the before element before. Then inside the caliber says, Here, when I hover on it, I want to set opacity. I'm going to make opacity one. I want to make it fully opaque, not the transparent. And then I'm going to apply transform property, transform and I want to rotate this element. Soon to type rotate. Transform rotate and I want to rotate it, I want to rotate this 15 degree DEG I'm going to set this file. After I set this file, when I over my cursul you can notice first, it's going to make the white background, the transparent background opaque, then it's going to rotate the element. Then it's going to rotate the background element 15 degree. Now after that, I want to change the text color when I over this link. I want to make this text color black. For that, I'm going to create a hover selector here I'm going to type Anca tag hover. Then inside the colors, first property, I'm going to use color. Color, I'm going to make it white, and I'm going to set this file. After set this file, if I hbar my cursor, sorry, we need to make it black because we already use white text color. I'm going to make it has tag to do this color code. I'm going to set this file. After set this file, if I hover my cursor on it, you can see the result. Now let's focus on the first letter B. If you remember, when I hover my cursor on this button, it increased the first letter size, and as you can see, Harry put the B letter inside the span tag. I'm going to target this span tag. Here, I'm going to type A, inside this A tag, anchor tag, I'm going to target span tag, span. Then inside the livers, first property, I'm going to use color, color, and I'm going to make it transparent. Then I'm going to provide the position position and I want to make it relative. Now you can see the first letter is now invisible because we said the color transparent. That's why it is invisible. Next, I'm going to create the before pseudo element of the span tag. Here I'm type A, span, a span, the before pseudo element. Then inside the Class, I'm going to create content, content, and put the tal letter B. Then I'm going to position it position, I'm going to make it absolute. Next, I'm going to provide color, color, and I want color this dark gray color. Sorry, I use white color, white. And then we need to use transition property. Transition. And here, I'm going to make transition on. And also need to define the transition time, which is 0.2 second. I'm going to set this file. Now, let's work on the Hard effect of this pen tag, Sandfoelement, some type anchor tag, Hal, span, colon, BFO. Then inside the color resis first, I'm going to change the color when I Hobar it. So type color, I'm going to make it dark colored 222. Then I want to increase the font size, some type font size, and I'm going to make it 80 pixel. Finally, we need to rotate type, transform, rotate, and I want to rotate it 360 degree D EG, and I'm going to set this file. So set this file if I hober over my cursor on this button, as you can see, the first letter B, rotate 360 degree. But the problem is, it's covered up the other letters. I need to move it little that it doesn't hide the other letters. With that, I'm going to use translate propriety, some type, translate. I'm going to ship to the negative 65% from the XXs and negative 10% from the YXs. After set this file, if I ho my cursor on this button, you can experience this beautiful button hover effect. Now it's shipped to the XXs -65% and and it's shipped to the YXS -10%. That's why it creates this beautiful effect, but what effect. I hope now it's clear for you how we can build it. Thanks for watching this video, stay tuned for our next project. 18. Four border growing bottom effect: Hello, guys. Nice to see you back. Once again, I'm back with a new project. Today in this project, we are going to create this beautiful button hover effect. As you can see when I hop my cars on this button, four different border covered this button. Let's see how we can bid. As you can see side by side, I open my user Studio code editor and my browser using fserEtension, and I already create an SML document to name index dot HTML. With that, I already create Stylod CSS file and I link this Styload CSS file with this TML document. Now, at first inside the body tag here I'm going to create a button tag. Button. Then also, I'm going to take a span tag, span, and I'm going to set this file. After set this file, this is how it looked like. Now, we need to jump into the stylo CSS file. Let's jump into this stylo CSS file and start styling. At first, I'm going to select body tag, body. Then inside the body tag, the first property I'm going to use margin. Margin, I'm going to assign zero. Then I'm going to assign display. Display, I'm going to make it flex. Next, I'm going to assign align item, align items centered. Also moti justify content center. Then I'm going to assign height, height 100 VH viewport height. Then I'm going to assign font family, font family area. Next, I'm going to assign background color, subtype background color. For that, I'm going to use dark grey color, hass tag 222, and I'm going to set this file. After set this file, you can see the result. Now you can notice it aligned the button middle of this page horizontally and vertically. Now let's target the button. Then I'm going to select the button. So to tie button inside the color resist. Inside the color resist, the first property I'm going to use background color, background color, I'm going to say background color red. The next property, I'm going to use border, Border, and I'm going to remove all the border from it, so I'm going to use Nan Velu. After that, I'm going to position it. Position, I'm going to make it relative. Then I'm going to define Wieden height. For weed, here I'm going to use 400 pixel and for the height, I'm going to use 120 pixel. Then I'm going to convert this takes, the button text into uppercase. Type takes, transform, takes transform, uppercase. Then I'm going to set this file. After I set this file, we need to increase the font size. I'm going to make font size font size, and I'm going to make it 45 pixel. And I'm going to save it again to order the text inside the button vertically and horizontally, I'm going to use line height. Line height, 120 pixel. Also also going to type text line center. Next, I'm going to add color to this spot color and color, I'm going to make it white. With that, I'm going to add letter spacing. Letter spacing, I'm going to add 15 pixel, and I'm going to set this file. After set this file, this is how our button look like. Now, let's create the top border, which comes in lept right side. For that, I'm going to use before pseudo elements. I'm going to type button button, colon, and here I'm going to type before. Then in the curses, first, I'm going to create a blank content. Content, it's a blank content. After that, we need to position it, position, and I'm going to make it absolute. Then I'm going to define where I'm going to place. From the top, for now, I'm going to place it zero from the left for now, I'm going to place it zero also. Next, I'm going to define width. Width, I'm going to use 100 person. After that, I'm going to define height. Height, but for height, I'm going to use four pixel, four pixel. And also I'm going to define the background color, background color, and I'm going to make it white. I'm going to sub this file. After set this file, this is how our border look like. Basically, it's not a border, it's a deep element. Now I'm going to move this element, before pseudo element lap side. Let me show you how. Here instead of using b value zero, I'm going to use -100%. I'm going to set this file. After I set this file, you can see the result. Now the line shipped to the left side. Next, I'm going to add transition, transition all, and I'm going to add zero point 0.5 second. I'm going to set this file. Now, when we heard about this button, I want to back the border to its original position. So to type, button, colon hover, colon, before element, before. Then I want to move this element ep to right side, some type, left value, zero is going to back to its original position. After set this file, if I hop my cursor on this button, you can see the result. At the same way, I want to create the bottom border. I'm going to ubicate the whole section and instead of using before, I'm going to use Ara. Then I'm going to change the position. Instead of using top, here I'm going to type bottom. Also, I'm going to move this element right side. Here I'm going to pass right -100% and I'm going to set this one. Also, we need to make some changes in over selector instead of using before, I'm going to use after instead of using led value, I'm going to use right. I'm going to set this file. I set this file, if I hold my Custer on it, you can see the result. Now at the same way, I'm going to create the left side and right side border. For that, again, I'm going to select this section and I copy it and I'm going to paste it here. This time, instead of using button, I'm going to use span. At the same way, I'm going to create the empty content just to change the position and we then height. This time, I'm going to use four pixel week four pixel and height 100%. Then I'm going to change the top value. Instead of using zero, I'm going to use -100%. And then I'm going to change let to right value, let to right. I'm going to make this value zero, and I'm going to set this file. After set this file, this is where we put this element. Now you can see it is sitting above the button, the line sitting above the button. Also, you can notice. Also you can notice it plays it right side of this button because we use right position zero. Now when you hover this button, I want to back to its original position. I want to say, from the top, I want to make it zero. So I'm going to create the Her selector of this button, so to tie button, colon hover, space, span, colon before. Then inside the Carlss then inside the car recess, I'm going to use top top value, I'm going to make zero. From the top, I want to place it zero position. I'm going to set this file. After I set this file, here you can see the result. When I open my car on this element, you can notice the result, how the before pseudo element in right side down to its own place. Now at the same way, we need to create the other element for the left side. I'm going to duplicate this section, the whole section, and instead of using before, I'm going to use after. To create the final border, instead of using top 100%, I'm going to make bottom. Bottom, 100%. -100%, instead of using right, I'm going to use left and I'm going to set this file. After I set this file, here you guys see the result. This is how we create it. Now, we need to move it upside when my cards are on it. For that, instead of using before, I want to use after element with Hover Effect. Instead of using top, I'm going to use bottom. I'm going to set the file. After I set this file, you can see the result. If I open my cursor on this button, you can see all the borders come to its original place when you hover on it. The last thing we need to do, we need to hide the overflow area. We need to hide these borders so we need to use overflow hidden. Inside the button head, I'm going to use over perverting. Overflow hidden. Also, I'm going to make the background transparent. And I'm going to set this file. Now after set this file, if I hop on my cutter on this button, you can see the result. This is how we can move and extend all the borders from the four different side and we create a beautiful button Hover effect. Thanks for watching this video. Stay tuned for our next project. 19. 2 cuts button effects: Hello, guys, nice to see you back. Once again, I am back with a new project tate CSS button hover effect. And today in this project, we are going to create this beautiful cutting button hover animation. Here you can see two cards on top botter and bottom botter. And when I hover it on it, as you can see, it covered with black background color. Also, it changed with the text color. So let's see how we can build this beautiful button hover effect. As you can see side by side, I open my Visual Studio code editor and my browser using live server extension and I already create an TML document named index dot HTML. With that, I already create a style file namestyle dot CSS. I link this file with this document. Then inside this body tag. At first, inside my body tag, I'm going to take an anchor tag. Then inside this anchor tag, I'm going to take a span tag. Span and inside my anchor tag hemo type button. Not bottom tag, just button. I'm going to set this file. After set this file, this is how it looked like. Now we need to jump into the style CSS file, and at first, we need to align this button middle of this page. Also, I'm going to change the background color. Here, first, I'm going to style the body section body. Then in the calibrses first probity, I'm going to use height. I'm going to assign height 100 viewport height. Then I'm going to assign this probability. Display flakes. Justify content, justify contain center. Also align items center. Then I'm going to say font family. Font family, I'm going to use Aerial font. After that, I'm going to hid in the overflow. Overflow hidden. I'm going to set this file. A to set this file, as you can see, we successfully align these, but in middle of this page. Next, I'm going to style the anchor tag. A, then inside the calibraces, the first property I'm going to use text decoration. Text decoration, I want to remove the underline, so I want to say none. That I'm going to set with 160 pixel. Then I'm going to set height, height only 60 pixel. Next, I'm going to use color. Color and here, I'm going to set color black. After that, I'm going to say line height. Line, height, I'm going to set it 60 pixel. Then I'm going to align the text center of this button type text align text align center. After that, I'm going to make it capitalize. The text capitalize some tip text transform, text transform, I'm going to make it capitalize. Next, I'm going to define the font size. Font size, I'm going to make it 25 pixel. After that, I'm going to define the position of it, position, I'm going to make it relative, and for the smoothness, I'm going to use transition property. Transition, all of the element and our transition timing is 0.2 second. I'm going to set this file. After set this file, this is how our button look like. Next, I'm going to target the span tag which is inside the anchor tag, sub type A, span. Then inside the car avases I'm going to define the position. Position, I'm going to make it absolute. After that, I'm going to define the width width 100%. Then I'm going to define height, height also 100%. After that, I'm going to define position. I want to place it top top left corner, some type for top value, I'm going to pass zero. For late, I'm going to pass also zero. Then I'm going to define a background color. Background color. For now, I'm going to use red color. I think for example, then I'm going to define the border. Border, and I want to use two pixel, two pixel, and our border is solid boder Solid. Solid border. Solid, and our border color is black. I'm going to set this file. After set this file, this is how it looked like. Basically, I don't want this red background, I just want the border, so I'm going to comment out this lion, don't need it. I'm going to set this file. Next, we need to create the cuttings that exist top and the bottom border, and we are going to use before pseudo lamin to create that. Here I'm going to tie span colon before before pseudo element. Then inside the lorss the first property, I'm going to use content. Content is a blank content. There I'm going to define the position. Position, I'm going to make it absolute. After that, I'm going to define width, Width, here, I'm going to use eight person width. 8% of this button. Next, I'm going to define height, height, and I'm going to increase the height, so I'm going to use 500%. 500% of this button height. Next, I'm going to define a background color. Background color, I'm going to use red color red. And I'm going to set this file. After set this file, this is how it look like. Now I'm going to center this element metror of this button. For that, I'm going to pass to value, top, and I'm going to pass 50%. Next, I'm going to define lip position, p also 50%. Then I'm going to use transform property, transforme I'm to pass translate value, translate and -50%. For XX and for xs -50%. I'm going to set this file. I accept this file. This is how it looked like. We successfully align this element in the middle of this button. Now the red dground is centered inside the button. But the problem is, it is in front of text and I want to make the text appear in front of it. I'm going to jump into the span selector and here, I'm going to use Z index, Z index, I'm going to pass minus negative one, and I'm going to set this file. This file, as you can see it solves the problem. Then to achieve the cutting effect, I'm going to rotate this element. Here I'm going to type, rotate, and I'm going to rotate it up to 60 DEG, I'm going to sub this file. I think I'm going to rotate it and I'm going to rotate it at opposite directions, so I'm going to make it -60 degree and after set this file, you can see the result. We rotate this element counter clockwise. Now, let's work on the hovering effect. When I hover over this link, I want to extend the width of this red element. I want to make it 100% instead of 8%, that we will cover up the link completely. But before in my span tag, I'm going to add transition all transition all and I'm going to add 0.22 second. After that, I'm going to create a hover selector up before spentag. A colon hover. Space, span, then I'm going to tie colon, colon before. Then inside the calibraces. First, I'm going to extend the weed, if I hover my cars on it. We, some set with 100 perse. After that, I'm going to change the background color. Background color, I'm going to make it black. Now, after I set this file, if I hover over this link, you can see the result. It extended up to 100%, also, make it black when I hover on it. Because of this black color, we are not able to see the text anymore. When I hover about this link, I want to make it white. I'm going to tie anchor hover. Then inside the color ress I'm going to make the color white. I'm going to set this file. After I set this file, if I hover my color on it, you can see the result. With that, on hovering, I want to rotate this red background. I want to make it 60 degree when I hover on it. Positive 60 degrees. I'm going to copy this line and I'm going to paste it here. I'm going to change negative 60 degree to 60, positive 60 degree and I'm going to set this five. Whenever I hover about this link, as you can notice, the red background root at 60 degree. And the only thing is late, we need to change the red background and we need to make it white. Because of it, we are going to achieve these two cutting. I'm going to jump into the before elements section and I'm going to make it red to white. I'm going to set this file. After set this file, here you can notice the cuttings. Also, I'm going to jump into the anctag selector, and here. I'm going to say it overflow, overflow heat. Atomic overflow hidden, if I set this file, as you can see, I think there is a problem with it because I think, yes, we need to use box sizing. We do not use box sizing for that. I'm to use the universal selector star and inside the square inside the Calibra here, I'm going to type box sizing. Box sizing boerbx. If I set this file, you can see the result. Now we have these two cutting my inner button. If I hold my curs on it, you can see the result. This is how it animate this button. Basically it increases the width of this before element. Instead of 8%, it increases it up to 100% and provide this beautiful button hover effect. I hope not slur for you. Thanks for watching this video, stay tuned for our next project. 20. CSS 3D Flip on Hover Pure CSS3 3D Button Hover Effects: Hello, guys. Good to see you back. Once again, I am back with another project. And today in this project, we are going to create this beautiful button hover effect. We are going to build this three D button hover effect. As you can see, there is a button. If I Her my cursor on it, you can see the result. Here you can see the opposite part of this button. It flip the button and return a new taste. Click Here. It's a Her effect animation button, but it is pretty advanced. So without wasting your time, let's start the practical and see how it's work. As you can see, side by side, I open my Visual Studio Creator and my browser using lp server extension. And also, you can see I already create a TML document named index dot steml. With that, I create a CSS file, style dot CSS, and as you can see, I link this style file with this ETML document. So first, I'm going to create a NCat tag inside the body tag, S type A. By default, I don't want to redirect it, so I want to use has tag. Now inside this anchor tag, I'm going to create three new span tag, span class, front. Then I'm going to duplicate this span tag to time. Our first span class name is front and our second span class name is center, sum type, center. Our last span class name is SdType B. Then in our front side, I'm going to type click and in our backside, I'm going to type hair. For our center span tag, I want to leave it blank. If I set this file, as you can see, as you can see in my browser, here it print, click here, top left corner of this browser. I successfully done our stable part. Let's move to the CSS file and style this page. At first, I'm going to style our body tag, some type body. Inside the class, I'm going to set marine zero, Barzin zero, and also I want to set padding zero padding zero. Then I'm going to use font family propity SotypeFont family, Sansa. A I'm going to set a dark background color to our body. Background. And I'm going to use hexa VH, 26, 26, 26. If I set this file, you can see the result. As you can see in my browser, now our background color is dark gray, and now we need to style this anchor tag. Inside the anchor tag, we have total three pan tag. So let's style the anchor tag. So slate, A, inside the Cali recess. At first, I'm going to use position property position. Position absolute. Now I want to align this anchor tag middle of this page. For that, I'm going to use top property, top 50%. Then I'm going to use P property. P 50%. If I set this file, you can see the result. As you can see, it align our anchor tag middle of this webpage. Next, I'm going to use transform property. So type, transform here, transform. Transform translate. As you know, using translate method, we can move an element from its current position according to XXs and YX. For XXs I'm going to pass -50% for YXs also I'm going to pass -50%. Then I'm going to say heightened weed to this encer tag. At first, I'm going to tie weed. With 200 pixel. And then I'm going to say it height property, height, height, 60 pixel. If I set this file, you can see the result. And then I'm going to say text align center. Text align center. As you know, we are going to create a three D uber button. For that, we need to use another property, which is transform style, Sumo type, transform style. Transform style here I'm going to use preserve three D value. This properties specify how nested elements are rendered in three D space. As you know, we need to use this property with transform property. Without transform property, we cannot use this property. We learned about it in our tutorial series. Then I'm going to use another property which is prospective Prospective 1,000 pixel. Also I'm going to say transform or in position, transform or Z center center. If I set this file, as you can see, now it perfectly align our content middle of this web page. We cannot understand this prospective and three D transformation because we do not style our span object. Now we need to style our spare object. As you can see, we have total three span object. Let's style all the object at once. For that, I'm going to select span tag. Span. Is that the Kalis is, at first, I'm going to type position property. Position absolute. Next, we need to align this span tag, so top zero, it zero. And also, I'm going to say height and weight, height, 100%. Weight, 100%. And then I'm going to use did Display block. And also, I'm going to align the text inside the span tag. So I'm going to type text align text align center. And then I'm going to set line height, line height, 60 pixel. If I set this file, here you can see it overlap our text. Next, I'm going to set font size font size, 24 pixel. And also, I'm going to set a background color to the span tag. Background. I'm going to use RGVAvalu RGB. As you know, first, we need to pass red value, then we need to pass green value at last blue Value. With that, we need to pass Alpha Val. We can control the transparency using Alpha Val. That's why we need to use this elm. So here, I'm going to pass 255 for red, 255. And then I'm going to pass once again, 255 for green and also 255 for blue. And for our Alpha Valu, I'm going to pass 0.10. And now we need to change the transform style. So I'm going to tie transform style transform style, preserve three D. Now I don't want to show the backside of our span tag. When it rotate, we don't want to show the backside. For that, we need to use Apoparty and you know that, which is backspace visibility. Back Backspace visibility, and I'm going to set hidden value because I don't want to show the backside. Then I'm going to set the border radius of the span tag, border radius, 30 pixel or next properties takes transform. Next, I want to transform the text into a uppercase. For that, I'm going to use Tex transform property, takes transform, uppercase. Next, I'm going to set a color to our text. Color White. If I set this file, you can see the result. With that, I want to say it transition property. Transition. 1 second. As you know, we have total three span object inside the cat tag. I'm going to transform all the span tag differently. At first, I'm going to transform the front one and then I'm going to transform the back one. At last, I'm going to transform the center one, and we are going to run the transformation using Her selected. Let's back to the CSS file and start with our first span tag. I'm going to type span dot front. Then inside the aliases, I'm going to use transform property, Transform, transform, rotate, X, and I want to rotate it zero DT. With that, I want to move it at Zdx's direction. So I'm going to type translate ZT pixel. If I set this file, you cannot see the result because I want to make this transformation when I hober my cursor on this button. Now I want to rotate this button when I hoar on it. For that, we need to create a Her selector. So I'm going to duplicate this line and I'm going to tie cut tag, colon hover. So when I hober my cursor, I want to rotate our front span tag minus 18d. If I set this file and hober my cursor on it, you can see the result. You can see our first span tag rotate minus 180 degree. Same thing we need to do for our back span tag. So I'm going to select this code and we get this line. So here I'm going to type span dot B. By default, I want to rotate it 180 degree, and I'm going to use same value transit pixel. In our Hober selector, I want to rotate it zero DD, back, and I want to rotate it zero. If I set this file and Hobermcas are on it, now you can see the rotating three D effect. Now I want to set a background color for our center span tag. This one. For that, I'm going to type span dot center. Inside the aliras I'm going to use background property. Background, and I'm going to use gradient color, and I'm going to use linear gradient. And I'm going to use lip direction. So I want to pass to it. Oma and now I'm going to use hexa Color Val has tag, C 30 1a5b. It's a pink color and our next color is has tag 7129 BD. It's a purple color. If I sit this file, you can see the result. Now for our center span object, I want to turn on backspace visibility. I'm going to type Backpace visibility and I'm going to use visual Value. Then I'm going to create Over selector for our center span tag. I'm going to remove front keyword, and I'm going to type center. For rotates, I'm going to use minus 180. But for translate st, I'm going to use zero pixel. If I set this file and Huber Mikaza on this button, you can see the three D effect. So we successfully create three D flip Huber button. I hope you like this project. Thanks for watching this VD. Stay tuned for our next exercise.