4.7 CSS: Buttons and Forms
In this lesson we'll style the buttons and the forms.
1.Introduction1 lesson, 01:35
2.From Beginner to Pro7 lessons, 38:33
3.Creating a PSD Design4 lessons, 35:36
4.Rewriting the Code14 lessons, 1:42:32
5.Conclusion1 lesson, 00:57
4.7 CSS: Buttons and Forms
Welcome back. In the previous lesson, I wrote styles for Typography. I included all the fonts that we need, the sizes, the line heights and the colors. I'm gonna take care of the elements that appear in multiple places in our pages. Meaning buttons and forms so I'm gonna create inside, let me just close these. Inside styles.less, I'm gonna create a new category here. Called load element styles and I'll import the start with buttons.less. Create the file in css/less/ buttons.less. [BLANK_AUDIO] Now, our buttons use the class of btn, so this is what I have to style. So btn, I'm going to start with thi, border. Let me show you how they look like,. [BLANK_AUDIO] Yeah, so this is the button. So we have a 1 pixel border, solid and its gonna have color-button-1. Next, I'm gonna say display to inline-block because we're applying this class to anchor tags. So we need to add this bit right here, the block characteristic. This allows me to enter a height which will be baseline times 2. So notice I'm using the baseline variable, so if I change the font size my button height will also change. For width, well let's take a look. This one is 189 pixels and I am using an 18 pixel baseline, so let's put like actually a minimum width of about 10ems. Okay, let's see how it looks like. [BLANK_AUDIO] Now, let's center the text so I'm gonna say text-align center so this will center the text inside the button and I'm gonna add a bit of padding about 1em. Let's see, that's a bit too much on the top so I'm going to for .7ems on the top and bottom and 1em on the sides and that looks pretty good. Now, I'm also gonna change the text color, so color is gonna be color-button-1. So the text inside is the same color. Next I'm gonna make it, let's see bold, uppercase, 18 pixel font size and a bit of letter spacing. Font weight bold. Let's take out the italic, font-style normal. Let's see, text transform, uppercase. And let's do a letter spacing of about 1 pixel. Yeah, 1 pixel should do the trick. Next, lets add the hover state. So hover, I'm gonna change the background-color to the border color. So basically, I am inversing the button. Color, I'm gonna set it to white and text-decoration should be none. So no underline like the other links. [BLANK_AUDIO] And that is the button. Now, this style also applies here but we have some different background on the form because this is a, an input type submit. So by default, it gets some weird styling but let's rectify that inside our forms file. So I'm gonna close this since it's complete. Copy this and say forms.less. I'm gonna create it. [BLANK_AUDIO] So I'm gonna say form. Let's take care of that input type submit first and I'm gonna set the background-color to transparent. Now, about this input in the PSD. Let's see it's white, it's 54 pixels in height, 300 pixels in width and it doesn't have any borders so. [BLANK_AUDIO] I'm gonna do this, input type text, input type email and input type password. These all share the same the same styling, basically. So I'm gonna remove the border. Height, I'm going to set it to baseline times 2. Okay, so this is it. Let's do outline set it to none. So we remove this blue halo and that's basically it for the forms. Now, in the next lesson, I'll begin styling the page header. See you there.