CSS Buttons & Floats

Topics covered in this HTML & CSS tutorial:

Styling semantically correct navigation, Floats for layout, Float insert position, Vertical alignment & line-height, Simple CSS buttons, CSS border-radius, Reusing class selectors

Exercise Preview

Exercise Overview

In this exercise, you’ll review semantically correct markup for navigation and learn more about styling it. You’ll learn how to round corners with CSS to create a button-like appearance, as well as how to create a more interesting layout by using floats to pull elements to the far left or far right of the layout.

1. We’ll be using a new folder of provided files for this exercise. Close any files you may have open in your code editor to avoid confusion.
2. For this exercise we’ll be working with the Hipstirred Buttons and Floats folder located in Desktop > Class Files > Web Dev Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open index.html from the Hipstirred Buttons and Floats folder.

4. Preview index.html in Chrome. (We will be using Chrome’s DevTools.)

   NOTE: We recommend leaving index.html open in the browser as you work, so you can reload the page to see the changes you make in the code.

Adding Navigation to the Header

1. Return to index.html in your code editor.

2. As shown below, add a nav tag below the img inside the header:

   <header>
      <img src="images/logo.png" class="logo" height="36" width="105" alt="Hipstirred">
      <nav>
   
      </nav>
   </header>
   

3. Add an unordered list with two list items inside the <nav>, as follows:

   <nav>
      <ul>
         <li>About Us</li>
         <li>Sign Up</li>
      </ul>
   </nav>
   

4. Add links around the text in each list item, as follows:

   <nav>
      <ul>
         <li><a href="about.html"> About Us</a></li>
         <li><a href="signup.html"> Sign Up</a></li>
      </ul>
   </nav>
   

   NOTE: The pages we’re linking to do not exist yet, but we know the names we want to use for them. We may as well code the links now and create those pages later.

5. Save the file, return to the browser, and reload the page. While it’s semantically correct to mark up a list of links as a list, the list styling leaves a lot to be desired. Let’s create a better look for the navigation.

6. Return to your code editor and open up main.css.

7. To remove the default bullets, margin, and padding from the unordered list, we should write a descendant selector. This way we know we’ll specifically target unordered lists in the navigation and nowhere else on the site. Add the following new rule below the rule for .logo, as follows:

   nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
   }
   

8. Save the file.
9. Return to the browser and reload index.html. That’s better without the bullets and extra space, but let’s put the list items next to each other in the same line.
10. Return to main.css in your code editor.

11. Add the following new rule below the nav ul rule:

    nav li {
       display: inline-block;
    }
    

    NOTE: As we saw in an earlier exercise, inline-block combines the attributes of inline and block elements: you get block-level control over the padding and the links display inline (horizontally across a line).

12. Save the file.
13. Return to the browser and reload index.html. Now the two nav links should be next to each other. Let’s override the default link styles.
14. Return to main.css in your code editor.

15. We should write another descendant selector that specifically targets links in the navigation. This will ensure that link styles elsewhere won’t be affected. Add the following new rule below the nav li rule:

    nav a {
       color: #555;
       text-decoration: none;
    }
    

16. Save the file.

17. Return to the browser and reload index.html. Better, but we want these links at the top right of the page, instead of below the logo. To do this we can use a CSS float.

Floats for Layout

1. Return to main.css in your code editor and add the following new rule above the nav ul rule:

   nav {
      float: right;
   }
   

2. Save the file.

3. Return to the browser and reload index.html. Now the navigation should be on the right. It’s not vertically aligned to the middle of the header as we’d like it to be, but we’ll fix that a bit later.

Floating Social Media Links in the Footer

1. Still looking at the page in your browser, scroll down to the footer.

Here we’ve added social media icons, but they have not been styled. Let’s float these icons to the right, as we did with the navigation.

1. Return to index.html in your code editor.
2. Find the footer (near the bottom) and notice there is div with a social class that contains linked images.
3. Switch to main.css.

4. Below all the other rules, add the following new rule:

   .social {
      float: right;
   }
   

