HTML Forms

Button Hover State

Jen Kramer

AnnieCannons
HTML Forms

Check out a free preview of the full HTML Forms course

The "Button Hover State" Lesson is part of the full, HTML Forms course featured in this preview video. Here's what you'd learn in this lesson:

To make the submit button react to a user hovering over it, Jen adds a hover state to the submit button.

Preview
Close

Transcript from the "Button Hover State" Lesson

[00:00:00]
>> Jen Kramer: So Emma says let's add a hover state, which I think is a great idea because then it will look more buttony than ever. So button color, how do we add that button one?
>> Jen Kramer: Yeah.
>> Speaker 2: :hover.
>> Jen Kramer: button:hover, right? We don't need any As, it's just a button.

[00:00:18]
And when we hover over the button, we want something to happen. So just button:hover. And I have a background color I already picked, but you could pick your own. So I'll just make my background color white.
>> Speaker 3: You spelled button incorrectly.
>> Jen Kramer: [LAUGH] You gotta spell button correctly, sorry.

[00:00:38]
And my color will be this bb342F.
>> Jen Kramer: Okay, now you'll be able to see this on the screen. Okay, so the hover state worked,
>> Jen Kramer: Pretty good. Lots of things you could do here to make a fun kind of button and you could spend a lot of time on this, all right.

[00:01:04]
How's everybody doing so far, okay? Do we have any questions online?
>> Jen Kramer: Yeah?
>> Speaker 2: There is one about the text area. They're wondering how to implement max character, thanks.
>> Jen Kramer: Yeah, I actually I addressed that on the break. There is a property for it, if you go to the Mozilla Developer Network for text area, it's listed there on the page.

[00:01:28]
And I think it's something like max length is the attribute, if I remember right.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now