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

ActivatedRoute not receiving the parameter value

Having trouble retrieving the parameter from the route and passing it to a function within the component which then communicates with the service. Initially tried placing the parameter retrieval in the NgInit but moved it to the constructor, still no succ ...

javascriptangularroutes

Can a hyperlink exist without a specified href attribute?

One scenario could be when I receive this specific code from a third-party source <a class="cs_import">Add contacts from your Address Book</a> Curiously, the link "Add contacts from your Address Book" does not redirect to any page as expected ...

javascripthtmlcss

How can I add text to an HTML5 SVG similar to using the HTML5 <p> tag?

I am currently working on creating dynamic rectangular boxes and I am facing some difficulties with inserting text into the shapes. The SVG text requires setting x and y coordinates in separate text tags, and doesn't have built-in width and height pro ...

javascriptcsshtmljquery-pluginssvg

Upon the initial loading of GoJS and Angular Links, nodes are not bypassed

Hey there, I'm currently working on a workflow editor and renderer using Angular and GoJS. Everything seems to be in order, except for this one pesky bug that's bothering me. When the page first loads, the links don't avoid nodes properly. H ...

angulartypescriptrenderinggojs

Unable to implement a design on a button during its click event

I successfully implemented a dynamic button in HTML5 and Javascript. The button has a click event assigned to it, so when clicked, its content and background color are supposed to change. However, while the content changes correctly, the background color d ...

htmlcssdom

Sort the list by the last name using Angular 2

Is there a way to arrange the contact list by LAST NAME, with names categorized under each alphabet? While I was able to achieve this in jQuery and Angular-1, I need guidance on how to implement this logic in Angular2/Ionic V2. ...

angularionic2

TypeScript: Error - .map() is an Invalid Function

I have come across numerous questions similar to mine, but the vast majority of them pertain to an Observable, which is not the issue I am facing. The code snippet in question looks like this: selectedItems: Item[] = null; selectedDate: Date = null; subm ...

angulartypescriptangular7

What is the best way to extract the image tag from HTML code and use it as the image source in Glide for images

I recently came across a method to extract image links from HTML img tags using the Html Java library. It requires using the fromHtml method. After pulling some HTML code from an RSS feed, I wanted to display the images it contained. The code snippet belo ...

javaandroidhtml

Display MQTT information on a Django template

I've been utilizing paho-MQTT successfully to receive messages. However, I'm facing a challenge in displaying the received data in a template. Below is an excerpt of my code: import paho.mqtt.client as mqtt import json def on_connect(client, use ...

pythonhtmldjangomqttmessagebroker

Extracting Data from HTML Using VBA

I'm attempting to extract the value from the following HTML source code: K<sub>C</sub> [ksi&#8730in]:<br> <input class="test1" type="text" name="fKC" value=""> <br> However, the code I tried using does not seem to ...

htmlvba

What is the reason behind Typescript errors vanishing after including onchange in the code?

When using VSCode with appropriate settings enabled, the error would be displayed in the following .html file: <!DOCTYPE html> <html> <body> <div> <select> </select> </div> <script&g ...

typescriptvisual-studio-codejsdoc

Having trouble bringing my custom-built Angular module into my Angular application

Currently considering the utilization of this Yeoman generator as a starting point for a small project that will contain several reusable form components to be published. The generator constructs a module and an example component, directive, pipe, and serv ...

javascriptangularnpm

On the subsequent iteration of the function, transfer a variable from the end of the function to the beginning within the same

Can a variable that is set at the end of a function be sent back to the same function in order to be used at the beginning of the next run? Function function1 { If(val1.id == 5){ Console.log(val1.id val1.name) } else{} Val1.id = 5 Val1.name = 'nam ...

typescript

Util Deprecations resolved with TSLint Autofix

Is there a feature in VSCode that can automatically fix deprecations related to the util library? For example: if (isNullOrUndefined(this.api)) { Would be better written as: if (this.api === null || this.api === undefined) { While there isn't an ...

typescripttslint

Combining TypeScript into HTML resulted in an error: Uncaught ReferenceError clickbutton is not defined

Attempting to create a basic CRUD frontend without the use of any frameworks. I am encountering an issue when trying to include a TypeScript file (index.ts) in my index.html, as the functions called within it are showing as undefined. I understand that bro ...

htmltypescriptfrontend

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

I have been working on redesigning a website for mobile using only CSS. I set up media queries to deliver the appropriate CSS for desktop and mobile devices. However, I noticed that when resizing the browser to under 855 pixels, some of the mobile CSS is ...

htmlcssmobilemedia

position property in div element disrupts slider functionality

I've been working on incorporating a simple slider into my website and stumbled upon this example on jsfiddle My goal is to have the slider positioned "relative" within my site, but when I change the CSS to position: relative;, the slider no longer ...

javascriptjqueryhtml

Refreshing Components upon updates to session storage - Angular

Currently, I am in the process of developing a build-a-burger website using Angular. The ingredients and inventory need to be updated dynamically based on the selected location. Users can choose the location from a dropdown menu in the navigation bar. The ...

angularangularjstypescriptrerender

Setting up the CSS loader in a Vue.js project using webpack

I am currently working on a new vue-cli project and have successfully installed the Pure.CSS framework using npm install purecss --save. However, I am struggling to seamlessly integrate, import, or load the css framework into my project. I am unsure of whe ...

csswebpackvue.jsnode-modulesvue-cli

Best Practices for Organizing Imports in Typescript to Prevent Declaration Conflicts

When working with TypeScript, errors will be properly triggered if trying to execute the following: import * as path from "path" let path = path.join("a", "b", "c") The reason for this error is that it causes a conflict with the local declaration of &ap ...

typescript