0

Well, I have two buttons (in Spanish) and these buttons are inside an 'a' (link tag) so that:

<div class="MB789">
    <a href="#"><button class="B121">Ya soy miembro</button></a>
    <a href="#"><button class="B122">Quiero unirme</button></a>
</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:

button inside a tag

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:

enter image description here

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.

Héctor M.
  • 2,302
  • 4
  • 17
  • 35

2 Answers2

4

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">
  <a href="#">Ya soy miembro</a>
  <a href="#">Quiero unirme</a>
</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;
}
Neelam Khan
  • 1,078
  • 8
  • 24
  • The wrapping class should be a `display: block` I think. Otherwise the div might end up flowing with any other inline content around it. – kumarharsh Jan 03 '19 at 16:53
1

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;
}
dan
  • 1,198
  • 8
  • 25