5. Save the file.
6. Return to Chrome to reload index.html. Hmm, the icons are on the right, but hanging down oddly. What’s happening here? Let’s inspect this in the browser.
7. Ctrl–click (Mac) or Right–click (Windows) on the copyright paragraph and choose Inspect.

8. If the copyright paragraph is not already highlighted, hover over the <p> tag to see how it highlights in the browser:

   

   The copyright paragraph is a block-level element, which takes up the full width of the footer. The social icons are floating to the right, but there is no space for them next to the copyright, so they end up below it. When we used the same technique in the header, it worked because the logo image is an inline element, which does not take up the full width of the header, leaving enough room for the nav.

9. Return to your code editor and switch to index.html.

   To get the social media icons to pull to the right of the copyright paragraph, we can do either of the following:

   • Change the copyright paragraph’s display type from block (the default) to inline, which would create room for the social icons.
   • Change the order of the markup, putting the social icons before the copyright. Copyright info is the kind of content that would come last, so this is what we’ll do.

10. Move the copyright paragraph so it’s after the social media icons:

    <footer>
       <div class="wrapper">
          <div class="social">
    

    Code Omitted To Save Space

          </div>
          <p>© Hipstirred LLC</p>
       </div>
    </footer>
    

11. Save the file, return to the browser, and reload index.html. Wow! It worked, but why?

    In an earlier exercise, we used float to wrap text around an image. In order to accomplish this wrapping effect, the browser takes the floated element out of the normal flow of the page. Content that comes after the floated element moves up and around to one side of the floated element. Elements that were stacking on top of each other, will now sit next to each other (if there’s enough room in the parent container). In this page’s footer, we’re essentially having the copyright paragraph “wrap” to the left side of the social media icons.

12. Still in the browser, notice that there are tiny underlines between the social icons (because links normally have underlines) and the icons are too close together. The black is also a bit harsh compared to the gray of the text.
13. Return to main.css in your code editor.

14. Below all the other rules, add the following new rule:

    .social a {
       text-decoration: none;
       margin-left: 10px;
       opacity: .6;
    }
    

15. Save the file.

16. Return to Chrome to reload index.html. The icons look better, but we see one last issue. There’s some extra space at the bottom of the footer that we want to remove.

Vertical Alignment & Line-Height

1. Still in Chrome, Ctrl–click (Mac) or Right–click (Windows) on the copyright paragraph and choose Inspect.
2. If the copyright paragraph is not already highlighted, hover over the <p> tag to see how it highlights in the browser.
3. Notice how the social icons sit within the blue highlight, but there’s some extra space below them. Nothing here has any margin or padding, so the line-height of the copyright paragraph is determining the height. The tallest social icon is 24px tall, so let’s reduce the line-height to 24px.
4. Return to main.css in your code editor.

5. Add the following new property to the rule for footer p:

   footer p {
      margin: 0;
      font-size: 14px;
      line-height: 24px;
   }
   

6. Save the file.

7. Return to Chrome to reload index.html. The footer should now have an even amount of space above and below the social icons. Perfect!

Simple CSS Buttons

We’d like the sign up link in the nav to be a prominent call-to-action. Ideally, the link should look and feel like a bright, eye-catching button. With the power of CSS background-color, padding, and border-radius, we can get the job done nicely.

1. Return to main.css in your code editor.

2. Add the following new rule below the .wrapper rule:

   .button {
      background-color: #8842c2;
   }
   

3. Save the file.
4. Switch to index.html in your code editor.

5. Add the button class to the sign up link, as follows:

   <ul>
      <li><a href="about.html">About Us</a></li>
      <li><a href="signup.html" class="button">Sign Up</a></li>
   </ul>
   

6. Save the file.
7. Return to the browser and reload index.html. This needs a bit of work. The text is too dark for the background and the button needs padding.
8. Return to your code editor and switch to main.css.

9. Add the following new properties to the rule for .button:

   .button {
      background-color: #8842c2;
      color: #fff;
      padding: 10px;
   }
   

10. Save the file.
11. Return to the browser and reload index.html. This is starting to really look like something. Let’s round the button’s corners.

12. Return to your code editor and add the following to the .button rule:

    .button {
    
    
    

    Code Omitted To Save Space

       padding: 10px;
       border-radius: 4px;
    }
    

