Daily Code 59 | Hover, Transitions, Shadows (🟥 HTML & 🟦 CSS Course 2)

#beginners #daily #css

Just continuing with my corse today https://www.youtube.com/watch?v=G3e-cpL7ofc

Let’s go!

My Code

Todays lesson was at the same time very simple and very useful. Didn’t really know CSS can handle states and transitions like that. Will use that a lot going forward 🙂

<!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;
      height: 36px;
      width: 105px;
      border-radius: 2px;
      cursor: pointer;
      margin-right: 8px;
      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);
      height: 36px;
      width: 62px;
      border-radius: 2px;
      cursor: pointer;
      margin-right: 8px;
      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(2, 137, 255);
      color: white;
      border: none;
      height: 36px;
      width: 74px;
      border-radius: 18px;
      font-weight: bold;
      font-size: 15px;
      cursor: pointer;
      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</button>
  <button class="join-button">JOIN</button>
  <button class="tweet-button">Tweet</button>
</body>

</html>

Build better on Postgres with AI-Assisted Development Practices

Compare top AI coding tools like Cursor and Windsurf with Neon's database integration. Generate synthetic data and manage databases with natural language.