Changing button breaks the CSS - html

Question

I'm working on a website that has been partially constructed.
I came across this code which displays a button without the href
<div class="practices__btn"><button>Learn More</button></div>
I've tried to fix it with the following code but find that it breaks the CSS.
<button class="practices__btn">Learn More</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 class="practices" id="practices">
<h1>Our Areas of Practice</h1>
<div class="practices__wrapper">
<div class="practices__card">
<h2>test</h2>
<p>
"For some reason"
</p>
<button class="practices__btn">Learn More</button>
</div>
I appreciate the help. I can't find the problem yet it seems simple.

Answer 1

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 class="practices" id="practices">
<h1>Our Areas of Practice</h1>
<div class="practices__wrapper">
<div class="practices__card">
<h2>test</h2>
<p>
"For some reason"
</p>
<div class="practices__btn">
<form action="https://example.com">
<button type="submit" class="practices__btn">Learn More</button>
</form>
</div>
</div>
</div>
</div>