DEV Community

loading...

Today I learned about buttons elements

ahtshamajus profile image Ahtsham Ajus ・1 min read

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

Discussion (2)

pic
Editor guide
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 Author

Thanks for suggestion bro