title: Make button width fit to the text
body: <p>While I was fiddling with this <a href="http://cssdeck.com/labs/fancy-3d-button" rel="noreferrer">'Fancy 3D Button'</a> example, I found that the <code>width</code> seemed to be hard-coded to fit the text's width. </p>
  
  <p>Here is the HTML / CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-image: url(http://subtlepatterns.com/patterns/ricepaper.png)
  }
  a {
    position: relative;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    background-color: rgba(219, 87, 5, 1);
    font-family: 'Yanone Kaffeesatz';
    font-weight: 700;
    font-size: 3em;
    display: block;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
    box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
    margin: 100px auto;
    width: 160px;
    text-align: center;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
  }
  a:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
    box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
    position: relative;
    top: 6px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'&gt;
  
  &lt;a href="javascript:void(0);"&gt;Push me!&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/ZEPx7.png" alt="Normal look"></p>
  
  <p>If I remove the <code>width</code> property, the button would fill the page width.</p>
  
  <p><img src="https://i.stack.imgur.com/2Kvze.png" alt="Without the width property"></p>
  
  <p>Is there any way to make the button's width fit to the text, automatically? </p>