How do i animate the send icon when i hover on the button

Issue

<div class="text-center">
    <button [disabled]="btnStatus" class="btn btn-secondary buttonSend" type="submit">
        <div [hidden]="btnStatus">
          Send Message&nbsp;&nbsp;<i class="material-icons" style="vertical-align: -6px;">send</i>
        </div>

        <div [hidden]="!btnStatus" class="spinner-border spinner-border-sm text-light" role="status">
           <span class="visually-hidden">Loading...</span>
       </div>
          
    </button>
</div> 

In the above HTML code i want to animate the send icon such that it translates on X axix when i hover on the button.

I have tried

.buttonSend:hover .buttonIcon
{
    animation: logoAnim 0.5s forwards;
}


@keyframes logoAnim 
{
   from 
   {
     transform: translateX(0);
   }
   to
   {
     transform: translateX(10);
     opacity: 0;
   }
}

Solution

First of all, remove .buttonIcon from .buttonSend:hover .buttonIcon {...} as there is no element with that class name.

.buttonSend:hover {
  animation: logoAnim 0.5s forwards;
}

Now, fix the typo where you set the button to translate 10px to the right which is written 10 without mentioning the units which are in pixels px

@keyframes logoAnim  {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(10px);
     opacity: 0;
   }
}

---

Complete code:

.buttonSend:hover {
  animation: logoAnim 0.5s forwards;
}

@keyframes logoAnim {
  from {
    transform: translateX(0);
  }
  to {
    /* mention the units (px)! */
    transform: translateX(10px);
    opacity: 0;
  }
}

<div class="text-center">
  <button [disabled]="btnStatus" class="btn btn-secondary buttonSend" type="submit">
        <div [hidden]="btnStatus">
          Send Message&nbsp;&nbsp;<i class="material-icons" style="vertical-align: -6px;">send</i>
        </div>

        <div [hidden]="!btnStatus" class="spinner-border spinner-border-sm text-light" role="status">
           <span class="visually-hidden">Loading...</span>
       </div>
          
    </button>
</div>

Answered By - Geeky Quentin