---
id: 685973ca82469e940afcc422
title: Step 17
challengeType: 0
dashedName: step-17
---

# --description--

To finish up the button styling, add the utility class `font-semibold` to each `a` element so their text can be bolder. Also, add the class `rounded` to remove the sharp edges on the buttons.

# --hints--

Your first anchor element should have the utility class `font-semibold`.

```js
const anchorEls = document.querySelectorAll("a");
assert.isTrue(anchorEls[0].classList.contains("font-semibold"));
```

Your first anchor element should have the utility class `rounded`.

```js
const anchorEls = document.querySelectorAll("a");
assert.isTrue(anchorEls[0].classList.contains("rounded"));
```

Your second anchor element should have the utility class `font-semibold`.

```js
const anchorEls = document.querySelectorAll("a");
assert.isTrue(anchorEls[1].classList.contains("font-semibold"));
```

Your second anchor element should have the utility class `rounded`.

```js
const anchorEls = document.querySelectorAll("a");
assert.isTrue(anchorEls[1].classList.contains("rounded"));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CTA component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center rounded-md">
      <div>
        <span class="uppercase">Soundflow</span>
        <h1 class="font-bold text-4xl my-4">Discover New Music</h1>
        <p>Stream your favorite tracks and discover new artists.</p>
      </div>
      <div>
--fcc-editable-region--
        <a
          href="#"
          class="bg-white hover:bg-gray-100 text-indigo-600 px-4 py-2"
        >
          Learn more
        </a>
        <a
          href="#"
          class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2"
         >
          Start listening
        </a>
--fcc-editable-region--
      </div>
    </div>
  </body>
</html>
```
