CSS Button Hover Animation Effects using Only HTML & CSS

what is up everyone so today I'm gonna show you how to make two super simple yet clean looking hover animation effects for buttons only using HTML and CSS so the first one pretty standard pretty basic but basically you hover over it and it slides across like this and then we have these second animation on the right and pretty much just like this where it fades out to the sides so as you can see there left one right one left one right one so now for the to let me show you how I made this all right first things first here I am on V s code and I'm gonna go ahead and go up to the files right here create our index.html and then I'm gonna create a style da CSS all right for index I'm just gonna go ahead press shift 1 so exclamation mark press tab standard one you see here let's change this to hover buttons or button hug whatever you doesn't really matter for this part and then simply go in the head tag add a link tag and then let's add our style got CSS in the href quotes alright and then let's go ahead and make sure that this is working so h1 tab let's put yo save it and then I have live serve installed so if you don't have that go to this little icon search up live server install that but basically right click open with live server and then it pretty much will open up there alright perfect so now we are set to go alright so the HTML is probably the easiest HTML you've ever seen in your entire life but basically we're gonna go erase this and put dots container press tab now we have a div with the class container press ENTER inside of this and then I'm going to create a button I must say dot BTN - one that's basically button one and then inside I'm gonna put hover me exclamation mark you can name whatever you want to and then a second button we're gonna just change it to button two and then let's just make sure to change this so you can see the difference awesome right there I not save that now we got to clean buttons all right so now we just got to style it and then we're pretty much set to go so for this example I do have a Google font but for just to save times sake it really doesn't matter if you use the fun or not but if you did want to have it it's basically its source sans Pro and actually let me just show you how I install this in case you're very new you have no idea what happened essentially I searched google fonts and just type in source sans Pro and then I pretty much went down and I installed the 600 sizing semi ball would select this style here go to the embed tab and since this is a super super tiny project I'm just gonna import this so I'm just gonna go like that copy that link which essentially is this link right here and then we'll have to copy this and we'll get the font family just copy this for now and then we'll go ahead and enter this so I'm just gonna try to everything and just say copy that right there so now we have this source sans pearl fonts and then let's do letter um actually yeah let's do letter - spacing we should do 4 pixels and then let's do background color and I just set that equal to hashtag - five - five - a save that there and let letter spacing that's option you don't have to do that stuff but now you can't really see anything going on but let's go ahead and create the first button so I'm just target the container first and this is not mobile responsive because it's just a just buttons but we're gonna target the container let's display flexus first and then let's have a flex direction of row so they're on the same row justify content with space it evenly aligned items let's do Center and if I save that right now it's like this and then I just do text you can do text align technically you don't need to cuz dirty why she has do text align nice to make a centered and then let's go and do min height so we can have this in the middle of the screen so Ben height and 100 VH so now it's like this and I'll just go ahead and target the first button this one's pretty simple and there's other ways to do this I have another video I did it in like a website but this I found is the easiest like this is legit the easiest way I've seen a dude this effect but basically let's create the button so let's do with 300 pixels let's make the heights 100 pixels I'm gonna put border I'm gonna be none and then color of the text so I just put it as white and then background - color and I have RGB what's the RGB print the seas to 5 5 comma 0 comma 68 and then let's do border radius so I want that to have the rounded corners so that's 4 pixels so I say right now this is what it looks like right there and then here is the way this is one way to do it now there's like a million ways I'm sure you can do this but this way is the easiest is like basically like one or two lines of code how this affects we can use a box shadow I want to say inset then 0 0 0 0 and then hashtag f9e 506 so you save that now that's gonna happen because it's BC set to 0 and then let's do a transition so that whenever we hover over it you'll see some quote like a delayed so let's see ease still ease outs this just 0.3 seconds and then font size just be to Ram each Ram divided the fault is 16 pixels so basically it's 2 times 16 and then outline if I don't use outline I'm gonna say outline done before I save it though if I click on the thing - that blue line kind of ugly looking save it and now the outline is gone when I click on it and now the magic effect the probably the most basic way to do this effect that I've found there's there's another way to do with like before and after and you have to like position and everything well for this sake this part we're gonna use it like this and then box-shadow and then we could pretty much copy this entire line right here actually so just go ahead and copy this and all I need to do is change this first zero right here and just put it the size of the width of our button so our button is 300 pixels wide so we have it here I'll save it and then basically you got it going right there now if you were to change this to like a hundred pixels you'll see it only goes 100 pixels now what the other method was it before and after it's similar effect but this is so much more code and a lot more I would say stuff that'd be confusing but pretty much you can see here we hover over it when I have on desktop and you can see like that so now I just want to add like the last part where we have cursor:pointer so that the hand shows and then colors change it to black so you can see so hashtag zero zero zero save it and then help right here boom cause black so that was probably the easiest way to do it feel free to comment down below alternative methods or ways that I guess you can do some other ways to where you can do much more stuff but this way for the least aside slide out effect is pretty basic but if you're trying to do like up-down and other things like that then you probably use it before after I'm just gonna go ahead and comment Li just say seconds button press ENTER so now we can go into stock class BTN - - and with height let's copy the first original part cuz it's pretty much the same for the first four so with height border and then color to copy that in there so I save it you can't really the background yet but it was kind of weird but cool at the same time and let's set the border radius four pixels as well and let's say transition let me see what is not actually we Tenley could just copy let's see mean outline fonts transition yeah that's pretty much all we need from this so let's take border-radius transition font size and then right there and then let's go ahead and do a border : and let's say 3 pixels solid and then a hashtag f2f bf2 now you can see it like this and then let's do position so we need to do position:relative so that we can have a see index if you don't put that you go crazy and you're not gonna know why what's going on and basically just just put position relative so we can have these z-index and then there we go is one because the issue I was doing when I was making this is the when I hover the TEC disappeared but I figured out what this and then let's go and just do BTN so dot BTN to colon hover color let's keep it white so I just like ffffff and then I just cursor:pointer save there and then now you can see nothing happens but now let's go and here we're actually gonna utilize before now so before we didn't use before but now we're actually going to use it so BTN - - I'm going to say colon before think curly braces I'm gonna say transition I'm put zero point 5 s seconds aw ease and then I'm gonna say position absolute and then we're gonna set the top zero and this is the way the effect goes left and right so we're gonna say left and we're gonna start at 50% right it's gonna start at 50 percents bottom just gonna be 0 and then opacity spelled that wrong Oh Pass City and then put a zero and if a constant we're gonna make this point so just put quotes there's nothing in it and then the background color just gonna match the border which was tag for two FBF two and let's go under this and we are almost complete so right now if I save this nothing happens so this last part when they hover is the magic effect right here so that BTN - - colon hover colon be four quotes and let's do transition transition 0.5 s all E's and then let's do a left so I'm gonna go to the left's at zero and then I want it to be right at zero and then opacity let's make it two once and I can see this and this is the most important is Z index negative one save that and now we have that effect here so now if we bring this over first effect second effect super simple super easy so if you enjoyed this video go down below and give it a thumbs up subscribe you're new to the channel comment down below any other cool tips and tricks out there and aside from that I will see you in the next video peace

Channel: Brian Design

Views: 83,950

Keywords: css button hover animation, css button hover effect, css button animation, css button hover change text, css button hover fill animation, css button hover after, css button hover slide, css button hover transition effects, button hover effects css, button hover effect, button hover css, button hover effects html & css, html css button animation, html css button hover effects, button css effects, button css design, button css code, hover css tutorial, hover css animation

Id: zPcvAwp71uA

Length: 12min 19sec (739 seconds)

Published: Thu Jul 09 2020