Changing button breaks the CSS-CodePudding

I'm working on a website that has been partially constructed.

I came across this code which displays a button without the href

<div ><button>Learn More</button></div>

I've tried to fix it with the following code but find that it breaks the CSS.

<button ><a href="#">Learn More</a></button>

Here is the CSS code.

.practices__card h2 {
  text-align: center;
}

.practices__card p {
  text-align: center;
  margin-top: 24px;
  font-size: 20px;
}

.practices__btn {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  text-decoration: none;
}

.practices__card button {
  color: #fff;
  padding: 14px 24px;
  border: none;
  outline: none;
  border-radius: 4px;
  background: #131313;
  font-size: 1rem;
}

This is the code that the button should fit into

<div  id="practices">
      <h1>Our Areas of Practice</h1>
      <div >
        <div >
          <h2>test</h2>
          <p>
            "For some reason"
          </p>
          <button ><a href="#">Learn More</a></button>
        </div>

I appreciate the help. I can't find the problem yet it seems simple.

CodePudding user response：

I don't think using an anchor tag (<a>) on a button is the best practice. My advice is to make it a form instead, then add an action to it.

.practices__card h2 {
  text-align: center;
}

.practices__card p {
  text-align: center;
  margin-top: 24px;
  font-size: 20px;
}

.practices__btn {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  text-decoration: none;
}

.practices__card button {
  color: #fff;
  padding: 14px 24px;
  border: none;
  outline: none;
  border-radius: 4px;
  background: #131313;
  font-size: 1rem;
}

<div  id="practices">
  <h1>Our Areas of Practice</h1>
  <div >
    <div >
      <h2>test</h2>
      <p>
      "For some reason"
      </p>
      <div >
        <form action="https://example.com">
          <button type="submit" >Learn More</button>
        </form>
      </div>
    </div>
  </div>
</div>