Animated Sliding Button Tutorial using HTML & CSS

hi everyone welcome to my channel this is my first ever video so today i thought i would show you guys how to go about creating an animated button so as you can see when you hover over it this lovely sort of gradient color slides in in the background so if you'd like to see how i achieved this stay tuned and let's get into it okay so the first thing you need to do is create a folder and then once you've created your folder you open it using your vs code and as you can see i've got mine here and it's called animated button is what i've called it and the first thing i'm going to do is i'm going to add a file to that folder and i'm going to call it index.html like that and then the second file i'm going to add to this folder is a style dot css file just like that okay so now i'm going to go back to my index.html and i'm going to pull up a html boilerplate template by using my exclamation mark and hitting tab or enter and there it is if you don't have this just simply go to your extensions tab and put in the search bar html boilerplate and you will have loads of templates that come up and shortcuts that will help you to get that up and so the first thing we're going to do is just give it a title so i'm going to call it animated button okay and then the next thing we need to do a very important step is to link our style sheet so in this case the name of the um file is called style.css so in the href you would put style dot css like that and then save okay so that's ctrl s or command s depending on what you're using and just like that the style sheet is linked to the html document so now we're going to go in between our body tag and we are going to create a container so i'm going to write div and i'm going to give the div a class of container like so and then i am going to create a button element okay and i'm going to give this button element a class of btn okay and then i'm going to create an anchor tag like so we're going to give it the h of a hash okay because that's sort of the default index.html and then inside the anchor tag we are going to add a span and inside the span we are just going to put some text and it's going to say hover me so that the user knows exactly what to do once they have um come across the button and just like that that's all the html we need and what i'm going to do now is i am going to open this using my mouse my in my live server so what that does is it opens it in the browser and shows you what your page or your button looks like so in this case this is the page the button is right in the left hand corner it's not very cute as you can see it needs a bit of styling so that's where the css comes in so the first thing i think i'm going to do is i'm going to change the color of the body at the moment it's white as you can see and i think i'm going to make it let's see a nice maybe this sort of color so let's go into our style sheet and the first thing i'm going to do is i'm going to target the body of the html document and i'm going to change the color like i said so background color is going to be 2 2 2 and then i'm going to save that and let's see if that's right so there you go this is the background color now so as you can see my style sheet is obviously linked very correctly because it's um come up so if you ever sort of you know try to style something and you notice that it's not working always check that you've linked your style sheet okay and the next thing i'm going to do is i'm going to now position the container as you if you remember the container is what holds the button so it's this here and i want the button to kind of sit in the center of the page like here okay so the first thing i'm going to do is i'm going to style the container to position it okay and the first thing i'm going to do is display effects okay then i'm going to justify its content to center and then i'm going to align items to center and then i'm going to hit save and let's see what's happened okay so as you can see the button's now moved into the center here but i want it to be down here so i need to change the height okay so let's change the height to 100 view height viewport height sorry and then we're going to control save go back and see what that looks like and yep that's exactly where i want it to be so we are done with the container now the next thing i'm going to go ahead and style is the button class always remember when you are selecting classes it always starts with a full stop or a period as you can see there followed by the class name that's how you target classes in css and now i'm going to go ahead and style the button and just make it look a little bit more usable so first thing i'm going to do is give it a display of block then i'm going to give it a width of 20 of the width of the container okay so let's save that and see what that does and there you go this is 20 of the width of the container okay now as you can see it's a bit skinny and it needs a bit of padding so the next thing i'm going to do is add a little bit of padding okay and i'm going to go for 14 pixels top and bottom and 30 pixels left and right like that and i'm going to hit save let's go back and see and as you can see it's got lots of white space lots of space so that's 14 pixels up and down and 30 pixels left and right okay and so the next thing i'm going to do after that is i am going to target the border okay and i'm going to make it one pixel solid line and i'm going to make the color white okay and i'm going to hit save you're not going to be able to really see that because it's on a black background so i won't show you and then i'm going to make the position relative like so and then i'm gonna hit save okay so that's the button pretty much done okay so the next thing i'm gonna do is i am going to target the anchor tag okay so let's do that now a and what i want to do is basically style the text okay because that's the anchor tag here i want to style the text make it look better okay so the first thing i want to do is change the size of the font so the font size will be 18 pixels okay save and then the next thing i'm going to do is change the font family i think i'm going to go for sans so there it is and then the next thing i'm going to do after that is i'm going to change the color and the color is going to be sort of like a gray color one up from the background color so that's going to be a 333 like that and ctrl save and then i'm going to in fact why don't we look at it and see what's happened okay so this is it at the moment this is the styling we've got so far as you can see it's got this line at the bottom i don't really want that there so i'm going to change that and i'm going to say text decoration none and then i'm going to hit save let's see what that's done yep as you can see the line is gone so next thing i want to do is transform the text so that it's up okay so text transform is uppercase like so then the next thing i'll do after that is space out the letters so letter spacing i think i'd like them to be a bit spaced out so they're not too sort of squashed together so i'll give it a spacing about two pixels and then save and then i want to align the text that's in the button to the center so you would do that by typing text align center and then the next thing i'm going to do is add a transition to all the elements it within the button so all and i'm going to give it a transition duration of maybe 0.45 seconds and yep save that and let's go and look at our button and see what's going on and as you can see all the styling that i've put together has sort of come to life here looks a lot better doesn't it so the next thing we're going to do is just sort of target the span of the anchor tag if you remember that is here gonna target okay so we're going to write a span and we're going to change the position to relative okay and then we're going to give it a z index of two now if you're not familiar with the z index what that is is basically like think of it as layers if you're familiar with photoshop or with um music production or video editing or anything like that sometimes when you're editing you'll come across layers and the layers kind of represent sort of this sort of hierarchy and it will depending on where on what position the layer is in will depend on how visible it is if that makes sense and so in this case i don't want the span to be right at the top i want it to actually be just one down so i've given it the index of um two okay so the next thing we're going to do after that is we are going to target the pseudo element which is the after element and what the pseudo element basically is this particular pseudo element of after what this is is basically when you want to play some content after the main bit of content okay so in this case i'm gonna make this position absolute right and this position is kind of gonna move the um after into the position of the actual anchor tag okay and then i'm going to um apply some content i'm not actually going to put anything within the speech bubbles of the content okay and i'm going to position it so top is going to be zero the left is going to be zero oops not that low zero and the width is going to be zero and the height is going to be 100 of the button or the anchor tag okay and then i'm going to add a background okay this background and i want the inside of my button to be like a linear sort of gradient so i'm going to select a linear gradient like so and i want the linear gradient to go at a sort of 90 degree angle so the first thing you do is declare the 90 degree angle whichever angle you want it to fall at and then i'm going to use a red green blue value to pick my colors i'm going for a sort of violet that sort of gradually transforms into like a pink color so let's start with the violet and the number for that is seven three one four one two six like so okay and i want that to start at zero percent okay separate the next color by a comma and i'm going to put in my second color which is also an rgb value and that falls at one two one nine one one six okay and i want that to go up to a roughly around 45 percent of the button okay and then the final color i'm gonna add is the sort of pink color and that is let me scroll up for you guys okay and that will fall at two five five zero one seven zero okay and i want that to go up to 100 of the buttons width okay and then i'm going to save that next i'm going to add a transition to this after sudo element okay and it's gonna transition all again and it will be the duration of 45 milliseconds really okay and save that and the next thing i'm going to do is add a hover state to our button so that when the user hovers something's going to happen and in this instance we want the color of the text to change to white okay so control save and i also need to now add a hover state to the after pseudo class or pseudo element should i say after and then right what i want is for the after element once it's been hovered over that it will be um a width of 100 okay and so what that's going to do basically is every time you hover over the button you will see this okay this will be launched as a result of hovering okay so i've saved everything now and i'll give you an example of what i mean so let's go and see our button so here's our button and let's hover over it and there you go that is our button okay feel free to play around with it change the colors do whatever you like to it add it to your own projects thank you for watching i hope you enjoyed this tutorial i'll be back with more videos like this more in-depth tutorials i'll also be back with some speed code type tutorial so stay tuned don't forget to like comment share subscribe and i'll see you soon bye

Channel: Frontend Fanatic!

Views: 957

Keywords: Animated button tutorial, HTML & CSS, css buttons, css tutorial, css for beginners, css hover effects, how to style a button with css, html & css for beginners, learn html and css, css animations tutorial, web development for beginners, web development tutorial, web development, frontend development, easy css, front-end web development, css button effects, css button, css button animation, css button click effect, css animated button, Animated Sliding Button Tutorial

Id: MqNpLMdrO-Y

Length: 15min 13sec (913 seconds)

Published: Sun Oct 03 2021