Prevent scale animation for a specific section of the icon using CSS

I need help in preventing the scale animation of the :before part of the icon class from occurring when the button is hovered. The current behavior is causing the arrow to look distorted on hover...

Link to the code on Codepen

HTML

<div class="section">
  <div class="button"><href="#">Button<span class="arrow-right icon"></span> </div></div>

CSS

.section {
  padding: 40px 0;
}

.button {
  position: relative;
  padding-top: 14px;
  padding-bottom: 14px;
padding-left: 25px;
padding-right: 85px;
  border: 2px #009EE2 solid;
  float: left;
  color: #FFFFFF;
background-color: #009EE2;
  cursor: pointer;
  font-size: .9em;
  text-transform: uppercase;
  transition: color 0.4s, background-color 0.4s;
  display: flex;
  vertical-align: middle;
  line-height: 1em;
  outline: none;
  font-family: sans-serif;
  text-align: left;
  letter-spacing: 5px;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: 50%;
  left: 50%;
  margin: 0 -125px;
  width: auto;
}
.button:hover, .button:focus {
  transition: color 0.4s, background-color 0.4s;
  color: #009EE2;
  text-decoration: none;
  background-color: #FFFFFF;
}

.button:hover .arrow-right.icon {
  transition: color 0.4s, background-color 0.4s;
   color: #009EE2;
   animation: expand 1.5s;
  -webkit-animation: expand 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.arrow-right.icon {
  color: #FFF;
  background-color: transparent;
  position: absolute;
  margin-left: 20px;
  margin-top: 7px;
  width: 40px;
  height: 1px;
  background-color: currentColor;
}

.arrow-right.icon:before {
  content: '';
  position: absolute;
  right: 1px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

@keyframes expand {
  
  0% {
    transform: scaleX(1);
  }
  30% {
    transform: scaleX(1.5);
  }
  60% {
    transform: scaleX(1.5);
  }
    100% {
    transform: scaleX(1.5);
  }
}

@-webkit-keyframes expand {
  
 
  0% {
    transform: scaleX(1);
  }
  30% {
    transform: scaleX(1.5);
  }
  60% {
    transform: scaleX(1.5);
  }
    100% {
    transform: scaleX(1.5);
  }
}

This is my first time seeking help on Stack Overflow. Thank you in advance for any assistance (:

javascripthtmlcss

Answer №1

Here is a useful resource: https://codepen.io/VweMWoz

const timeline = gsap.timeline({paused: true});
timeline.from(
    ".gsap-swipe",
    {
      y: 20,
      x: 20,
      rotate: -40,
      duration: 3,
      transformOrigin: '30% 80%',
      ease: Elastic.easeOut.config(1, 0.5),
    }, 0
  )
  .fromTo(
    ".swipe",
    {
      xPercent: -100
    },
    {
      duration: 1,
      xPercent: 100,
      ease: Sine.easeInOut,
      stagger: {
        each: 0.15
      }
    }, 0
  )
  .from(
    ".maskSwipe",
    {
      xPercent: -100,
      ease: Sine.easeInOut
    },
    0.4
  )
  .from(
    "#hello",
    {
      duration: 1.5,
      drawSVG: "0%"
    },
    1
  )
  .from(
    ".swoop",
    {
      duration: 2,
      drawSVG: "0%"
    },
    1
  )
  .from(
    ".line",
    {
      drawSVG: "0%",
      duration: 0.5,
      stagger: {
        each: 0.2
      }
    },
    1
  )
  .from(
    ".shape",
    {
      scale: 0,
      duration: 1.3,
      transformOrigin: "50% 50%",
      rotate: '+=random(-60, 60)',
      ease: Elastic.easeOut.config(1, 0.8),
      stagger: {
        each: 0.2
      }
    },
    0.2
  );

// ScrubGSAPTimeline(timeline);

let hoverElement = document.querySelector('.js-hover');

hoverElement.addEventListener('mouseover', playTimeline);
hoverElement.addEventListener('mouseout', resetTimeline);

function playTimeline(){
  timeline.timeScale(1.25).restart();
}

function resetTimeline(){
  timeline.progress(0).pause();
}

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

What is the correct way to display single line code snippets in Firefox?

When attempting to display a single line of code within a code block, the layout appears too close to the line numbers (this issue only occurs in Firefox): https://i.sstatic.net/WXZp7.png The HTML code responsible for this display is automatically generat ...

htmlcss

The dialogue box fails to appear when accessed from the dropdown menu shadcn

I'm encountering an issue while using nextJS with shadcn. I am attempting to open a dialog from a dropdown menu, but instead of opening, it just closes the dropdown menu. My assumption is that I either need to utilize ref and states or position the al ...

javascriptreactjsnext.js

Utilizing Vuetify 2 skeleton-loader to customize loading states through Vuex store manipulation

Utilizing the Vuetify v-skeleton-loader component to wrap a v-data-table component. The server-side pagination and sorting in the data-table component are set up. To enable server-side pagination, the documentation recommends monitoring the options objec ...

javascriptvue.jsvuejs2vuexvuetify.js

Creating a text container in PHP for displaying information

As someone who is new to PHP and HTML, I'm curious about the CSS statements needed to create a text box that will display a value from one of my PHP functions. Right now, the function retrieves data from an SQL server and returns it, but I would like ...

phphtmlcsstextbox

Tips for returning an element to its starting position following animation

Hey there, I’m fairly new to the world of HTML and CSS. Recently, I was working on creating a YouTube clone website and I’ve run into an issue with the navigation. On the official YouTube website, when you click on the hamburger menu icon, the naviga ...

javascripthtmljquerycssposition

Disable the sorting feature on selected columns

I have a Datatable in JS with a scroll bar that I added using scrollY. However, it is displaying unnecessary small arrows within the table which I do not want. I have tried various methods to remove them but without success. Can someone please help me wi ...

javascriptscrolldatatablecolumnsorting

What is the best way to create a sharp light effect on a sphere in three.js?

My three.js scene features a sphere and directional light. The sphere appears to gradually darken as you look at it. How can I speed up the transition from light to dark? Is there a way to make the light appear "sharper"? var scene, camera, renderer, co ...

javascriptthree.jswebgl

Alter the appearance of the mouse cursor when hovering over input fields in HTML

I am working with a variety of HTML elements that can be moved via Drag'n'Drop. In order to indicate to the user where these elements can be dropped, I change the cursor's appearance using CSS classes applied through JavaScript. This method ...

htmlcssdrag-and-dropmouse-cursor

retrieve the month and year data from the input date

I encountered a situation where I'm working with the following unique HTML code: <input type="date" id="myDate"/> <button type="button" class="btn btn-secondary" id="clickMe">MyButton</ ...

javascripthtml

Material-UI Scroll Dialog that begins scrolling from the bottom

While attempting to incorporate a scrolling div with the ref tag inside Dialog Material-UI Design, I encountered an error stating Cannot read property 'scrollHeight' of undefined When running my code outside of the Dialog, it functions correctly ...

javascriptreactjsmaterial-ui

What is the best way to place a transparent navbar on top of a hero image while also adding a functional button to the hero image?

My navigation bar is set to be transparent on top of my hero image, but the buttons on the hero image are not clickable. The nav-bar has a z-index of 1, while my hero image, text, and button have a z-index of -1. This setup causes the button to be unclick ...

htmlcssnavbaroverlayz-index

Developing a hovercard/tooltip feature

I'm currently working on developing a hovercard feature for a social media platform I'm building. The concept involves displaying additional information about a user when their name is hovered over. The hovercard will appear with the user's ...

jqueryhtmlcssajax

Parsing HTML to access inner content

Currently, I have integrated an onClick event to an anchor tag. When the user interacts with it, my objective is to retrieve the inner HTML without relying on the id attribute. Below is the code snippet that illustrates my approach. Any assistance in acc ...

javascripthtml

"Integrating a controller into a modal view: a step-by

After spending an unhealthy amount of time on this issue, I finally managed to resolve it. Initially, the modal.open function was only darkening the screen without displaying any dialog box. However, by using windowTemplateUrl to override templateUrl, I wa ...

javascriptangularjsangularjs-directive

Adjustable icon dimensions in Material-UI

My current setup involves utilizing material-UI icons <ArrowRightAlt/> I have been able to manipulate the size of the icon using the fontSize attribute <ArrowRightAlt fontSize="large" /> However, I am interested in having the size ...

cssreactjsmaterial-ui

CSS properties are ineffective in scaling the image strip

I have a large image strip measuring 130560 x 1080. My goal is to load it into an image tag and use the parent div as a viewport, showing only one section of the image at a time. However, I'm encountering a problem when specifying the height and widt ...

htmlcssimage

Retrieve a specific line of code from a snippet of JavaScript

I am looking to extract a specific line of code from a script that I am receiving via ajax... The line in question is new Date(2010, 10 - 1, 31, 23, 59, 59) found within the following snippet: jQuery(function () { jQuery('#dealCountdown').count ...

javascriptjquery

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Is there a way to hide the save button within a Vue Modal without affecting other buttons with the same class? .btn.btn-primary { display: none; } Simply targeting .btn-primary in the CSS affects all elements with that class, and adding .modal woul ...

cssvue.jsbuttonmodal-dialog

What is the proper way to display the date and time 2021-11-14T18:30:00.000+00:00?

Here is my ts file code: mydate: Date = new Date('2021-11-14T18:30:00.000+00:00'); However, I want the date to be in this format:- 07-July-2022 If anyone can assist with achieving this format, it would be greatly appreciated. Thank you! ...

javascripttypescript

Unlock the mystery of identifying which trace is selected in the plot.ly JS legend

When using plot.ly, it is possible to set up a listener for legend click events. I am wondering how to determine which trace in the legend was clicked on. To provide a more specific example, let's say there are two traces (trace0, trace1) in a line gr ...

javascriptplotlyonclicklistener