How can I make my left/right arrow stem appear on hover?

Issue

To clarify, I'm trying to achieve the hover effect which you can see on Stripe.

As you can see, when you hover over one of the buttons, the caret left shows it's "stem" if I may call it that. Check these screenshots taken from the site:

Button No Hover:

Button On Hover:

I was also wondering if this is possible using font awesome icons, here is my code:

button {
  background: #0a2540;
  border: 0;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  outline: 0;
  padding: 8px 15px;
}

button i {
  margin-left: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />

<button>Hover Me<i class="fa-solid fa-angle-right"></i></button

Solution

You need to use an SVG and then do some magic with CSS, here is my attempt, I hope this makes sense.

button {
  background: #0a2540;
  border: 0;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  outline: 0;
  padding: 7px 15px;
  transition-property: background-color,opacity;
}

button svg {
  margin-left: 10px;
}

button:hover {
  background-color: #6C7D8D;
}

button:hover .HoverArrow__linePath {
  opacity:1;
}

button:hover .HoverArrow__tipPath {
  transform:translateX(3px);
}

.HoverArrow {
    --arrowSpacing: 5px;
    --arrowHoverTransition: 150ms cubic-bezier(0.215,0.61,0.355,1);
    --arrowHoverOffset: translateX(3px);
    --arrowTipTransform: none;
    --arrowLineOpacity: 0;
    position: relative;
    top: 1px;
    margin-left: var(--arrowSpacing);
    stroke-width: 2px;
    fill: none;
    stroke: currentColor;
}

.HoverArrow__linePath {
    --arrowSpacing: 5px;
    --arrowHoverTransition: 150ms cubic-bezier(0.215,0.61,0.355,1);
    --arrowHoverOffset: translateX(3px);
    --arrowTipTransform: none;
    --arrowLineOpacity: 0;
    opacity: var(--arrowLineOpacity);
    transition: opacity var(--hoverTransition,var(--arrowHoverTransition));
}

.HoverArrow__tipPath {
    transform: none;
    transition: transform var(--hoverTransition, 150ms cubic-bezier(0.215,0.61,0.355,1));
}

button:hover .HoverArrow__linePath {
    opacity: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />

<button>Hover Me <svg class="HoverArrow" width="10" height="10" aria-hidden="true"><g fill-rule="evenodd"><path class="HoverArrow__linePath" d="M0 5h7"/><path class="HoverArrow__tipPath" d="m1 1 4 4-4 4"/></g></svg></button>

Answered By - Dean Van Greunen