---
id: 68eca11e99e3c5c894ca9d69
title: Step 12
challengeType: 0
dashedName: step-12
---

# --description--

The `button` element is used to create clickable buttons on a webpage. Buttons are interactive elements that users can click to perform actions.

Add a `button` element inside the element that has a `class` of `card`, give the button a `class` attribute set to `btn`, and the text `Buy Now`.

# --hints--

You should have a `button` element nested inside the element that has a class of `card`.

```js
assert.exists(document.querySelector('.card button'));
```

Your `button` element should have a `class` attribute.

```js
assert.isTrue(document.querySelector('.card button')?.hasAttribute('class'));
```

Your `button` element should have a `class` that has a value of `btn`.

```js
assert.equal(document.querySelector('.card button')?.className, 'btn');
```

Your `button` element's text should be `Buy Now`. 

```js
assert.equal(document.querySelector('.card button')?.innerText.trim(), 'Buy Now');
```

# --seed--

## --seed-contents--

```html
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>XYZ Bookstore Page</title>
</head>

<body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
  <div class="card-container">
  --fcc-editable-region--
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>

    </div>
  --fcc-editable-region--
  </div>
</body>

</html>
```
