title: On hover expand the button with animation
body: <p>I have created a button in bootstrap-vue which initially shows a right arrow icon on it and when hovering over, it expands with some text,  everything works fine except my icon and text are stick with each other so I tried to put some margin while expanding the button to add some space in between text and icon however while on hover-off it closes the button with some glitches or not very smoothly because it tries to go back to no margin state.
  my code is as below and live code is here at <a href="https://codesandbox.io/s/smoosh-resonance-vuecm?file=/src/App.vue:0-623" rel="nofollow noreferrer">CodeSandbox</a></p>
  
  <p>My question is is there a way I can make it smooth with CSS? </p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;b-card&gt;
        &lt;template v-slot:footer&gt;
          &lt;b-button id="buttonId" size="sm" pill variant="outline-info"&gt;
            &lt;b-icon icon="arrow-right-circle" variant="danger"&gt;&lt;/b-icon&gt;
            &lt;span&gt;View details&lt;/span&gt;
          &lt;/b-button&gt;
        &lt;/template&gt;
      &lt;/b-card&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {};
  &lt;/script&gt;
  
  &lt;style&gt;
  button span {
    max-width: 0;
    -webkit-transition: max-width 1s;
    transition: max-width 0.5s;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
  }
  button:hover span {
    max-width: 7rem;
    margin-left: 0.3rem
  }
  &lt;/style&gt;
  </code></pre>