so hello everyone welcome back to the channel so in this video I've decided to teach you guys how to create floating buttons now floating buttons are the buttons which you might have seen in many websites wherein there are buttons which stay fixed onto a specific place even if you scroll the page or change the size of the browser they stay at that specific place and when you click you could see something like a subscription panel or could be like a chatting option could have the social media links so in this video we're going to be creating that but in our one we're going to have something sort of like a mini navigation menu something like that so it's going to have three stuff so the first thing it's going to have a call option and then it's going to have an email address icon and then one for the chat now you can use anchor tags to link various page and stuff to these but i'm gonna keep it simple so first let's check out what i have built and then we're gonna be diving in deep in our css and html and we're gonna learn how to create it so this is the floating button that i was talking about now this has three small icons now you can see that uh i've added a bit of animation and so when i hover you can see that these three icons popping up now you can add in anchor tags link them to various page if you want so in our HTML first I'm gonna be linking the material icon since we're gonna be using that and then inside of the body we're gonna create a div with a class of floating container which is gonna contain everything inside of it and then within which we're gonna have our main button which we can name as floating button and then right after that we're gonna have element container which is gonna contain all the different elements inside of a span Now these fans would be named as float element and then inside of it I'm going to be using the eye tag with material icons. Now in CSS I have some basic styling going on and I've also linked the Roboto font family since we're going to be using that. Now first we're going to want to position the floating container to fixed and we're going to give it a width and height.
Now we want it to be positioned at the bottom right corner so I'm going to be giving bottom zero and right zero and also a little bit of margin and then Next thing that we're going to do is when we hover on to the container we want its height to increase by 300 pixels and Then when we hover over the container, we also want the floating button to have a translate A box shadow and also a transform translate y to 5 pixels. All right and we'll also add in transition all to 0.3 seconds. Now next thing we're going to do is we're going to style the floating button by giving it a position absolute value and width and height and also a background with left right and bottom to zero and since it's going to be circular in shape so we're going to give border radius to 50 percent.
Now we want this plus icon at the center so we can do that by giving text align and to center which is going to position it horizontally and then to align it vertically at the center we're going to use line height to 65 pixel that is the height of the container so it's going to come at the center now we also want it to have a bit of transition and also the font size and z index and we want it to have a cursor of pointer now you can add in box shadow i have added so even if you don't add it's still going to look good so i have added that and also transition all of 0.3 seconds then we're going to style the float element now each individual element is going to be a different one so we're going to add in display block and also position relative now since this is going to be circular in shape so we're going to add in border radius to 50 and would add height width and also a little bit of margin and color to white and display property to grid and place items to center since now these individual items going to be at the center and now by default we want them to be invisible so we're gonna add z-index to zero opacity to zero and cursor to point now we want each individual icons to have different background and a different box shadow so I have added them here with the n child one two and three and would Add in a different background and box shadow to each individual element now you won't be able to see this space because they are still invisible now the next thing that we're going to do is we're going to add in the come in animation that you just saw so it's gonna have four states starting from zero then 30% then 70% and all the way to 100% now first it's gonna have an opacity of zero and at 30% is gonna have a translate X of minus 50 pixels and also a scale of 0.4 that is it's going to shrink in size and then at 70 it's going to have translate x to 0 meaning that it won't actually move from its x-axis but it's going to increase in size and at 100 it's going to have a scale of 1 and opacity of 1 meaning that it's going to come back to its original size and also opacity to 1 that means it's going to be visible now we want each individual um float element to be seen only when we hover over this plus button so we're gonna do that and then add in the animation come in with 0.4 seconds of duration now we want to move on forwards and with an animation delay of 0.2 seconds now for the second one we want an animation dealer of 0.4 seconds and for the last one we want an animation delay of 0.6 seconds now with this we are done with our floating button so if you guys like this video please make sure you like the video and if you're new to the channel please subscribe if you haven't meet you guys in the next one