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

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 ></i></button

CodePudding user response：

You need to use 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  width="10" height="10" aria-hidden="true"><g fill-rule="evenodd"><path  d="M0 5h7"/><path  d="m1 1 4 4-4 4"/></g></svg></button>