title: Vertical Button using CSS
body: <p>I'm trying to build a vertical button but I not able to put the text in only one line.</p>
  
  <p><img src="https://i.stack.imgur.com/ei16m.jpg" alt="enter image description here"></p>
  
  <p>Until now I have:</p>
  
  <p>Any idea how can I push down the text and put it in only one line?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#hp-ctn-howItWorks
  {
      position:fixed;
      top:50px;
      right: 0px;
      padding:0px;
      margin:0px;
      width: 40px;
      height:160px;
      background:#FF931E;
      z-index:15;
      border-radius: 3px 0px 0px 3px;
  }
  
  #hp-ctn-howItWorks img
  {
      margin: 15px 0px 0px 13px;
  }
  
  #hp-ctn-howItWorks p
  {
      color: #fff;
      -moz-transform:rotate(-90deg);
      -ms-transform:rotate(-90deg);
      -o-transform:rotate(-90deg);
      -webkit-transform:rotate(-90deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="hp-ctn-howItWorks"&gt;
      &lt;img src="~/Content/images/ui-symb-arrow-left-white-15x15.png" width="15" height="15" /&gt;
      &lt;p&gt;Como funciona&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>