Can I nest button inside another button?
This is a problem resulting from trying to keep my html semantics as correct as possible.
I have a parent button that does both a function in the same page, and acts as parent tag for a big container that nests an anchor -- which redirects to another page -- and a div tag that also acts as a parent for another button that is suppose to perform some actions.
<button>
<div id="the-most-big-container"
<a href="http://www.RedirectMeToAnotherPage.com"></a>
<div>
<button> do some action </button>
</div>
</div>
</button>
I tried nesting the button, gave it a class and id and none of the properties that I apply to the class and the id get performed on the child button, more Also the child button gets completely out of the big container and lays itself in the DOM just like it is a complete independent tag not nested by any other tag.
[Update]
Apparently this is prohibited to nest a button inside another, but furthermore I would like an explanation to why the nested button's behavior being not responsive to the css styles, and how exactly it is laying itself regarding the DOM now, is it now a complete independent tag by itself or what ?
Also now I will be forced to change the parent button tag into any other tag so that I can nest child buttons inside. I would like a suggestion for a substitute tag for the parent button tag
ex: I could change the parent button into a div tag,
but I need a tag that would be more descriptive semantically (something other than just a div),I had that parent button in the first place to act as a toggle button so that when I click it it displays and hides the most-big-container-div.
html css html5 css3 button
add a comment |
This is a problem resulting from trying to keep my html semantics as correct as possible.
I have a parent button that does both a function in the same page, and acts as parent tag for a big container that nests an anchor -- which redirects to another page -- and a div tag that also acts as a parent for another button that is suppose to perform some actions.
<button>
<div id="the-most-big-container"
<a href="http://www.RedirectMeToAnotherPage.com"></a>
<div>
<button> do some action </button>
</div>
</div>
</button>
I tried nesting the button, gave it a class and id and none of the properties that I apply to the class and the id get performed on the child button, more Also the child button gets completely out of the big container and lays itself in the DOM just like it is a complete independent tag not nested by any other tag.
[Update]
Apparently this is prohibited to nest a button inside another, but furthermore I would like an explanation to why the nested button's behavior being not responsive to the css styles, and how exactly it is laying itself regarding the DOM now, is it now a complete independent tag by itself or what ?
Also now I will be forced to change the parent button tag into any other tag so that I can nest child buttons inside. I would like a suggestion for a substitute tag for the parent button tag
ex: I could change the parent button into a div tag,
but I need a tag that would be more descriptive semantically (something other than just a div),I had that parent button in the first place to act as a toggle button so that when I click it it displays and hides the most-big-container-div.
html css html5 css3 button
add a comment |
This is a problem resulting from trying to keep my html semantics as correct as possible.
I have a parent button that does both a function in the same page, and acts as parent tag for a big container that nests an anchor -- which redirects to another page -- and a div tag that also acts as a parent for another button that is suppose to perform some actions.
<button>
<div id="the-most-big-container"
<a href="http://www.RedirectMeToAnotherPage.com"></a>
<div>
<button> do some action </button>
</div>
</div>
</button>
I tried nesting the button, gave it a class and id and none of the properties that I apply to the class and the id get performed on the child button, more Also the child button gets completely out of the big container and lays itself in the DOM just like it is a complete independent tag not nested by any other tag.
[Update]
Apparently this is prohibited to nest a button inside another, but furthermore I would like an explanation to why the nested button's behavior being not responsive to the css styles, and how exactly it is laying itself regarding the DOM now, is it now a complete independent tag by itself or what ?
Also now I will be forced to change the parent button tag into any other tag so that I can nest child buttons inside. I would like a suggestion for a substitute tag for the parent button tag
ex: I could change the parent button into a div tag,
but I need a tag that would be more descriptive semantically (something other than just a div),I had that parent button in the first place to act as a toggle button so that when I click it it displays and hides the most-big-container-div.
html css html5 css3 button
This is a problem resulting from trying to keep my html semantics as correct as possible.
I have a parent button that does both a function in the same page, and acts as parent tag for a big container that nests an anchor -- which redirects to another page -- and a div tag that also acts as a parent for another button that is suppose to perform some actions.
<button>
<div id="the-most-big-container"
<a href="http://www.RedirectMeToAnotherPage.com"></a>
<div>
<button> do some action </button>
</div>
</div>
</button>
I tried nesting the button, gave it a class and id and none of the properties that I apply to the class and the id get performed on the child button, more Also the child button gets completely out of the big container and lays itself in the DOM just like it is a complete independent tag not nested by any other tag.
[Update]
Apparently this is prohibited to nest a button inside another, but furthermore I would like an explanation to why the nested button's behavior being not responsive to the css styles, and how exactly it is laying itself regarding the DOM now, is it now a complete independent tag by itself or what ?
Also now I will be forced to change the parent button tag into any other tag so that I can nest child buttons inside. I would like a suggestion for a substitute tag for the parent button tag
ex: I could change the parent button into a div tag,
but I need a tag that would be more descriptive semantically (something other than just a div),I had that parent button in the first place to act as a toggle button so that when I click it it displays and hides the most-big-container-div.
html css html5 css3 button
html css html5 css3 button
edited Sep 8 '16 at 14:35
AndrewMk
asked Sep 8 '16 at 8:49
AndrewMkAndrewMk
1031112
1031112
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
It is not valid to put a <button>
inside a <button>
element.
In the WC3 recomendation for the button element you can read:
Content model:
Phrasing content, but there must be no interactive content descendant. [source: w3.org ]
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)
In addition to that, the w3c validator throws this error:Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
– Roberrrt
Sep 8 '16 at 9:00
The context being that a button is "display:inline-block". Change the button to display:block and it would be "valid". Should you do it, no, better not to do it.
– Patrick Aleman
Sep 8 '16 at 9:06
2
@PatrickAleman the fact it is valid or not doesn't depend on thedisplay
property but on the fact that the<button>
element is interactive.
– web-tiki
Sep 8 '16 at 9:07
@web-tiki I understand that, thats why i set "valid" in double quotes.
– Patrick Aleman
Sep 8 '16 at 9:13
1
I believe it isW3C
, notWC3
.
– St.Over.Guest21
Sep 30 '18 at 19:50
add a comment |
You can not do this. A button is not meant to contain other elements.
However, you can style a div element to have the look and the feel of a button, here is what it looks like with bootstrap:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn btn-default">
outer button
<br />
<button class="btn btn-primary">
inner button
</button>
</div>
</body>
</html>
1
A button isn't meant to contain other elements?That's resoundingly wrong. Are you saying that button elements aren't allowed to have SVG's and spans? Even right under your code example... the 'Run code snippet' button has elements.
– jscul
Jul 9 '18 at 2:18
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39386497%2fcan-i-nest-button-inside-another-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
It is not valid to put a <button>
inside a <button>
element.
In the WC3 recomendation for the button element you can read:
Content model:
Phrasing content, but there must be no interactive content descendant. [source: w3.org ]
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)
In addition to that, the w3c validator throws this error:Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
– Roberrrt
Sep 8 '16 at 9:00
The context being that a button is "display:inline-block". Change the button to display:block and it would be "valid". Should you do it, no, better not to do it.
– Patrick Aleman
Sep 8 '16 at 9:06
2
@PatrickAleman the fact it is valid or not doesn't depend on thedisplay
property but on the fact that the<button>
element is interactive.
– web-tiki
Sep 8 '16 at 9:07
@web-tiki I understand that, thats why i set "valid" in double quotes.
– Patrick Aleman
Sep 8 '16 at 9:13
1
I believe it isW3C
, notWC3
.
– St.Over.Guest21
Sep 30 '18 at 19:50
add a comment |
It is not valid to put a <button>
inside a <button>
element.
In the WC3 recomendation for the button element you can read:
Content model:
Phrasing content, but there must be no interactive content descendant. [source: w3.org ]
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)
In addition to that, the w3c validator throws this error:Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
– Roberrrt
Sep 8 '16 at 9:00
The context being that a button is "display:inline-block". Change the button to display:block and it would be "valid". Should you do it, no, better not to do it.
– Patrick Aleman
Sep 8 '16 at 9:06
2
@PatrickAleman the fact it is valid or not doesn't depend on thedisplay
property but on the fact that the<button>
element is interactive.
– web-tiki
Sep 8 '16 at 9:07
@web-tiki I understand that, thats why i set "valid" in double quotes.
– Patrick Aleman
Sep 8 '16 at 9:13
1
I believe it isW3C
, notWC3
.
– St.Over.Guest21
Sep 30 '18 at 19:50
add a comment |
It is not valid to put a <button>
inside a <button>
element.
In the WC3 recomendation for the button element you can read:
Content model:
Phrasing content, but there must be no interactive content descendant. [source: w3.org ]
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)
It is not valid to put a <button>
inside a <button>
element.
In the WC3 recomendation for the button element you can read:
Content model:
Phrasing content, but there must be no interactive content descendant. [source: w3.org ]
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)
edited Nov 22 '18 at 8:50
answered Sep 8 '16 at 8:59
web-tikiweb-tiki
72.7k23164203
72.7k23164203
In addition to that, the w3c validator throws this error:Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
– Roberrrt
Sep 8 '16 at 9:00
The context being that a button is "display:inline-block". Change the button to display:block and it would be "valid". Should you do it, no, better not to do it.
– Patrick Aleman
Sep 8 '16 at 9:06
2
@PatrickAleman the fact it is valid or not doesn't depend on thedisplay
property but on the fact that the<button>
element is interactive.
– web-tiki
Sep 8 '16 at 9:07
@web-tiki I understand that, thats why i set "valid" in double quotes.
– Patrick Aleman
Sep 8 '16 at 9:13
1
I believe it isW3C
, notWC3
.
– St.Over.Guest21
Sep 30 '18 at 19:50
add a comment |
In addition to that, the w3c validator throws this error:Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
– Roberrrt
Sep 8 '16 at 9:00
The context being that a button is "display:inline-block". Change the button to display:block and it would be "valid". Should you do it, no, better not to do it.
– Patrick Aleman
Sep 8 '16 at 9:06
2
@PatrickAleman the fact it is valid or not doesn't depend on thedisplay
property but on the fact that the<button>
element is interactive.
– web-tiki
Sep 8 '16 at 9:07
@web-tiki I understand that, thats why i set "valid" in double quotes.
– Patrick Aleman
Sep 8 '16 at 9:13
1
I believe it isW3C
, notWC3
.
– St.Over.Guest21
Sep 30 '18 at 19:50
In addition to that, the w3c validator throws this error:
Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
– Roberrrt
Sep 8 '16 at 9:00
In addition to that, the w3c validator throws this error:
Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
– Roberrrt
Sep 8 '16 at 9:00
The context being that a button is "display:inline-block". Change the button to display:block and it would be "valid". Should you do it, no, better not to do it.
– Patrick Aleman
Sep 8 '16 at 9:06
The context being that a button is "display:inline-block". Change the button to display:block and it would be "valid". Should you do it, no, better not to do it.
– Patrick Aleman
Sep 8 '16 at 9:06
2
2
@PatrickAleman the fact it is valid or not doesn't depend on the
display
property but on the fact that the <button>
element is interactive.– web-tiki
Sep 8 '16 at 9:07
@PatrickAleman the fact it is valid or not doesn't depend on the
display
property but on the fact that the <button>
element is interactive.– web-tiki
Sep 8 '16 at 9:07
@web-tiki I understand that, thats why i set "valid" in double quotes.
– Patrick Aleman
Sep 8 '16 at 9:13
@web-tiki I understand that, thats why i set "valid" in double quotes.
– Patrick Aleman
Sep 8 '16 at 9:13
1
1
I believe it is
W3C
, not WC3
.– St.Over.Guest21
Sep 30 '18 at 19:50
I believe it is
W3C
, not WC3
.– St.Over.Guest21
Sep 30 '18 at 19:50
add a comment |
You can not do this. A button is not meant to contain other elements.
However, you can style a div element to have the look and the feel of a button, here is what it looks like with bootstrap:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn btn-default">
outer button
<br />
<button class="btn btn-primary">
inner button
</button>
</div>
</body>
</html>
1
A button isn't meant to contain other elements?That's resoundingly wrong. Are you saying that button elements aren't allowed to have SVG's and spans? Even right under your code example... the 'Run code snippet' button has elements.
– jscul
Jul 9 '18 at 2:18
add a comment |
You can not do this. A button is not meant to contain other elements.
However, you can style a div element to have the look and the feel of a button, here is what it looks like with bootstrap:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn btn-default">
outer button
<br />
<button class="btn btn-primary">
inner button
</button>
</div>
</body>
</html>
1
A button isn't meant to contain other elements?That's resoundingly wrong. Are you saying that button elements aren't allowed to have SVG's and spans? Even right under your code example... the 'Run code snippet' button has elements.
– jscul
Jul 9 '18 at 2:18
add a comment |
You can not do this. A button is not meant to contain other elements.
However, you can style a div element to have the look and the feel of a button, here is what it looks like with bootstrap:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn btn-default">
outer button
<br />
<button class="btn btn-primary">
inner button
</button>
</div>
</body>
</html>
You can not do this. A button is not meant to contain other elements.
However, you can style a div element to have the look and the feel of a button, here is what it looks like with bootstrap:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn btn-default">
outer button
<br />
<button class="btn btn-primary">
inner button
</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn btn-default">
outer button
<br />
<button class="btn btn-primary">
inner button
</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn btn-default">
outer button
<br />
<button class="btn btn-primary">
inner button
</button>
</div>
</body>
</html>
answered Sep 8 '16 at 9:07
BenderBender
12
12
1
A button isn't meant to contain other elements?That's resoundingly wrong. Are you saying that button elements aren't allowed to have SVG's and spans? Even right under your code example... the 'Run code snippet' button has elements.
– jscul
Jul 9 '18 at 2:18
add a comment |
1
A button isn't meant to contain other elements?That's resoundingly wrong. Are you saying that button elements aren't allowed to have SVG's and spans? Even right under your code example... the 'Run code snippet' button has elements.
– jscul
Jul 9 '18 at 2:18
1
1
A button isn't meant to contain other elements?That's resoundingly wrong. Are you saying that button elements aren't allowed to have SVG's and spans? Even right under your code example... the 'Run code snippet' button has elements.
– jscul
Jul 9 '18 at 2:18
A button isn't meant to contain other elements?That's resoundingly wrong. Are you saying that button elements aren't allowed to have SVG's and spans? Even right under your code example... the 'Run code snippet' button has elements.
– jscul
Jul 9 '18 at 2:18
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39386497%2fcan-i-nest-button-inside-another-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown