DEV Community

Cover image for Daily Code 58 | Styling Buttons (🟥 HTML & 🟦 CSS Course 1)
Gregor Schafroth
Gregor Schafroth

Posted on

Daily Code 58 | Styling Buttons (🟥 HTML & 🟦 CSS Course 1)

Alright, since in my last few JavaScript exercises I found out that HTML and especially CSS are kind of limiting what I can actually do on my websites, I decided to start a course to solve this! I picked this free one here https://www.youtube.com/watch?v=G3e-cpL7ofc

And so the next few days my daily code posts will just be about code and exercises from this course 🙂Let’s go!

My Code

Today was just an intro. HTML I skipped because that I know, but CSS I had so style 3 buttons. So that’s what I did today and here is that code :)

<!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;
    }

    .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;
    }

    .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;
    }
  </style>
</head>

<body>
  <button class="subscribe-button">SUBSCRIBE</button>
  <button class="join-button">JOIN</button>
  <button class="tweet-button">Tweet</button>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs