3 Awesome CSS Button Hover Effects Using HTML & CSS

hey i'm hunter from skillthrive and in this video we're going to create three modern css hover effects to get started we're going to be writing our code and code sandbox to io so if you don't already have an account go ahead and sign up and create a free account and once you have that and you're logged in go ahead and click on create sandbox now under official templates you should see this static but if you don't you can always come up here and then filter templates and then search for static here go ahead and click here to create a new static project all right and now that we have this the first thing we want to do is just go ahead and get rid of this h1 here i'm going to zoom in so it's a little easier for you to see the code go ahead and make this a little smaller all right so the next thing we want to do is just go ahead and change this title to something like three modern css hover effects and then what we want to do is we want to pull in the font that we're going to be using in this project which is going to be coming from google so we'll head to fonts.google we'll search for the font that we're using in this video which is poppins go ahead and select it come down and select the regular 400 then you want to copy this link tag come in and then paste it right below the title then let's go ahead and save that and now we should have google this pop-ins font loaded and we can use it in our css below this we need to go ahead and import our css now out of the box code sandbox and even vs code come with this tool called emmit preinstalled which allows you to write html really quickly so what we can do is we can say link and then we can just use our arrow down to css and then click on enter and now we have our style sheet imported now right now we don't have this style sheet created so let's go ahead come over here click on this icon to create a new file and call this style.css okay so that's everything for the html as far as the head of the html now what we want to do is go ahead and write all the html here in this body tag now again i'm going to be using emmett here to write the uh the html really quickly but if you're not comfortable with emmit yet just go ahead and copy the html that's generated from emmett so what we're going to do is we're going to create a div this div is going to have a class called container and here we're going to have another div called buttons and in this div we're going to have our buttons and that's going to be in a link tag which we're going to style to look like a button then we're going to have an href on this on each link tag and this is going to for now just be an empty pound sign then we can go ahead and add some classes onto the button so that's going to be button and then we're going to increment button one two and three and a quick way to do that with emit is to say button dash and then a dollar sign and emit knows to start at one and then go up to how many elements you actually have then inside this button we can go ahead and add a some text for each of these and then to get four or excuse me three of these we can just say multiply times three and then once we hit return or enter we now have that div class with container then the another one inside of it called buttons and then we have our three buttons here so let's go ahead and save that and now we can see we have all the html that we need in order to move forward into styling so let's go ahead and jump into our style.css at the top here i like to go ahead and set some resets so we're going to target everything here with an asterisk and then anything below we can reset in our styles below so let's do box sizing we'll be set to border box we'll go ahead and reset the padding for all the elements and we'll go ahead and do the margin as well and this is going to just reset any of the default values that come out of the box with the browser that we're using or in this case chrome next up we want to go ahead and give our html and our body elements a height of 100 and this isn't necessary we're just using this in order to center the buttons on the page so this might not be necessary for your project but for this one we're going going to go ahead and just do this next up we want to put some styles just on the body the first one is going to be for the font family so font family is going to be the pop-ins the one that we imported and then we have a fallback of sans serif next we'll go ahead and set the font weight to 400. okay now what we can do is go ahead and style the container this is going to take up the full height of the body so we'll just do a height of 100 percent then we're going to use flexbox and flexbox in order to center the buttons we'll do display flex and to center things horizontally and vertically we say align items center and justify content center as well and now if we save that you'll see that these are now centered on our page cool so the next thing we want to style are the buttons so let's go ahead and style the buttons so this is the group with all the buttons and again we're going to use display uh flex so flexbox and instead of lining them left to right i want them to be stacked so a quick way to do this say flex direction and then set that to column now if we save that they're stacked on top of each other all right so now what we can do is go ahead and style that button class which is the class that all the buttons have and this is just going to be some general styling for each of these buttons the first one is just go ahead and get rid of that text decoration that underline for that comes default with link tags so text decoration that's going to be none so if you say that you'll see that gets rid of that we'll go ahead and give this a padding so this is going to be inside around the font is going to be 20 pixels on the top and bottom and then 50 pixels on the left and right then we'll go ahead and give this a default font size and i've got to use rem units here if you don't know what rim units are rim units are relative units so and it's relative to the root element which in this case is the html element and now by default this is typically set to 16 pixels so how you can calculate that is that this is 16 times 1.25 and ribbon units are really useful if say for instance someone is needs the font to be bigger they can increase um the the base font size in their browser then if you're using rim everything is going to be scaled up for them so it's easier for them to see so now what we need to do is go ahead and set position to relative and this is going to be useful because we're going to be using absolute positioning a little bit later and that absolute positioning needs to know what it needs to be relative to so this is going to be the uh the way that we define this and last is we're just going to give some of these some margins so they're spaced out a little bit from one another and that's going to be 32 pixels if we save that we can see now that everything's spaced out and we don't really see buttons yet because we need to style each of those individually so under this we can go ahead and create a comment here we'll do that with a forward slash asterisk button another asterisk and then another forward slash go ahead and say button one then we can go ahead and set our button one style so button dash one go ahead and give this a background let's do uh pure black keep things simple color here of this pure white we'll set a border radius which is going to round the edges of the the square or the rectangle so do 30 pixels let's go ahead and save that so you can now get an idea of what that looks like and then we want to set a transition property which is going to allow us to have a nice smooth animation when we change certain styles or other properties rather so what we can do is say transition and then we can target the style that we're going to be changing in this case it's going to be transform so say transform how long we want that animation to be so 0.3 seconds and then the type of motion we want so instead of it just being you know one solid speed throughout it's going to ease in and then ease out or in this case just ease okay so now what we can do is we can actually create some pseudo elements in order to get that three layered effect and the first pseudo element we're going to create um is going to be after and then also before so we'll do button dash one two dots and then after and then button dash one before and these are just going to essentially be just extra elements behind the button that they're going to move in and out and you can use pseudo elements for a number of different things but in this case we're going to use them in order to get that cool layered effect so in order to say what you know to create that element we have to first create some content in this case this content's not going to have anything in it so we can just leave this as an empty string then this is going to use that absolute positioning so absolute and then what we want to do is we want to set the opacity on these so i'm just going to drop these to 0.3 then we're going to set the background that's going to be that pure black again border radius we want to just tell it to inherit it from the parent we'll set a width of 100 so it's going to take up the full width of the button that we defined above which is the parent and then we'll say height one hundred percent as well then we can go ahead and give some properties here to for the absolute positioning left being zero and uh bottom being zero as well then we want to make sure that um these these elements are behind this click meme main button so we'll say z index negative one and then again we want to add some smooth animations on this so we'll do transform 0.3 seconds and we'll do an ease as well all right so now we can actually start adding our hover effects so in the first one we're going to say button-1 hover what we can do is just transform we're going to translate we're going to the first one is the the x-value so negative 12 pixels to the left then negative 12 pixels excuse me and remember on the y negative is actually up so this is going to move to the left and up so that's everything for the button one hover now we need to go ahead and animate the other elements so button one hover this is going to be on the after sudo class and what we want to do here is we want to do the same transform so i'm just going to copy this paste it here in this case we're actually going to move it to the right 6 pixels and then we're going to move it down 6 pixels then i'm just going to copy this style because it's going to be very similar for the before i'm going to make sure we change this from after to the b4 pseudo element and then this time we're going to move it 12 pixels to the right and then 12 pixels down so now if we save this we should be able to hover over this and now we can see that really cool style take effect on button one so let's now go ahead and move on to button two so again let's go ahead and add a comment here so we know these are the button two styles we'll scroll down go ahead and add some styles for button dash two and this is just going to be a color style and we'll set this to pure black now what we want to do is go ahead and create those pseudo elements so it's going to be button dash one or excuse me two first one is going to do the after element and we can do button dash 2 and that's going to then be the before pseudo element what we want to do is we want to create a border on these elements so we'll do border how how thick we want the border and we want this border to be all the way around so we do three pixels we want the style of the border to be solid and we'll just go ahead and create a pure black border then again just like for the other elements we need to set this content to an empty string then we'll go ahead and use um absolute positioning again and now we need to set a width and a height but remember we added a border here so we can't just set it to 100 pixels we actually have to or 100 we have to set it to 100 percent minus 6 pixels for the width because we have some on the left and 3 pixels on the right and then we also need to subtract 6 pixels from the top and bottom because remember we added 3 pixels to the border all the way around and the way we can do that is with the calc function so calc 100 minus 6 pixels and i'm just going to copy this paste it here and i had a typo here let's fix that really quick this is going to be height and it's the same thing now again we need to set our left to zero our bottom 2 0 our z index is negative 1 and our transition styles so transform 0.3 seconds and ease and we need to add a semicolon here so we're not getting that error and let's go ahead and save that and now you can see those elements here now right now if you hover over it nothing's happening so now what we can do is go ahead and add those hover styles so button2 hover after and that's going to be transform translate so we'll go ahead and set our translate property we're going to move it over 5 pixels to the left and then up 5 pixels then let's go ahead and just copy this because the the before is essentially just going to be the opposite of this because that's going to create that cool mirrored effect so let's go ahead and just get rid of these negatives and if we save that we should be done with button two there we go so we get that really cool effect once we hover over it now what we can do is move on to my favorite the button three so let's do button three and let's go ahead and add our button three styles so button three dash three whoops we'll go ahead and do overflow hidden and this property is really important in order to get this effect now for now i'm going to actually select it hit command slash and that's going to comment it out so right now this effect isn't actually being applied but you'll see how this is really important later once you you see how this effect is going to be achieved so now let's go ahead and set the color for the font and that's going to be just a pure white let's go ahead and set a border radius of 30 pixels and then i'm going to add a box shadow now right now you're not going to see the box shadow because we're going to set the first four values to zero now if you've never used um box shadow the first value represents the h offset so the horizontal offset so how far off to the left or right vertical offset how far off to the top and bottom the shadows will be the next one is the blur the spread and then you define the color we're actually going to be using rgba in order to define our color here now rgb you might have heard of red green blue is some numbers that you can add in order to achieve the colors but with rgba you can also define the alpha value which is the opacity of the color now in this case we're going to do 143 64 248 and then we're going to have an opacity of 0.5 then in order to create a linear or a gradient we can do just another color here so we'll do 0 0 0 0 0 rgba then we're going to do 39 200 255 and an opacity of 0.5 so again you're not seeing that box shadow because all the first values are set to zero and now we can do is go ahead and set a transition property because we're going to be animating transform and box shadow so do trans or excuse me transition first we're going to target the transform it's going to be 0.3 seconds ease then box shadow 0.3 seconds ease whoops okay so now that we have our button 3 style done you'll see that nothing's actually here or you at least can't see anything because right now all this really is is a transparent button with this color set the white which is hidden on a white background but with these pseudo elements you'll see here what we're going to achieve so button dash 3 we'll go ahead and target the after pseudo element again we need to set content to something in this case just an empty string we'll set the width to 400 pixels and we'll set a height to 400 pixels again we're going to use position absolute we'll scroll down a little bit and then we're just going to offset this a little bit so the top i'm going to offset 50 pixels to the left and the left i'm going to excuse me 50 pixels from the top and then the left 100 pixels and then we're going to have a background color and this is going to act essentially as a fallback or for older browsers that don't support gradients we can just go ahead and define a hex code here so it's going to be this cool pink color now what we can do is go ahead and define a linear gradient we can do that on this property called background image then we have a function called linear gradient that first takes an argument of the direction of the gradient so we can set that to 225 degrees so that's like the angle of the gradient and then we can define the colors on the gradient and then their position so the first one is going to be a hex code here of 27 d8 6c and then we need to tell it of the position now the first spot in the gradient is at position zero so we do zero percent then we can go ahead and find another color here this one's going to be at the halfway point so we'll do 50 and then we'll do our last color and this is going to be at the very end or at 100 so if we save that you now see this huge like square like it kind of seems a little weird right and this is where that overflow comes in handy but before we do that let's go ahead and add our last styles here which are going to be z index whoops and again we want this to be behind so you'll see once we change this to negative 1 and save it we can see that click me come through which is what we set on the parent element and then we can set transition transform 0.5 so we're going to do this a little slower and ease or not slower but longer all right so let's go ahead and save that and now let's go ahead and scroll up uncomment out this overflow you'll see now anything that was outside of what would be defined here on button 3 is now hidden because we have overflow set to hidden all right so now what we can do is just add a couple more hover styles here in order to get that really cool gradient effect so on button 3 hover what we want to do is we want to change the transform first we're going to do translate on this x-axis i'm not going to move it at all but on the y-axis i'm actually going to move it up just a little bit and i'm just going to do 6 pixels then i'm going to do the box shadow and i'm actually going to come up here and just copy this so i don't have to write it again and what we want to do is we want to change these values on the the offsets and the blur and the spread so we'll do 10 pixels negative 10 pixels 25 and then we'll keep the other one at zero so 25 pixels and i'm just going to copy this because they're going to be pretty similar to these over here paste them in this one's going to be negative 10 this one's going to be positive and then we'll keep that at 25. so let's go ahead and save that if we see that you can see now how we can start to see that gradient once we hover over it and it looks pretty cool now what we can do is animate that um that square that's in the middle so we can do is on the button three hover targeting the after pseudo element then we can just rotate it with transform rotate and then we can rotate it by whatever degree amount we want in this case we're going to do 150 degrees so let's go ahead and save that now if we click over it you can see that really cool effect and just to show you what's happening here let's go ahead and just comment out this overflow save it you can see all that's happening is that square is rotating so let's make sure we go ahead and uncomment that and save it and there we go now we have these really cool three modern css hover effects if you like this video please give it a thumbs up consider subscribing and be sure to check out our other design and development tutorials on our youtube channel and on skillthrive.com again i'm hunter from skillthrive and i'll see you in the next one

Channel: Skillthrive

Views: 16,846

Keywords: css hover effects, css effects, css button hover effects, button hover effect, button hover effect using css, cool button hover effect html css, button hover effect css, button hover effects css, hover effect, css animation tutorial, css buttons with nice animation effects, button hover animation css, css effects with source code, css effects 2020, css effects with code

Id: iwoIuyRHy88

Length: 23min 44sec (1424 seconds)

Published: Tue Dec 08 2020