7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Background Swipe

Hello, and welcome back to practical web animation. In this lesson we're going to start to take the concepts that we discussed in the last lesson with the before and after pseudo classes to the next level. Previously, we created some extra content with those pseudo classes in the form of square brackets. But in this lesson, we're going to take that to the next step and we're going to create empty content for those before and after pseudo classes. But we're basically going to create a second background for our button, that's going to animate over the original background. And so with this particular pen, we're starting from scratch. So there's no starting pen that you need to link to. So just create your own pen from scratch and we should be able to follow along just fine. So I'm gonna start in the HTML tag I'll nest of get our JavaScript close because we don't really need it yet. And I'm going to create a button element, and I'm going to give it a class of btnswipe, and then inside that button we'll just put some text here that says background Swipe, and then we'll put our closing button tag. Easy enough. Then in our CSS, et's go ahead and make it look a little bit better. Let's create a rule for our btnswipe class. Let's give it a background color first of all. I'm going to use a value of four six A to give it a blue background. I'm going to change the text color to white and I want to get rid of the borders so we're going to set border to none. And then, I want to make it quite a bit larger let center with here to 200 pixels and their height to 40 pixels. And one of the great things about using the button element is that the text will automatically center itself horizontally and vertically. And then for the text itself let set the text transform property to uppercase. And I'm kind of bored with the default font, so I'm going to jump over to Google fonts which you can find it google.com/fonts. I'm going to search for a find here called Josephine or Josephine. I don't know how to pronounce it. It's this Josephine sans that I want. And so, once you find the font you want to use you can come over here to this middle icon for quick use. And you can put a check mark next to all of the different options you want. I just want the normal 400. And we'll scroll down and here's the code that we add to our website. So if we just click, it highlights the whole thing, and we can't really use the whole thing in our settings, so I really just want to highlight a small part Portion of it, excuse me. But as you can see we can't cuz it copies the whole thing. So I'm just going to copy the whole thing, and then jump back into our pen here and we're gonna go over to our settings. And then under the CSS section here, the second tab, we're gonna paste that link here. And we just need to get rid of everything except for the URL itself. So you should have https all the way over to, Joseph and Josephine excuse me, how will you say a +Sans. And that gets us the font we need so will Save and close. And if you want to know how to include it in your CSS, you can jump back over to Google fonts and scroll down just a little bit further, and you can see here how it's referenced. So I'm gonna copy that reference so I don't have to type it out myself, and then for our btn swipe class we're going to paste that so we set our font family here. To the new front we got from Google fonts and it looks good .I just want to increase the size a little bit, so it's that our font size to let's try 16 pixels. See if that's too big. Yeah, it's a little too big. We'll bring it down to 14. And that looks pretty good. So now what I wanna do is to create a second background that's going to animate in over our first background. And it's basically just gonna be a white background that's animating in over the blue and if you've got a white background animating. And it's gonna kind of blend in with our background, and I don't want it to blend in with a background so for our body. I'm gonna set a new rule here for our background color, and let's just set it to a light gray color so pound. And that'll darken it up just a little bit just enough so that will be able to see that white standing out against it once that background animates in. But again,we're going to be using the before pseudo class. Now you can do it with either the before or after it doesn't really matter. I'm going to use the before pseudo class. So we're going to point btn swipe. Colon colon Before. Now one thing that I forget to do all the time when using these before and after pseudo classes is including the content property. Even if you're not going to include any content any extra content you still need to include this content property with an empty set of quotation marks. If you forget that than the effect won't work. You won't see anything that shows up so as often as I use this I try to remember to in Include that content property first thing so that I'm not spending half an hour trying to debug something just because I forget to include that. All right, so by default that content property here is going to be an inline property. We can change it to a block property by setting our display to block, and let's set out background color. For now I'm gonna set it to red. Just so that we can clearly see it against our blue background. Now by default we don't see anything here yet because there's no content inside this element. So there's nothing to give it a width and height unless we specify it directly. So if we set our width here to the same as the width of our button which is 200 pixels, and our height the same as a button as well to 40 pixels. Then we should be able to see it. And we do but we see that it's offset a little bit and the reason for that is that, remember this before pseudo class. It doesn't actually put this content before the button over here to the left side of the button, instead it puts it inside the button element before all of the other content that's inside the button element. So it's still inside the buttons so if that button has any padding on it, it's going to affect this particular item. So we can either get rid of the padding for the button or we can set the position of our pseudo element here. Our before pseudo element to absolute. Now if we're going to set it to absolute then we need to go up to the parent item which is the button itself and set it's position to relative. And before I do that let me show you what it will do if we don't. So if we don't set that to relative and we go into our before pseudo element and set our position to absolute. And then, let set our top property to zero and our left property does to zero. You'll notice it moves it up to the top left corner of the browser and that's not where we want it we want it in the top left corner of its parent item which is the button. So in order to do that we just need to make sure that the parent of the absolutely positioned element has a position of relative. So we're going to come down here to our button and add a position of relative and that should fix our issue. There we go, now our red background is directly over the blue. And we're going to have a little bit of a problem here. If we, let's go ahead and change our background color now that we've got it positioned where we want it. That red is just a little bit easier to see. So if we set our background color to FFF. We can see our background color comes in just fine and when we animate that and we also want to change the text color because right now the text color is white. And we can't see the text against a white background if the text is white, so let's temporarily change our color to the color. It's going to be when we hover over it, and we're going to see a problem here. So we're going to set our color to four six A, and you'll notice that we still can't see the text. And the reason for that is this button swipe element or these, this before pseudo classier is on top of that text. So even if the text is a contrasting color we're still not going to see it because it's under this before element. There's really not much we can do about that with our HTML set up as it is right now even if we set our Z. index to zero for this before pseudo class. It's not gonna work, we still won't see the text. So the way, or one way that we can get around that is we can simply wrap this text inside a span and that's what I'm gonna do here. So let's go ahead and nudge this around a little bit just to make it a little easier to read since we have a limited Working area here. And then we'll just wrap the text in this button inside opening and closing span tags. Now that by itself is not going to fix the problem. We need to apply some styles to the span to put it on top of the before pseudo class here. So let's create another rule. For btnswipe space span and here we're going to set the color I'm just going to cut this color property from our button swipe rule and paste it here. And we're still not able to see it but if we set the position, let's go to the next line here. If we set the position of this item to absolute as well, and you'll notice already we can see the text appear. And then, will set the top and left position here to zero, and then we'll set the width and height set our width to 200 pixels our height to 40 pixels. And it gets a little bit closer but now that it's inside a span it's not automatically going to vertically center the text anymore. So the way I want to vertically center the text, is we'll just create another property here called line height. And we'll make it the same height as the button itself 40 pixels and now our text is centered again. So, now we need to undo some things because by default our text is going to be white. So, we're going to set our color here back to F F F. And so our text is white and then by default we're not going to see this button swipe, it's width is going to be set to zero until we hover over it. So we're going to bring our with down to zero. So now creating our animation is going to be very, very simple now that we've got everything set up. So for our before pseudo class and four hour span. Her span scrolled a little too much there and far span excuse me, we need to set a transition property. And here we'll set all to let's do half a second so 0.5s, and I'll go ahead and copy that and paste it down here for the before pseudo class. So both of those have a transition property applied to them, now we just need to create our hover effect. So for the four pseudo class the way we're going to do this is we're going to say btnSwipe colon hover colon colon before. So when we hover over the button itself. We're going to change the before pseudo class and what we're going to change Is the width. We're gonna change the width to 200 pixels. So let's see if that works. Let's hover over our button, and sure enough we see that animating out. And our background here maybe isn't quite dark enough for our body so let's bring that down to ddd. And that gives us a little bit more contrast against the white background that's animating in that works better. So now, we just need to animate the color of the text easy enough so we'll just do btn.Swipe:hover space span. So when we hover over our button We're going to look at the span inside that button and change its text color to #46A. So let's hover over our button again and there we go. We have a really nice swipe effect. That really catches the eye when you do it. You don't see things like this very often online. Usually if you see any animation, it's just a simple background color change. So this is a great way to make your buttons really stand out. And one last thing I wanna do I like my buttons to look like buttons and by that I mean I want the cursor when I hover over the button to indicate that it's a button. So we're gonna set our cursor here to a Pointer. So now, when we hover over it, there we go. And that's how you create a background swipe effect using the before pseudo class in CSS So, we're gonna save our work here and we'll move on with the next lesson. Thank you for watching.

Back to the top