Fit 'a' element to button size - css

Question

Well, I have two buttons (in Spanish) and these buttons are inside an 'a' (link tag) so that:
<div class="MB789">
<button class="B121">Ya soy miembro</button>
<button class="B122">Quiero unirme</button>
</div>
The purpose of the 'a' is obviously to redirect the user to the respective page and the buttons are for the style (yes, I want the user to see buttons and not links)
In the CSS I wrote the following:
.MB789{
display: table;
padding: 10px;
text-align: center;
}
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
.MB789 a{
margin: 10px;
background: red; /*Debug: to visualize the elements 'a'*/
}
This is the result:
And that's the problem, that the 'a' elements stand out from the buttons.
And this is what happens when I tell the elements to show themselves as a table.
.MB789 a{
display: table;
background: red; /*Debug: to visualize the elements 'a'*/
}
Then this is what happens:
What I want is that 'a' elements do not protrude from the buttons, but that when the user click on a button, be redirected to the respective link.
Note: I know that Javascript can be redirected, but I refrain from doing this using that language because the user can disable Javascript from the browser settings.

Answer 1

Firstly, you cannot nest <button></button> elements inside an <a> tag, that is invalid markup. Please see why here: Can I nest a <button> element inside an <a> using HTML5?
Secondly you can style the <a> tag like a button and this will resolve your problem.
Your HTML markup needs to look like this:
<div class="MB789">
Ya soy miembro
Quiero unirme
</div>
Your CSS would look like this:
.MB789{
display: inline-block;
padding: 10px;
text-align: center;
}
.MB789 a{
display: inline-block;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}

Answer 2

You've put a 10px margin on the buttons, because they're inside of the a tags this margin will be between the buttons and the edge of the a tags, making them protrude out from the button. Try removing that margin:
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
cursor: pointer;
}