What's the best way to add animation to the send icon while hovering over the button?

<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>

When the button is hovered over, I want to create an animation that translates the send icon on the X-axis.

I attempted to achieve this effect using the following CSS:

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

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

Answer №1

Initially, eliminate .buttonIcon from the selector 

.buttonSend:hover .buttonIcon {...}
since there is no element with that class name.

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

Next, correct the mistake where you specified to move the button 10px to the right without specifying the units, which should be in pixels px

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

   to {
     /* Remember to include the units (px)! */
     transform: translateX(10px);
     opacity: 0;
   }
}

Here is the corrected code:

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

@keyframes logoAnim {
  from {
    transform: translateX(0);
  }
  to {
    /* Specify the units (px) for translation! */
    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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Wordpress problem with Bootstrap JavaScript code involving data-toggle="collapse"

Currently facing an issue with my project. This is my first attempt at creating a WordPress blog, inspired by the HTML site www.humantools.com.mx and building a blog for it at www.humantools.com.mx/blog. There's a strange problem: when logged in, the ...

javascriptjquerycsswordpresstwitter-bootstrap

Tips for aligning images inside tab content areas

While using an "accordion" jQuery to show a contact list, I have encountered a challenge that may seem simple to someone experienced in this. Here is the code snippet: <!doctype html> <html lang="en> ... (Code continues) I am looking to add ...

jqueryhtmlcss

Attempting to customize the appearance of a submit button independently from other input elements

Hey there, I have a question that might sound silly, but bear with me as I'm still learning CSS. I've been experimenting with CakePHP and its form helper to create a form. Here's a snippet of the code I'm working with: <p><?ph ...

phphtmlcsscakephp

Troubleshooting Cross-Origin Resource Sharing (CORS) issues with Font Awesome font in

For a while now, I've been using Angular and Material without any issues. However, recently I encountered a problem that has me puzzled. When running my Angular app from IntelliJ, an error message appeared in the console. The error stated: Access to ...

angulargoogle-material-icons

Here is an example of how to transfer a value from PHP to a jQuery function in the code snippet provided

This is an example of my code. It is functioning properly even without passing a value. function displayMessage(text) { alert(text); } <button type="button" id="button" class="btn btn-success" onclick="displayMessage("Hello");"> Click Me </ ...

javascriptphpjqueryajaxhtml

Required inputs do not disrupt the form's action flow

Here is the HTML code that I am working with: function document_save_changes(){ if (is_key_dirty == true){ var elm = document.getElementById('set_doc_button'); key_change_warning(elm, 'D'); return; } if (document_save_warning('A ...

javascripthtmlforms

Placing HTML text on top of a three.js renderer

I have been attempting to overlay HTML text onto my three.js sketch, but adjusting the z-index does not seem to be working. While I know that I could utilize innerHTML, the issue arises when I need to also use the onclick attribute, which is not the main f ...

htmlcssthree.js

What is the reason behind receiving email alerts whenever visitors access my website?

While developing a website, I ran some tests and noticed that whenever I visit the URL, an email notification is generated. However, the notification received is just a blank one. Could this issue be related to what I entered in the action field? <for ...

phphtmlforms

Try out a form with a FormControl for input field

I have a custom component structured as follows: @Component({ selector: 'bg-formfield-markdown', host: { class: 'forminput', '[class.forminput-is-error]': 'isErrorState', '[class. ...

angularkarma-jasmineangular-componentsangular-forms

Choosing "grandoffspring"

I have a complex inquiry! Let's examine three potential scenarios Situation 1 <div class="entry-content"> <p><a href="#"><img src="#"></a></p> </div> Situation 2 <div class="entry-content"> &l ...

jquerycsswordpress

Updating HTML content dynamically using Node.js without requiring a page refresh

Currently, I am in the process of learning nodejs and I am looking to dynamically change the content within my HTML without having to completely re-render the entire page every time I make a post. Below is the snippet of code I am currently working with: ...

htmlnode.jsexpress

Selectize Fails to Populate Options Using Ajax

ExpressJS is the platform I am using to develop a management dashboard for a community project. Right now, my main concern is integrating a modal that allows users to add new games to a database. Although I am able to fetch data remotely, I am facing diffi ...

javascriptjqueryhtmlexpressselectize.js

Apache Wicket - Utilizing HTML5 details element within a RepeatingView to save open property

In my repeatingview, I have HTML5 detail elements that can be opened or collapsed by the user. However, when I remove certain elements from the repeatingview and then reload it using target.add(container), all elements end up being collapsed again. How c ...

javahtmlwicket

Discrepancy in div height between Chrome/Edge and Firefox browsers

I am currently in the process of designing a straightforward website layout that includes a navigation bar at the top. The main focus is on an image that needs to stretch from the bottom of the navbar to the bottom of the window, filling up the entire scre ...

javascripthtmlcss

What is the process by which Angular 2 handles imports?

Currently diving into the world of Angular2 with TypeScript. I understand that SystemJS is crucial for enabling the import feature, like this example: import { bootstrap } from "angular2/platform/browser"; While this all makes sense, I find myself questi ...

typescriptangular

Obtaining the XPath for a data table containing two td elements that can be simultaneously clickable

<div class="dataTables_scrollBody" style="position: relative; overflow: auto; height: 370px; width: 100%; min-height: 0px;"> <table id="offer_create" class="display article-list ranklist_drag table table-bordered dataTable no-footer" aria-describe ...

javahtmlcssxpath

Distinguishing variations within subcategories that stem from a common origin

In my code example, I have two interfaces that both extend a common base interface. The "String" function takes an argument of type "StringAsset". My expectation was that if I were to call the "String" function and pass it a value of "NumberAsset", TypeScr ...

typescript

Implementing dynamic data updates for the yAxis in a chart using Highcharts and Angular 2/4

I am currently working with a spline chart: this.chart = { chart: { type: 'spline', zoomType: 'x', animation: true, marginRight: 10, renderTo ...

angulartypescripthighchartsangular2-highcharts

Exploring Angular 2 Beta 8: An Introduction to @Query Usage

My attempt to utilize @Query to fetch data regarding an element in my template has not been successful. I made an effort using the following approach: Referenced here. Here is a snippet of my code, import {Component, Query, QueryList, ElementRef} from &a ...

javascriptangular

There seems to be a troublesome character in the Nuxt3 production server causing some issues

When submitting an HTML encoded text to the server, everything runs smoothly on the development environment. However, once it is deployed to a Netlify server, the same request triggers a 500 error and the server side logging middleware only recognizes a PO ...

typescriptvuejs3netlifynuxt3nitro