My Code

Besides the code, today we looked at the ‘inspect’ feature of Google Chrome. Turn’s out it’s more powerful than I knew. I love the ‘select element in the page to inspect it’ feature. I already see myself inspecting all kinds of websites going forward 😂

Also we looked at padding, borders, and margin. I knew the basics before, but the most interesting insight I had this time is that if I want to align objects with different or no borders, I need to adjust the padding. In the code below for example SUBSCRIBE has no border and 10px padding. So that means the JOIN button, which has a 1px border, then only needs 9px padding to be aligned. 💡 - Kind of logical, I just never thought about it.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Subscribe Button</title>
  <style>
    .subscribe-button {
      background-color: rgb(200, 0, 0);
      color: white;
      border: none;
      border-radius: 2px;
      cursor: pointer;
      margin-right: 8px;
      padding: 10px 16px;

      transition: opacity 0.15s;
    }

    .subscribe-button:hover {
      opacity: 0.8;
    }

    .subscribe-button:active {
      opacity: 0.6;
    }

    .join-button {
      background-color: white;
      border: rgb(41, 118, 211);
      border-style: solid;
      border-width: 1px;
      color: rgb(41, 118, 211);
      border-radius: 2px;
      cursor: pointer;
      margin-right: 8px;
      padding: 9px 16px;

      transition: background-color 0.15s, color 0.15s;
    }

    .join-button:hover {
      background-color: rgb(41, 118, 211);
      color: white;
    }

    .join-button:active {
      opacity: 0.7;
    }

    .tweet-button {
      background-color: rgb(6, 155, 224);
      color: white;
      border: none;
      border-radius: 18px;
      font-weight: bold;
      font-size: 15px;
      cursor: pointer;
      padding: 10px 16px;
      transition: box-shadow 0.15s;
    }

    .tweet-button:hover {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, .15);
    }
  </style>
</head>

<body>
  <button class="subscribe-button">SUBSCRIBE TODAY</button>
  <button class="join-button">JOIN ME NOW</button>
  <button class="tweet-button">Tweet This</button>
</body>

</html>

Alright that’s it again for today :)

Blog

Daily Code 60 | Padding, Border, Margin (🟥 HTML & 🟦 CSS Course 3)

Gregor Schafroth

My Code

Join Our Newsletter. No Spam, Only the good stuff.

Related