Can I nest button inside another button?
It is not valid to put a <button> inside a <button> element.
In the W3C recomendation for the button element you can read:
Content model:
Phrasing content, but there must be no interactive content descendant.
[source: w3.org (emphasis mine)]
Interactive content includes:
- a
- audio (if the controls attribute is present)
- button
- embed
- iframe
- img (if the usemap attribute is present)
- input (if the type attribute is not in the hidden state)
- keygen
- label
- object (if the usemap attribute is present)
- select
- textarea
- video (if the controls attribute is present)
With CSS, we can style it to look like a button inside a button:
.buttons-wrapper {
position: relative;
}
.seemingly-outer-button {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 40px;
width: 100%;
background: black;
color: lightblue;
}
.seemingly-inner-button {
position: absolute;
top: 8px;
bottom: 8px;
height: 24px;
left: 20px;
color: lightcyan;
background: brown;
}<div>
<h4>Try clicking these buttons:</h4>
<div class="buttons-wrapper">
<button class="seemingly-outer-button" id="outer" onclick="alert('outer')">
The Seemingly Outer Button
</button>
<button class="seemingly-inner-button" id="inner" onclick="alert('inner')">
The Inner Button
</button>
</div>
</div>React example on StackBlitz.