We're going to work on each one of these labels and then we'll be able to see what those styles need to end up looking like. Let's switch back to the code here and go to the form, and I'm going to go to right below where we have the text area.

The way we can grab this is by saying .form label, and then let's update the font-size and font-weight first. We'll say font-size is going to be 1.2rem. I want to still use rems, I want to keep that consistent. Then the font-weight, we'll go with 700. We don't want it quite as thick as 900.

form.css

.form label {
    font-size: 1.2rem;
    font-weight: 700;
}

That's one of the nice things with font-weights. You can give them weights anywhere from I want to say 200 or 300 all the way up through 900. So you kind of have a sliding scale with the level of boldness that you want to give it.

From there, let's give a margin-left: 2rem and then a margin-top: 0.7rem. Actually, yeah, we want 7 here. These are just some values that when I was building up the prototype, I worked with that until I got it to the point where I was happy with it, so that's where I'm getting those.

form.css

.form label {
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: 2rem;
    margin-top: 0.7rem;
}

In a normal development environment, what I would probably be doing is what I did when I was building this out. I would be adding these directly in the inspector. That's my normal workflow when I'm wanting to build them. I will select one of the items, so here I would select the label and then, and I would start adding each one of the values there.

I think it's a little bit easier for you to read as I'm going here, especially because I'm talking through them. Now that we have the margin-top there, now we want display: block. Once again, this is going to give us the ability to treat this element like a div, as opposed to just a normal label.

Then, I want to add transition: all 0.3s, which matches all the other animations that we have. We'll add a color here and we'll make this #CEA135 and then just a couple other items.

form.css

.form label {
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: 2rem;
    margin-top: 0.7rem;
    display: block;
    transition: all 0.3s;
    color: #CEA135;
}

We need to work on the visibility and then the opacity. I'm going to leave these as comments, I'm not going to fill them out yet because we technically want to hide this label first, but before we do that, I want to make sure that it actually matches the styles we're looking for.

Now, if I come here and hit refresh, you can see that our labels are looking great. This is exactly what we're looking for. The only difference is we want to be able to animate them, so we will take care of that later on.

I think the next best step is to work on these inputs. Right now, as you can see, when I click on this input, it adds that ugly, little blue outline and I don't want that. I want when you click on the input for you to click on it and no outline except for this cool, little, soft blur.

Let's work on that effect. Let's switch over to the code, so for our form, and I want to move up the focus will transition here. I want to put it right below the form input because that's just going to be the natural place I would look for it if I ever go back and have to make any changes.

I'm going to say form input and then I want to grab the pseudo-state of focus like we've talked about before. Here, I want to remove that ugly outline, so outline: none and then I want to add a border-bottom and then a box-shadow. Let's add that box-shadow first.

If you remember back to when we had the full dedicated guide on the box-shadow, we're going to pass in a few different values. If what I'm going to type in is still a little bit fuzzy and doesn't make sense, I recommend for you to go back and watch that video because we went line by line.

We even had that one visual to be able to see what each one of these values represented, I'm just going to type it out here, though. I'm going to say 1rem, 2rem, and then rgba. There we go. For these values, I'm just going to want to go 0,0,0, 0.1..

form.css

.form input:focus {
    outline: none;
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.1);
}

That's going to give us just a really nice, light shadow. Then, I also want to change the border-bottom color. Let's change this to be 3px, which is the same width, solid, and then we're just going to change it to our gold color, hit save.

form.css

.form input:focus {
    outline: none;
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.1);
    border-bottom: 3px solid #cea135;
}

Now if we come back and hit refresh, now we should have that effect. If I click on that, there we go. Look how much better that looks. Kind of hard to see for some of these inputs with the Google auto-complete, this is just something in the browser, that's what's doing that little pop-up. That is occurring the same way.

That looks fantastic. I am loving that. This is one of my favorite forms I built out in a while, so I'm enjoying it. Now that we have that, I think it would make sense to go and just do the exact same thing for the textarea. Now, there are a couple different ways we can do that. One is going to be the form input.

We could just copy and paste this entire thing. I think it makes more sense and is a little bit more efficient to just add a comma here and say we also want this to apply to the form and then textarea. We want to grab the text area tag and then that focus element as well.

form.css

.form input:focus, .form textarea:focus {
    outline: none;
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.1);
    border-bottom: 3px solid #cea135;
}

If I do this, this should just go and add that. Hit refresh. Now, if I click here, that's working perfectly. Oh, but you know what? I just realized, because I was looking in my notes and I realized that I had duplicated it and it's for a reason, which you may notice.

Do you see how this is adding the gold border at the bottom? I do not want that, so never mind on that. That would have been a cleaner way of doing it, but we wouldn't get the exact behavior we're looking for, so that's fine. It's not a lot of code duplication.

We're just going to paste this in and now, instead of form input, it will be the form text area and the only difference that we're going to have here is we're going to say that we just want the entire border to turn into that gold color.

form.css

.form textarea:focus {
    outline: none;
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.1);
    border: 3px solid #cea135;
}

I think this looks good. Let's go back and take a look. If I hit refresh now, then that's looking really nice.

Now, I might want to change one of these values now that I'm actually looking at it, so if I come here and let's click on hover and then, focus. That's going to give us our nice shadow. For this box-shadow, let me see what happens if I change the second value to 2. That looks a little bit better.

It's completely up to you on what you want to do. This is still your application at the end of the day, so you can have it at 1 or 2. I think I'm going to change mine to 2, just because I think that because it's such a large region. That gives it a little bit more visual depth. Now, if we try this again, that is working.

Very nice job. If you went through this, you now know how to create some pretty impressive looking box-shadows and animations inside of your HTML forms.