title: Force button element to layout like div
body: <p>I am trying to replace div elements with button elements to improve accessibility, but I need the buttons to layout like the divs used to do. (note this only needs to work in webkit)</p>
  
  <p>The div takes the width of the parent container, while the button only takes the place needed to display its content.</p>
  
  <p>How can I change that?</p>
  
  <p>I would not like to set something like width: 100%, because if you are using more then one button in a container with display: webkit-box the divs nicely layout to use remaining space.</p>
  
  <p>Here is a small <strong>example</strong>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;button test&lt;/title&gt;
          &lt;style&gt;
              .mybutton{
                  display: block;
                  border: 1px solid red;
                  -webkit-appearance: none;
                  -webkit-border-radius: 6px;
                  background-color: transparent;
                  -webkit-gradient(linear,left bottom,left top,color-stop(0, #A8ACB9),color-stop(1, #eee));
                  text-align: center;
              }
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
  
          &lt;div class="mybutton"&gt;Div Button&lt;/div&gt;
  
          &lt;button class="mybutton"&gt;Button&lt;/button&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>