DEV Community

Ahtsham Ajus
Ahtsham Ajus

Posted on

Today I learned about buttons elements

Here's My HTML code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="./normalize.css" />
  </head>
  <body>
    <button class="btn btn--primary btn--block">Buy Now</button>
    <button class="btn btn--secondary">Buy Now</button>
    <button class="btn btn--accennt">Buy Now</button>
    <a href="#" class="btn btn--secondary btn--block">Buy Now</a>
    <button class="btn btn--outline">Buy Now</button>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here's My CSS code.

.btn {
  border-radius: 40px;
  border: 0;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1rem 0;
  padding: 2rem 3rem;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background: #3a8ffd;
}

.btn--secondary {
  background: var(--color-secondary);
  color: #fff;
}

.btn--secondary:hover {
  background: #05cdf0;
}

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}

.btn--accent:hover {
  background: #ec3000;
}

.btn--outline {
  background: #fff;
  color: var(--color-headings);
  border: 2px solid var(--color-headings);
}

.btn--outline:hover {
  background-color: var(--color-headings);
  color: #fff;
}

.btn--block {
  width: 100%;
  display: inline-block;
}

@media screen and (min-width: 1024px) {
  .btn {
    font-size: 1.5rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

Here's the Output
Alt Text

Top comments (2)

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna

Good, Try embedding code pen, instead of all these you can show them live

Collapse
 
ahtshamajus profile image
Ahtsham Ajus

Thanks for suggestion bro