In my bootstrap-vue project, I have a button with a right arrow icon that expands to show some text when hovered over. However, I noticed that the icon and text are too close together, so I added some margin to create space between them. This adjustment caused the button to close with some glitches when hovering off since it tries to revert back to its original state without any margin. You can view my code below or try it out live on CodeSandbox.
My main question is if there's a way to achieve a smoother transition using CSS.
<template>
<div>
<b-card>
<template v-slot:footer>
<b-button id="buttonId" size="sm" pill variant="outline-info">
<b-icon icon="arrow-right-circle" variant="danger"></b-icon>
<span>View details</span>
</b-button>
</template>
</b-card>
</div>
</template>
<script>
export default {};
</script>
<style>
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
}
</style>