13. Save the file.
14. Go to the browser and reload index.html. Rounded, but let’s fine-tune the padding.

15. Return to your code editor and update the padding for .button as follows:

    .button {
       background-color: #8842c2;
       color: #fff;
       padding-top: 6px;
       padding-bottom: 6px;
       padding-right: 12px;
       padding-left: 12px;
       border-radius: 4px;
    }
    

16. Save the file.

17. Return to the browser and reload index.html. Very button-like!

Adjusting the Nav & List Item Styles

1. Return to your code editor.

2. There are a few things we still need to fine-tune with the nav. Let’s make the nav text smaller and uppercase. Find the rule for nav and add the following properties:

   nav {
      float: right;
      font-size: 15px;
      text-transform: uppercase;
   }
   

3. Add space between the links with some margin on the nav li:

   nav li {
      display: inline-block;
      margin-left: 10px;
   }
   

4. Save the file.

5. Return to the browser and reload index.html. Good, but we want the nav to be vertically centered in the header.

   Earlier in this exercise we needed to adjust the line-height of the footer to fix its vertical alignment, and we need to do the same thing here. The logo image is taller than the line-height for the header. Text is vertically centered within line-height, so increasing the line-height to match the logo will vertically align text to the center of the logo/header!

6. Return to your code editor.

7. The logo image is 36px tall, so that’s how much we want the line-height to be. Add the following new property to the rule for header:

   header {
      padding: 20px
      line-height: 36px;
   }
   

8. Save the file.

9. Return to the browser and reload index.html. The nav is now more vertically centered in the header and looks better.

Optional Bonus: Creating a Second Call to Action

Let’s reuse the button class for another link just under the hero section.

1. Return to your code editor and switch to index.html.

2. Near the start of the main section, add the a new div tag with a link inside as shown below in bold:

   <p>Fine artisanal, organic, sustainable, craft coffee delivered to your door. Hipstirred is a monthly subscription for all your cold-pressed, pour over, French press, siphon pot, and Chemex needs.</p>
   
   <div class="call-to-action">
      <a href="signup.html" class="button">Get Started Now</a>
   </div>
   
   <h3>Amazing Coffee, Conveniently Delivered Directly to You</h3>
   

3. Save the file.
4. Return to the browser and reload index.html.
5. The Get Started Now link is there and looks somewhat like the other button, but it still has the default underline and is not all caps like the other button (in the header). It would also look nicer if it were horizontally centered in the page.
6. Return to main.css in your code editor.

7. Add the following new rule below the rule for .button:

   .call-to-action {
      text-align: center;
   }
   

8. Next let’s remove the underline and make it all caps. Add the following new properties to the rule for .button:

   .button {
   
   
   

   Code Omitted To Save Space

      border-radius: 4px;
      text-transform: uppercase;
      text-decoration: none;
   }
   

9. Save the file.
10. Return to the browser and reload index.html. Good, but the call to action button could use more space below it.

11. Return to main.css in your code editor and add the following property to the rule for .call-to-action:

    .call-to-action {
       text-align: center;
       margin-bottom: 60px;
    }
    

12. Save the file.

13. Return to the browser and reload index.html. Looking good!

Optional Bonus: Fixing an Edge Case

Most mobile devices are 320 pixels or wider. When this page is narrower than 320 pixels, the navigation doesn’t look good. Most desktop browsers don’t let you make the window that small, so we’ll use Chrome’s DevTools.

1. To open the DevTools in Chrome, Ctrl–click (Mac) or Right–click (Windows) on the page and choose Inspect.

2. If the DevTools are not already on the right side, at the top right of the DevTools panel click the  button and choose Dock to right as shown below:

   

3. Now you can make the content area of the window as narrow as needed to test the code. You’ll see how the navigation becomes difficult to see and interact with:

   

4. Return to main.css in your code editor and add the following to the body rule:

   body {
   

   Code Omitted To Save Space

      margin: 0;
      min-width: 320px;
   }
   

5. Save the file, return to Chrome, and reload index.html. Much improved!