CSS style not affecting child elements (buttons) - html

Question

Right now if i add inactiveLink class to <a> it also affects buttons inside. They cant be clicked anymore. Do i have to make another style activeLink that turns those features back on or is there a way to only affect <a> element without affecting buttons inside?
If there is no other way, what are default cursor and pointer-events for Buttons?
HTML
<a class="text-body selectable-element inactiveLink">
[...]
<button>Click</button>
</a>
CSS
a.inactiveLink {
pointer-events: none;
cursor: default;
}

Answer 1

While the other answer will work (it was deleted as I was typing this), the real question is: If you want the anchor deactivated, should an active button really go inside it?
As the site/app scales, will other developers know what that class does? I think the CSS is fine the way it is, but the HTML could be moved around so those active elements exist outside the inactive anchor (perhaps in a shared parent element). Food for thought!
If you just want the quick fix, add the class "always-active" to the button, and add the following CSS:
.always-active {
cursor: auto;
pointer-events: auto;
}
a.inactiveLink {
pointer-events: none;
cursor: default;
}
button.always-active {
pointer-events: auto;
cursor: auto;
}
<a class="text-body selectable-element inactiveLink">
[...]
<button class="always-active" onClick="alert('it works')">Click</button>
</a>