title: Css 3 transition between arrows
body: <p>I have a simple arrow which is like this:</p>
  
  <p>></p>
  
  <p>and on hover I want it to expand to look like this:</p>
  
  <p>-></p>
  
  <p>of course without the gap between them.</p>
  
  <p>This has to be a transition + animation between them to be smooth. Here's what I have so far</p>
  
  <p><a href="https://codepen.io/arthur94/pen/XVgoLQ" rel="nofollow noreferrer">My Work</a></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>body,
  html {
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    overflow-x: hidden;
    position: relative;
    background-color: black;
  }
  
  .button {
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    margin: 6em 0 0;
    padding: 0;
    text-align: center;
  }
  
  .left {
    display: inline-block;
    width: 3em;
    height: 3em;
    border: 0.5em solid #333;
    border-radius: 50%;
    margin-right: 1.5em;
  }
  
  .left:after {
    content: '';
    display: inline-block;
    margin-top: 0.90em;
    margin-left: 0.6em;
    width: 0.8em;
    height: 0.8em;
    border-top: 0.5em solid #333;
    border-right: 0.5em solid #333;
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  
  .right {
    color: white;
    display: inline-block;
    width: 3em;
    height: 3em;
    border: 0.5em solid #333;
    border-radius: 50%;
    margin-left: 1.5em;
  }
  
  .right:after {
    content: '';
    display: inline-block;
    margin-top: 0.90em;
    margin-left: -0.6em;
    width: 0.8em;
    height: 0.8em;
    border-top: 0.5em solid #333;
    border-right: 0.5em solid #333;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  .right:hover {
    content: '';
    display: inline-block;
    margin-top: 0.90em;
    margin-left: -0.6em;
    width: 2em;
    height: 2em;
    border-top: 0.5em solid #333;
    border-right: 0.5em solid #333;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="button"&gt;
      &lt;span class="left"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="button"&gt;
      &lt;span class="right"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas how can I achieve smooth transition and animation from between those 2 arrows?</p>