How to morph a plus sign to a minus sign using CSS transition?
<p>I want to create a toggle <code>button</code> that morphs its shape from a plus sign to a minus sign.</p>
<p><strong>Using CSS only</strong>, <strong><em>without</em> the use of pseudo-elements</strong>.</p>
<p>My <strong>desired effect</strong> is to have the vertical line in the &quot;+&quot; sign to shrink into the horizontal line.</p>
<p>I know it's possible but I'm not sure which is the best route to take. I was thinking of doing something with the <code>height</code> but I'm worried about the <code>line-height</code> of browsers changing its position in the element.</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-js lang-js prettyprint-override"><code>$('button').on("click", function(){
  $(this).toggleClass('active');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>button {
color: #ecf0f1;
background:  #e74c3c;
  width: 50px;
  height: 50px;
  border: 0;
  font-size: 1.5em;
  }
button span {
  transition: all .75s ease-in-out;
  }
button.active span {
  /* Code to morph + to - */
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;button&gt;&lt;span&gt;+&lt;/span&gt;&lt;/button&gt;</code></pre>
</div>
</div>
</p>