CSS Project 1 final code for the button set

Here is Project 1 in one piece. Every line in it came from an earlier lesson, word for word, so you can lay this file next to your own copy and compare them line by line. If yours differs, the walk-through below tells you which lesson to revisit.

The complete file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Button practice</title>
  <style>
    /* Lesson 9: measure boxes from border to border */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    /* Lesson 2: space around the whole row */
    .btn-row {
      margin: 2rem 1rem;
    }

    .btn {
      /* Lesson 2: margin */
      margin: 0 0.5rem 0.5rem 0;
      /* Lesson 3: padding */
      padding: 0.75em 1.5em;
      /* Lesson 4: border */
      border: 2px solid #1d4ed8;
      border-radius: 0.5rem;
      /* Lesson 5: color */
      color: #ffffff;
      background-color: #1d4ed8;
      /* Lesson 6: font */
      font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.25;
      /* Lesson 7: text-decoration */
      text-decoration: none;
      /* Lesson 8: hover feedback */
      cursor: pointer;
      /* Lesson 9: sizing */
      min-width: 10rem;
      max-width: 100%;
      /* Lesson 10: display */
      display: inline-block;
      text-align: center;
    }

    /* Lesson 5: the second color scheme */
    .btn-light {
      color: #1d4ed8;
      background-color: #ffffff;
    }

    /* Lesson 8: hover and keyboard focus */
    .btn:hover,
    .btn:focus-visible {
      background-color: #1e40af;
      border-color: #1e40af;
    }

    .btn-light:hover,
    .btn-light:focus-visible {
      color: #1e40af;
      background-color: #dbeafe;
    }

    .btn:focus-visible {
      outline: 3px solid #b45309;
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <p class="btn-row">
    <a class="btn" href="#">Read the guide</a>
    <a class="btn btn-light" href="#">Parts list</a>
    <button class="btn" type="button">Copy code</button>
  </p>
</body>
</html>

Top to bottom

The box-sizing reset

The first rule matches every element, plus the content CSS can generate before and after it, and switches all of them to border-box. Widths now include padding and border, so min-width: 10rem further down means 160px on screen rather than 212px. It sits first because it is a page-wide default that every later rule builds on. Lesson 9 covers the arithmetic.

The row

.btn-row gives the paragraph that holds the buttons 2rem of margin above and below and 1rem at the sides, replacing the default paragraph margin. It is the only rule for the container. The buttons handle their own spacing.

The .btn rule, group by group

The order of the groups follows the lessons, not any rule of CSS. Inside a declaration block, order only matters when the same property appears twice, and then the last one wins. Many developers group differently (layout first, then box, then text, then color), and any consistent order is fine.

1. Margin: 0.5rem on the right and bottom only, so the gaps between buttons and between wrapped lines are even.
2. Padding: 0.75em by 1.5em. It is in em, so it scales with the button's own font size.
3. Border: 2px solid blue with 0.5rem rounded corners. Every variant keeps the same border width, so all the buttons have the same outer size.
4. Color: white text on #1d4ed8, a contrast ratio of about 6.7:1.
5. Font: the system interface font at 1rem, weight 600, line-height 1.25. This is what makes the <button> match the links, because form controls do not take the page font on their own.
6. text-decoration: none removes the link underline; the shape does that job now.
7. cursor: the hand cursor on all three, including the <button>, which would otherwise show an arrow.
8. Sizing: at least 10rem wide, never wider than the container.
9. Display: inline-block, so the links accept width, vertical margin and vertical padding, with the label centered.

The light variant

.btn-light swaps the two colors. It has the same specificity as .btn and comes after it, so it wins for color and background-color, and the element keeps everything else from .btn.

Hover and focus

The first rule darkens fill and border on mouse hover and on keyboard focus alike. The second gives the light button a pale fill and dark text instead, and it only works because it sits below the first. The third draws the amber focus ring for keyboard users, outside the border and without moving anything.

The HTML

Three elements, two kinds. <a href> is for going somewhere, <button> for doing something on the page. The type="button" attribute matters more than it looks: inside a form, a button without a type acts as a submit button and sends the form. All three share btn, and the second link adds btn-light.

Lesson map

The course overview links every lesson in order.

Making it yours

Three changes cover most reuse:

• Color. Replace #1d4ed8 (main), #1e40af (hover) and #dbeafe (light hover) with your own shades, and check the contrast of every text and background pair.
• Size. Change font-size on .btn; the padding follows because it is in em. Raise min-width if your labels are longer.
• Shape. border-radius: 0 for square corners, 999px for pills.

A new variant follows the pattern of .btn-light: one rule for the resting colors and one for hover and focus, both placed below the general rules they override.

/* A dark variant, written the same way as .btn-light */
.btn-dark {
  background-color: #1f2937;
  border-color: #1f2937;
}

.btn-dark:hover,
.btn-dark:focus-visible {
  background-color: #111827;
  border-color: #111827;
}

Add btn-dark to an element's class list next to btn, and it keeps the white text, padding, font and focus ring from the shared rules.

The main blue appears three times in the file. Replacing the same value in several places is the problem CSS custom properties solve, where a value like --btn-blue is defined once and reused. They are worth a look on MDN once Project 2 is done.

Try it: paste the whole file into the online HTML editor, press Tab through the buttons, hover each one, then make the preview narrow and check the wrapping. Project 2 starts with the div and span tags and moves the CSS into a file of its own.