title: Including HTML arrow in a button
body: <p>I am designing an HTML email and would like to include a right arrow on a HTML button, and I resorted to using special character and transform-rotate it.</p>
  
  <p>My question is, right now they appear on different lines. How do I wrap the text and the arrow to appear only in one line? I tried using <code>whitespace:no-wrap</code> on the td element, but that does not seem to do the trick. Below is the code snippet. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;tr&gt;
      &lt;td class="call-to-action" align="center"&gt;
          &lt;button type="button" class="call-to-action1" value="Schedule Online Here" style="white-space:nowrap"&gt;SCHEDULE ONLINE HERE
              &lt;h1 class="little-arrow" style="-ms-transform: rotate(270deg);transform: rotate(270deg);-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */; color: white; font-size:14px"&gt;&amp;#8711&lt;/h1&gt;&lt;/button&gt;
      &lt;/td&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>