From the course: CSS Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Project: Buttons and spacing

Project: Buttons and spacing - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Project: Buttons and spacing

“

- [Narrator] In this project update, we're finally going to finish styling the button links. Looking at the final version, here's what the buttons look like and what we'll need to add to get it there. We'll definitely need to add some padding, to add space inside the button. The letters are also set to all caps, and we'll add some rounded corners, which is a common design aesthetic for buttons. Let's jump into the CSS file. Using the button selector, we'll build onto the styles that we already have. Let's start by adding text transform and setting it to uppercase. Using all caps tends to make text look bigger, so I'm going to bring this size down to 1.2 rim to make it smaller than the paragraph text. The button link is also an inline element, so to add padding, set the display to inline block so the elements will still line up side by side, but the padding will be applied on all sides. For the padding, I'll go with…

Contents