Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,439 --> 00:00:02,917 We're almost done building the first 2 2 00:00:02,917 --> 00:00:06,383 section of our page, but what's missing is this cool 3 3 00:00:06,383 --> 00:00:09,709 animated button that I showed you right at the beginning. 4 4 00:00:09,709 --> 00:00:12,296 So let's go build that. 5 5 00:00:12,296 --> 00:00:15,016 By coding up this button, you will learn techniques 6 6 00:00:15,016 --> 00:00:17,513 that are going to be useful in countless situations 7 7 00:00:17,513 --> 00:00:18,761 in the future. 8 8 00:00:18,761 --> 00:00:20,883 So you're going to learn what pseudo-elements 9 9 00:00:20,883 --> 00:00:24,126 and pseudo-classes are and why they are important. 10 10 00:00:24,126 --> 00:00:27,228 How and why to use the after pseudo-element 11 11 00:00:27,228 --> 00:00:30,219 and how to build a creative hover animation effect 12 12 00:00:30,219 --> 00:00:32,419 using the transition property. 13 13 00:00:32,419 --> 00:00:34,959 So this lecture is probably going to be rather long 14 14 00:00:34,959 --> 00:00:38,778 but I promise you it's going to be totally worth it. 15 15 00:00:38,778 --> 00:00:41,831 So the button that I'm talking about is this one here. 16 16 00:00:41,831 --> 00:00:43,961 And so it has this nice effect you see 17 17 00:00:43,961 --> 00:00:46,267 where it looks like it's getting bigger 18 18 00:00:46,267 --> 00:00:48,484 and then in the end it fades out after like 19 19 00:00:48,484 --> 00:00:50,643 half a second or something, you see? 20 20 00:00:50,643 --> 00:00:52,096 So this is what we're going to build. 21 21 00:00:52,096 --> 00:00:53,232 So it moves up a little bit and 22 22 00:00:53,232 --> 00:00:55,039 creates this shadow beneath it 23 23 00:00:55,039 --> 00:00:57,550 and so it looks like it's moving up 24 24 00:00:57,550 --> 00:00:59,181 in direction to the user. 25 25 00:00:59,181 --> 00:01:01,433 So let's check it again. 26 26 00:01:01,433 --> 00:01:03,715 So it's like it's really moving up, 27 27 00:01:03,715 --> 00:01:05,466 that's why the shadow then appears. 28 28 00:01:05,466 --> 00:01:08,782 Now, look what happens when we click it, 29 29 00:01:08,782 --> 00:01:10,872 so it goes down a little bit and the shadow also 30 30 00:01:10,872 --> 00:01:13,234 disappears a little bit as if we were really 31 31 00:01:13,234 --> 00:01:15,626 pushing it towards the page. 32 32 00:01:15,626 --> 00:01:17,376 Want to see it again? 33 33 00:01:18,999 --> 00:01:22,735 So we hover it, it elevates, and then as we click it, 34 34 00:01:22,735 --> 00:01:24,841 it looks like it's going back down, 35 35 00:01:24,841 --> 00:01:26,642 and you can see it because it moves down 36 36 00:01:26,642 --> 00:01:29,789 and because the shadow gets a little bit smaller. 37 37 00:01:29,789 --> 00:01:31,230 So you see? 38 38 00:01:31,230 --> 00:01:32,230 There it is. 39 39 00:01:33,124 --> 00:01:36,985 And actually moves down, but let's see it again and 40 40 00:01:36,985 --> 00:01:39,233 there it is, right? 41 41 00:01:39,233 --> 00:01:41,905 So let's first code up that part 42 42 00:01:41,905 --> 00:01:43,981 where this functionality happens 43 43 00:01:43,981 --> 00:01:47,257 and then later we're going to care about this white part 44 44 00:01:47,257 --> 00:01:50,938 that looks like it's like flying out or something, 45 45 00:01:50,938 --> 00:01:53,387 it's growing bigger and bigger and then disappears. 46 46 00:01:53,387 --> 00:01:55,637 So back to our markup here, 47 47 00:01:56,810 --> 00:01:59,030 remember that I was saying that we were going to 48 48 00:01:59,030 --> 00:02:00,986 add something here to this text box 49 49 00:02:00,986 --> 00:02:03,961 and what I mean is, of course, this button. 50 50 00:02:03,961 --> 00:02:06,588 So the button will be an anchor element, 51 51 00:02:06,588 --> 00:02:09,755 so a for now, with an href of nothing, 52 52 00:02:11,484 --> 00:02:15,008 so leading to nothing, which is this hash symbol 53 53 00:02:15,008 --> 00:02:17,439 and then of course, we need to give it some class, 54 54 00:02:17,439 --> 00:02:19,552 and I'm going to call it, as usual, button, 55 55 00:02:19,552 --> 00:02:21,765 but at the same time, I'm giving it another class, 56 56 00:02:21,765 --> 00:02:25,733 calling button, white, because we're going to have 57 57 00:02:25,733 --> 00:02:28,394 multiple buttons on the page, some will be white 58 58 00:02:28,394 --> 00:02:30,832 some will be green, but most of the functionality 59 59 00:02:30,832 --> 00:02:33,665 is the same, only the color changes and so I'm going 60 60 00:02:33,665 --> 00:02:37,302 to put the styles about the color here in this class 61 61 00:02:37,302 --> 00:02:39,023 and the stuff that doesn't change 62 62 00:02:39,023 --> 00:02:42,718 from the white to the green button in this button class. 63 63 00:02:42,718 --> 00:02:46,523 So we've done this before, at least in my other HTML course 64 64 00:02:46,523 --> 00:02:48,181 and so this should be nothing new to you, 65 65 00:02:48,181 --> 00:02:50,244 it's just a good practice. 66 66 00:02:50,244 --> 00:02:52,473 Alright, and the text, which we have on this link, 67 67 00:02:52,473 --> 00:02:55,640 on this button, is discover our tours, 68 68 00:02:56,927 --> 00:02:58,139 just like this. 69 69 00:02:58,139 --> 00:03:02,306 And so let's now start styling the button element down here. 70 70 00:03:03,699 --> 00:03:06,922 So you see our CSS file is getting rather long, 71 71 00:03:06,922 --> 00:03:10,196 we're already at 121 lines here, but don't worry, 72 72 00:03:10,196 --> 00:03:12,199 we're going to think about architecture 73 73 00:03:12,199 --> 00:03:14,730 and all that stuff a bit later. 74 74 00:03:14,730 --> 00:03:17,273 So for now, in this section, we're just focusing on 75 75 00:03:17,273 --> 00:03:18,881 getting this code ready here and 76 76 00:03:18,881 --> 00:03:20,919 getting this header element ready 77 77 00:03:20,919 --> 00:03:23,518 and we're going to think about organizational aspects 78 78 00:03:23,518 --> 00:03:25,394 of our code a bit later. 79 79 00:03:25,394 --> 00:03:27,321 So with this, we select a button element 80 80 00:03:27,321 --> 00:03:29,940 but since it's a link, I'm sure you already know 81 81 00:03:29,940 --> 00:03:32,596 that we should do it like this. 82 82 00:03:32,596 --> 00:03:34,235 Alright, and what is this? 83 83 00:03:34,235 --> 00:03:38,245 So this here is a pseudo-class, it's the link pseudo-class. 84 84 00:03:38,245 --> 00:03:41,984 And pseudo-classes are a special state of a selector. 85 85 00:03:41,984 --> 00:03:45,118 So this link here is a state of the button selector. 86 86 00:03:45,118 --> 00:03:48,591 So like when a user hovers an element, or when a checkbox 87 87 00:03:48,591 --> 00:03:52,213 is clicked or if we want to select a last-child, 88 88 00:03:52,213 --> 00:03:53,984 and many other possibilities. 89 89 00:03:53,984 --> 00:03:56,451 So we use pseudo-classes to style elements 90 90 00:03:56,451 --> 00:03:57,923 under a special condition. 91 91 00:03:57,923 --> 00:03:59,638 And it's a very important concept 92 92 00:03:59,638 --> 00:04:01,473 that we're going to use all the time. 93 93 00:04:01,473 --> 00:04:04,669 So the link is a special state of a selector when it is 94 94 00:04:04,669 --> 00:04:07,879 an anchor element so it functions as a link. 95 95 00:04:07,879 --> 00:04:10,583 But there's also the visited state. 96 96 00:04:10,583 --> 00:04:12,083 So button visited. 97 97 00:04:14,245 --> 00:04:16,337 So this is the state when the user has already clicked 98 98 00:04:16,337 --> 00:04:19,379 on the button once before and then sees the button again, 99 99 00:04:19,379 --> 00:04:20,876 so that's the visited state. 100 100 00:04:20,876 --> 00:04:23,049 And I'm sure that you know that for example, if we don't 101 101 00:04:23,049 --> 00:04:26,557 style a link at all, it will appear blue in the beginning 102 102 00:04:26,557 --> 00:04:29,260 and then once we click on it once, when we see it again, 103 103 00:04:29,260 --> 00:04:30,553 then it will be purple. 104 104 00:04:30,553 --> 00:04:33,321 So that's the default styling of links 105 105 00:04:33,321 --> 00:04:34,814 in most of the browsers. 106 106 00:04:34,814 --> 00:04:37,284 Now we don't want this, we want the visited state to 107 107 00:04:37,284 --> 00:04:40,726 look at exactly like the link state, so the normal state 108 108 00:04:40,726 --> 00:04:44,740 of our links and so we just put them together. 109 109 00:04:44,740 --> 00:04:47,078 Now the first thing that we're going to do is to say 110 110 00:04:47,078 --> 00:04:49,667 that we want the text to be uppercase, 111 111 00:04:49,667 --> 00:04:51,750 text transform uppercase. 112 112 00:04:53,209 --> 00:04:55,410 We want there to be no text decoration. 113 113 00:04:55,410 --> 00:04:57,075 Let's actually take a look so we can see 114 114 00:04:57,075 --> 00:04:59,447 what exactly we want to change. 115 115 00:04:59,447 --> 00:05:00,873 So here we go. 116 116 00:05:00,873 --> 00:05:02,844 So we don't want, of course, this color 117 117 00:05:02,844 --> 00:05:05,010 and we don't want this underline, 118 118 00:05:05,010 --> 00:05:06,738 so let's get rid of it. 119 119 00:05:06,738 --> 00:05:09,420 So, text decoration and I'm sure you 120 120 00:05:09,420 --> 00:05:10,977 already know all of this, 121 121 00:05:10,977 --> 00:05:13,768 that's why these properties that are not really new to you, 122 122 00:05:13,768 --> 00:05:18,081 I'm not really explaining what they're doing, okay? 123 123 00:05:18,081 --> 00:05:21,164 And then the text we want to be gray. 124 124 00:05:22,124 --> 00:05:24,495 Now remember that we're going to have multiple colors 125 125 00:05:24,495 --> 00:05:27,197 for the button and so in the white button, 126 126 00:05:27,197 --> 00:05:29,467 the text will be this dark gray, 127 127 00:05:29,467 --> 00:05:31,998 but in the green button, it will probably be white. 128 128 00:05:31,998 --> 00:05:33,243 And so that's something that we have to do 129 129 00:05:33,243 --> 00:05:34,816 in this external class. 130 130 00:05:34,816 --> 00:05:37,856 So let me already create that actually, 131 131 00:05:37,856 --> 00:05:41,811 so it's called button white, and so here we're going 132 132 00:05:41,811 --> 00:05:45,119 to have a background color of white, of course, 133 133 00:05:45,119 --> 00:05:48,580 background color, and just so I did this trick 134 134 00:05:48,580 --> 00:05:51,227 where I just write a couple of letters and then the 135 135 00:05:51,227 --> 00:05:53,618 text editor figures our which property I want 136 136 00:05:53,618 --> 00:05:56,595 and this way I have to type less code. 137 137 00:05:56,595 --> 00:05:58,894 So white as we saw already, FFF, 138 138 00:05:58,894 --> 00:06:03,061 and the color should be 777 as we already used before. 139 139 00:06:04,091 --> 00:06:07,196 Now we also want some padding around the button, of course, 140 140 00:06:07,196 --> 00:06:09,007 so let's specify that as well. 141 141 00:06:09,007 --> 00:06:11,565 And once again, I'm sure you're already familiar with how 142 142 00:06:11,565 --> 00:06:13,903 the shortened property of padding works. 143 143 00:06:13,903 --> 00:06:16,182 So we can specify only one value and then it will 144 144 00:06:16,182 --> 00:06:19,505 apply everywhere, so top, bottom, left, and right 145 145 00:06:19,505 --> 00:06:22,239 or we can also write two values. 146 146 00:06:22,239 --> 00:06:24,579 Then the first one will be for top and bottom 147 147 00:06:24,579 --> 00:06:26,930 and then second one will be for left and right. 148 148 00:06:26,930 --> 00:06:30,013 So let's say 15 pixels and 40 pixels. 149 149 00:06:31,612 --> 00:06:33,908 So now we have a padding at the top and at the bottom of 150 150 00:06:33,908 --> 00:06:37,326 15 pixels and left and right, 40 pixels. 151 151 00:06:37,326 --> 00:06:39,456 And we could also write four numbers. 152 152 00:06:39,456 --> 00:06:42,249 Then the first one would be top, the second would be right, 153 153 00:06:42,249 --> 00:06:44,112 the third one would be the bottom, 154 154 00:06:44,112 --> 00:06:47,253 and the fourth one would be for the left side. 155 155 00:06:47,253 --> 00:06:48,576 Okay, now check this out, 156 156 00:06:48,576 --> 00:06:50,841 but I will tell you already that it's not going to work as 157 157 00:06:50,841 --> 00:06:53,848 expected because it's occupying here this space 158 158 00:06:53,848 --> 00:06:57,016 on the top of this other text where it shouldn't. 159 159 00:06:57,016 --> 00:07:00,408 That's because it's right now, an inline element. 160 160 00:07:00,408 --> 00:07:02,532 So this button here is right now an inline element 161 161 00:07:02,532 --> 00:07:05,967 because it's simply text, but we should display it 162 162 00:07:05,967 --> 00:07:07,550 as an inline block. 163 163 00:07:08,773 --> 00:07:11,952 And this way the box model works on this element as if 164 164 00:07:11,952 --> 00:07:15,582 was just a normal block element, okay? 165 165 00:07:15,582 --> 00:07:17,499 So we should always do this if we want to 166 166 00:07:17,499 --> 00:07:19,484 give some paddings or some heights 167 167 00:07:19,484 --> 00:07:22,282 or width to elements, okay? 168 168 00:07:22,282 --> 00:07:24,492 Now another thing that I noticed here, 169 169 00:07:24,492 --> 00:07:27,867 let me just refresh this, so now it has its own space. 170 170 00:07:27,867 --> 00:07:30,876 Another thing that we want is this actually here to be in 171 171 00:07:30,876 --> 00:07:33,683 the middle of this box, right? 172 172 00:07:33,683 --> 00:07:34,758 So how could we do that? 173 173 00:07:34,758 --> 00:07:36,945 How could we achieve this button to be 174 174 00:07:36,945 --> 00:07:38,904 in the center of the box? 175 175 00:07:38,904 --> 00:07:40,825 Do you think we should use absolute positioning 176 176 00:07:40,825 --> 00:07:43,463 or transforms like we did before? 177 177 00:07:43,463 --> 00:07:45,159 Well I don't think so because 178 178 00:07:45,159 --> 00:07:46,475 that would really be overkill. 179 179 00:07:46,475 --> 00:07:50,373 It would be way to much for this very simple problem. 180 180 00:07:50,373 --> 00:07:52,295 So this is an inline block element and 181 181 00:07:52,295 --> 00:07:55,298 so it's treated as if it was text. 182 182 00:07:55,298 --> 00:07:58,124 And so if it's text and we want it to be at the center 183 183 00:07:58,124 --> 00:08:02,291 of this box, all we have to do is to set the text box, 184 184 00:08:03,402 --> 00:08:05,114 I believe it's called. 185 185 00:08:05,114 --> 00:08:06,972 Exactly, it's text box. 186 186 00:08:06,972 --> 00:08:11,773 All we have to do is to set its text align property 187 187 00:08:11,773 --> 00:08:13,913 to the center and that's it. 188 188 00:08:13,913 --> 00:08:16,034 So now it's going to center the text 189 189 00:08:16,034 --> 00:08:20,189 that is inside of the box, including of course, the button. 190 190 00:08:20,189 --> 00:08:23,667 So just to be sure, yeah, here it goes. 191 191 00:08:23,667 --> 00:08:26,912 And since we're here, let's also add here some white 192 192 00:08:26,912 --> 00:08:30,285 space between this heading element and the button. 193 193 00:08:30,285 --> 00:08:32,309 So how do we do white space? 194 194 00:08:32,309 --> 00:08:35,666 Exactly, we use the margin property. 195 195 00:08:35,666 --> 00:08:38,000 And in this case we just want margin at the bottom, 196 196 00:08:38,000 --> 00:08:42,550 we say margin bottom and let's say we want 60 pixels. 197 197 00:08:42,550 --> 00:08:43,609 Alright. 198 198 00:08:43,609 --> 00:08:44,696 I'm not going to check it right now, 199 199 00:08:44,696 --> 00:08:47,036 we're going to check it later on. 200 200 00:08:47,036 --> 00:08:49,026 So this is link in the visited state. 201 201 00:08:49,026 --> 00:08:53,020 Now let's take care actually of the hover state. 202 202 00:08:53,020 --> 00:08:57,839 So button hover, so another pseudo-class to select 203 203 00:08:57,839 --> 00:09:01,408 a different and special state of this element. 204 204 00:09:01,408 --> 00:09:04,079 So what do we want to happen, remember? 205 205 00:09:04,079 --> 00:09:07,628 The first thing is for this element to move up. 206 206 00:09:07,628 --> 00:09:09,305 So how can we do that? 207 207 00:09:09,305 --> 00:09:11,297 We use transform, such as we did before. 208 208 00:09:11,297 --> 00:09:13,913 So you see transform is something really, really important. 209 209 00:09:13,913 --> 00:09:15,981 It's an extremely important property that we're 210 210 00:09:15,981 --> 00:09:19,300 using all the time to create cool and modern effects, 211 211 00:09:19,300 --> 00:09:22,865 where elements move around or even rotate or stuff, 212 212 00:09:22,865 --> 00:09:26,117 so transform is really important. 213 213 00:09:26,117 --> 00:09:29,745 So now we want to translate it and we want it to move up. 214 214 00:09:29,745 --> 00:09:31,046 So which direction is that? 215 215 00:09:31,046 --> 00:09:32,906 X or upsilon? 216 216 00:09:32,906 --> 00:09:35,955 And it's right, it's direction upsilon, of course. 217 217 00:09:35,955 --> 00:09:40,184 And we want it to move up so we use a negative value 218 218 00:09:40,184 --> 00:09:43,440 and that's because in CSS, the upsilon axis moves from 219 219 00:09:43,440 --> 00:09:45,666 the top to the bottom, so it's like 220 220 00:09:45,666 --> 00:09:47,510 from the top to the bottom. 221 221 00:09:47,510 --> 00:09:49,259 And if you want to move up, we have to go the 222 222 00:09:49,259 --> 00:09:51,198 other way around and so it's negative. 223 223 00:09:51,198 --> 00:09:53,618 So to go up, it's a negative value. 224 224 00:09:53,618 --> 00:09:57,147 So negative, minus three pixels in this case. 225 225 00:09:57,147 --> 00:09:58,534 So that's for the hover. 226 226 00:09:58,534 --> 00:10:01,844 Now when we clicked it, remember it looked a bit different. 227 227 00:10:01,844 --> 00:10:05,565 So it's the active state remember, when we click an element 228 228 00:10:05,565 --> 00:10:07,539 then that's called the active state. 229 229 00:10:07,539 --> 00:10:09,594 So it's the active pseudo-class. 230 230 00:10:09,594 --> 00:10:12,961 So remember what it looked like when we clicked it? 231 231 00:10:12,961 --> 00:10:17,187 Again, it's a translate because again, it moved 232 232 00:10:17,187 --> 00:10:21,187 and this time we're only moving it one pixel up. 233 233 00:10:22,084 --> 00:10:24,535 So this one pixel up, so this minus one pixel 234 234 00:10:24,535 --> 00:10:28,627 is in relation to the initial state, so to the link state, 235 235 00:10:28,627 --> 00:10:29,574 not to the hover. 236 236 00:10:29,574 --> 00:10:30,838 So it's not minus one pixel 237 237 00:10:30,838 --> 00:10:33,119 in relation to the hover state, but 238 238 00:10:33,119 --> 00:10:38,024 it's always here related to the initial link state, okay? 239 239 00:10:38,024 --> 00:10:40,024 So let's check that out. 240 240 00:10:41,559 --> 00:10:44,662 So the margin is there and we hover so it goes up. 241 241 00:10:44,662 --> 00:10:46,857 No animation so far but it goes up 242 242 00:10:46,857 --> 00:10:51,063 and when we click, it goes down a bit, right? 243 243 00:10:51,063 --> 00:10:51,896 So, cool. 244 244 00:10:51,896 --> 00:10:54,907 Now all we have to do is to animate this and then 245 245 00:10:54,907 --> 00:10:56,824 also add these shadows. 246 246 00:10:57,870 --> 00:11:00,596 But first let's actually add the rounded corners. 247 247 00:11:00,596 --> 00:11:04,777 So border radius, and here we can put a really high number, 248 248 00:11:04,777 --> 00:11:07,407 like let's say even 100 pixels or something and then 249 249 00:11:07,407 --> 00:11:11,041 what it will do is to simply shape it like this here 250 250 00:11:11,041 --> 00:11:12,197 on the edges. 251 251 00:11:12,197 --> 00:11:14,321 So if you put 200 or 500 pixels, 252 252 00:11:14,321 --> 00:11:18,127 it will all still be the same, okay? 253 253 00:11:18,127 --> 00:11:20,989 So now all we have to do is the small animation. 254 254 00:11:20,989 --> 00:11:22,927 So remember that in the last lecture, 255 255 00:11:22,927 --> 00:11:25,581 I said that there are two types of animations. 256 256 00:11:25,581 --> 00:11:28,527 The first one is to simply use the transition property, 257 257 00:11:28,527 --> 00:11:31,174 which is the easy one, and the more complex one is 258 258 00:11:31,174 --> 00:11:32,658 the method that we used, 259 259 00:11:32,658 --> 00:11:34,633 which was to really specify the steps of the 260 260 00:11:34,633 --> 00:11:37,511 animations with the keyframes at-rule. 261 261 00:11:37,511 --> 00:11:39,991 Now in this case, that's not necessary, is all. 262 262 00:11:39,991 --> 00:11:42,629 All we have to do is use the transition property, 263 263 00:11:42,629 --> 00:11:45,945 transition, now we have to just specify 264 264 00:11:45,945 --> 00:11:49,079 which properties we want to animate. 265 265 00:11:49,079 --> 00:11:50,942 And if we're not really sure, or if we don't want to 266 266 00:11:50,942 --> 00:11:53,124 write them out, we can simply say all. 267 267 00:11:53,124 --> 00:11:55,294 So in this case, all the properties 268 268 00:11:55,294 --> 00:11:57,544 are enabled to be animated. 269 269 00:11:58,511 --> 00:12:01,124 Then we can also specify a time that we want. 270 270 00:12:01,124 --> 00:12:04,096 Let's say that we want 0.2 seconds. 271 271 00:12:04,096 --> 00:12:08,170 So this is already the shorthand version of the transition. 272 272 00:12:08,170 --> 00:12:10,904 So just like before here where we had a shorthand for 273 273 00:12:10,904 --> 00:12:14,394 animation, instead of writing out all of these properties, 274 274 00:12:14,394 --> 00:12:15,543 we do the same with transition. 275 275 00:12:15,543 --> 00:12:18,911 We just write all of these possibilities here in the same 276 276 00:12:18,911 --> 00:12:23,045 property as a shorthand because it's just easier. 277 277 00:12:23,045 --> 00:12:25,111 It's another transform on the hover as well as 278 278 00:12:25,111 --> 00:12:27,775 on the active will be animated in relation 279 279 00:12:27,775 --> 00:12:29,437 to their initial state. 280 280 00:12:29,437 --> 00:12:32,496 And this is actually causes sometimes a lot of confusion 281 281 00:12:32,496 --> 00:12:34,708 as to why the transition property 282 282 00:12:34,708 --> 00:12:37,121 has to be on the initial state. 283 283 00:12:37,121 --> 00:12:39,160 But that's just how it works. 284 284 00:12:39,160 --> 00:12:41,939 So on the initial states, we say that there can be 285 285 00:12:41,939 --> 00:12:44,615 a transition basically on all the properties 286 286 00:12:44,615 --> 00:12:47,342 and then on the hover, so here we say, how it should 287 287 00:12:47,342 --> 00:12:50,884 look like in the hover state and in the active state 288 288 00:12:50,884 --> 00:12:53,798 and then the animation is going to happen. 289 289 00:12:53,798 --> 00:12:56,005 So let's take a look at that. 290 290 00:12:56,005 --> 00:12:57,069 And yeah, here we go. 291 291 00:12:57,069 --> 00:13:01,152 So now it moves up and very nicely it moves down, 292 292 00:13:02,132 --> 00:13:03,432 just like this, okay. 293 293 00:13:03,432 --> 00:13:05,624 Now all we have to do is to add the box shadow 294 294 00:13:05,624 --> 00:13:09,238 and this also when we do the hover. 295 295 00:13:09,238 --> 00:13:13,023 And so in the box shadow property, we can specify 296 296 00:13:13,023 --> 00:13:15,174 a bunch of values. 297 297 00:13:15,174 --> 00:13:18,654 So the first one is the offset in the x direction. 298 298 00:13:18,654 --> 00:13:21,420 And since we don't want any shadow in the x direction, 299 299 00:13:21,420 --> 00:13:23,747 you only want it in the upsilon direction, 300 300 00:13:23,747 --> 00:13:25,802 we put a zero here. 301 301 00:13:25,802 --> 00:13:28,048 Now in upsilon, which is the second one, we actually 302 302 00:13:28,048 --> 00:13:31,108 want some offset, so 10 pixels let's say. 303 303 00:13:31,108 --> 00:13:33,938 So the shadow will be 10 pixels down. 304 304 00:13:33,938 --> 00:13:37,256 Then the third value is the blur that we want to see. 305 305 00:13:37,256 --> 00:13:40,872 And let's say 20 pixels so we have a really high blur here. 306 306 00:13:40,872 --> 00:13:42,869 And this makes for a more blurry shadow 307 307 00:13:42,869 --> 00:13:44,747 so it looks like we're further away. 308 308 00:13:44,747 --> 00:13:48,735 And so in the active box shadow, we're then 309 309 00:13:48,735 --> 00:13:50,528 going to reduce that blur and 310 310 00:13:50,528 --> 00:13:55,430 then it looks like we're back closer to the page, okay? 311 311 00:13:55,430 --> 00:13:59,001 And here now, finally, we can put a color. 312 312 00:13:59,001 --> 00:14:02,030 So an RGBA in this case because we want the color of the 313 313 00:14:02,030 --> 00:14:04,359 shadow to be transparent. 314 314 00:14:04,359 --> 00:14:07,177 So here we put it to black, complete black, 315 315 00:14:07,177 --> 00:14:11,316 and then let's just put a transparency value. 316 316 00:14:11,316 --> 00:14:13,887 So this is black, but not completely black, 317 317 00:14:13,887 --> 00:14:16,824 but only with 20% opacity, in order to make it 318 318 00:14:16,824 --> 00:14:20,047 just a very subtle shadow and not all too visible. 319 319 00:14:20,047 --> 00:14:22,479 We want it to be very subtle, okay? 320 320 00:14:22,479 --> 00:14:24,830 Now you can play around then with different numbers 321 321 00:14:24,830 --> 00:14:27,400 to see how it's going to look like if you make it darker, 322 322 00:14:27,400 --> 00:14:29,415 if you make it less opaque. 323 323 00:14:29,415 --> 00:14:32,220 20% I think is a good way to go. 324 324 00:14:32,220 --> 00:14:34,603 Now remember, when we click on the button, 325 325 00:14:34,603 --> 00:14:37,665 so when it's active, we want the shadow to look smaller 326 326 00:14:37,665 --> 00:14:40,248 and so to give the impression that the button is closer 327 327 00:14:40,248 --> 00:14:42,896 to the page and so further away from the user. 328 328 00:14:42,896 --> 00:14:46,016 So let's decrease this here to five and then we also 329 329 00:14:46,016 --> 00:14:47,766 want it less blurred. 330 330 00:14:48,954 --> 00:14:51,083 So let's say 10 pixels here, okay? 331 331 00:14:51,083 --> 00:14:53,427 So I'm doing this from my experience because I have 332 332 00:14:53,427 --> 00:14:56,632 a lot of experience by playing around with these values 333 333 00:14:56,632 --> 00:14:59,604 so if this looks a bit like magic to you, then don't worry, 334 334 00:14:59,604 --> 00:15:01,612 it comes with practice. 335 335 00:15:01,612 --> 00:15:03,673 And so again, you should just play around with these numbers 336 336 00:15:03,673 --> 00:15:06,514 and take a look how things behave 337 337 00:15:06,514 --> 00:15:09,414 if you change the values, okay? 338 338 00:15:09,414 --> 00:15:12,081 Now let's just take a look. 339 339 00:15:12,081 --> 00:15:16,614 And yeah, so you see the shadow coming up, right? 340 340 00:15:16,614 --> 00:15:19,720 And now when we click it, it goes down like this. 341 341 00:15:19,720 --> 00:15:24,687 So we lose a bit of shadow and it also becomes less blurry. 342 342 00:15:24,687 --> 00:15:27,404 Just to show you how it would look like with one pixel, 343 343 00:15:27,404 --> 00:15:29,321 for example, let's see. 344 344 00:15:30,743 --> 00:15:34,546 So you see, there's a lot less blur now, right? 345 345 00:15:34,546 --> 00:15:35,774 But we want a little bit of blur 346 346 00:15:35,774 --> 00:15:37,550 to make it look more natural, 347 347 00:15:37,550 --> 00:15:41,111 and so let's put that 10 pixel that we had before. 348 348 00:15:41,111 --> 00:15:42,282 Okay and with that we have the 349 349 00:15:42,282 --> 00:15:44,627 first part of the button ready. 350 350 00:15:44,627 --> 00:15:46,959 Now to build the second part of this button, 351 351 00:15:46,959 --> 00:15:49,283 which includes some more animation effects, 352 352 00:15:49,283 --> 00:15:52,616 just join me right in the next lecture. 31542