Can I nest button inside another button?












7















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.










share|improve this question





























    7















    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.










    share|improve this question



























      7












      7








      7


      1






      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.










      share|improve this question
















      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Sep 8 '16 at 14:35







      AndrewMk

















      asked Sep 8 '16 at 8:49









      AndrewMkAndrewMk

      1031112




      1031112
























          2 Answers
          2






          active

          oldest

          votes


















          7














          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)






          share|improve this answer


























          • 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 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






          • 1





            I believe it is W3C, not WC3.

            – St.Over.Guest21
            Sep 30 '18 at 19:50



















          0














          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>








          share|improve this answer



















          • 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











          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
          });


          }
          });














          draft saved

          draft discarded


















          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









          7














          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)






          share|improve this answer


























          • 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 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






          • 1





            I believe it is W3C, not WC3.

            – St.Over.Guest21
            Sep 30 '18 at 19:50
















          7














          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)






          share|improve this answer


























          • 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 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






          • 1





            I believe it is W3C, not WC3.

            – St.Over.Guest21
            Sep 30 '18 at 19:50














          7












          7








          7







          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)






          share|improve this answer















          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)







          share|improve this answer














          share|improve this answer



          share|improve this answer








          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 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






          • 1





            I believe it is W3C, not WC3.

            – 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











          • 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 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






          • 1





            I believe it is W3C, not WC3.

            – 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













          0














          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>








          share|improve this answer



















          • 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
















          0














          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>








          share|improve this answer



















          • 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














          0












          0








          0







          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>








          share|improve this answer













          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>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          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














          • 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


















          draft saved

          draft discarded




















































          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.




          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          'app-layout' is not a known element: how to share Component with different Modules

          android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

          WPF add header to Image with URL pettitions [duplicate]