Underline and Arrow on Link Animation Hover

user_2391374 0
Viewed 1022

I'm trying desperately to create an animation similar to this gif on my links.

animation exemple

I'm using the following html (elementor on wordpress):

<a href="#" class="elementor-button-link elementor-button elementor-size-sm">
    <span class="elementor-button-content-wrapper">
        <span class="elementor-button-icon elementor-align-icon-left">
            <i aria-hidden="true" class="icon icon-arrow"></i>
        </span>
        <span class="elementor-button-text">Say Hello</span>
    </span>
</a>

The span elementor-button-icon contains my icon.

Here is the CSS:

a span.elementor-button-content-wrapper { position: relative;}

a span.elementor-button-content-wrapper:before {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -5px;
  left: 0;
  background-color: #0D4BDE;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a:hover span.elementor-button-content-wrapper:before {
  visibility: visible;
  width: 100%;
}
a span.elementor-button-icon {visibility:hidden;opacity:0;transition:all .2s ease}
a span.elementor-button-text {transition:all .2s ease;}

a:hover span.elementor-button-text {transform:translateX(15px);}
a:hover span.elementor-button-icon {opacity:1;visibility:visible;}

but this is not the right result at all. I searched everywhere on the web, but I didn't find anything.

A genius among us?

underline hover animation css html
2 Answers

I don't know about Elementor, but in css, you could do something as the example below, it should get you started in achieving your goal.

a {
  text-decoration: none;
  font-family: sans-serif;
  position: relative;
  padding: .5rem 0;
  color: blue;
}

a::before {
  content: '';
  width: 0;
  height: 1px;
  background: blue;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width .2s ease;
}

.elementor-button-icon {
  position: absolute;
  transform: translateX(-14px);
  opacity: 0;
  transition: all .2s ease;
}

.elementor-button-text {
  display: inline-block;
  transition: padding-left .2s ease;
}

a:hover .elementor-button-text {
  padding-left: 24px;
}

a:hover::before {
  width: 100%;
}

a:hover .elementor-button-icon {
  transform: translateX(0);
  opacity: 1;
}
<a href="#" class="elementor-button-link elementor-button elementor-size-sm">
    <span class="elementor-button-content-wrapper">
        <span class="elementor-button-icon elementor-align-icon-left">
            &#8594;
        </span>
        <span class="elementor-button-text">Say Hello</span>
    </span>
</a>

user_26663780

You can tweak the following. The Arrow (overflow: hidden) and underline expands from 0 width and goes to 24px and 100% of parents width respectively:

a {
  position: relative;
  text-decoration: none;
}

a::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #0D4BDE;
  transition: width 1s ease-in-out;
}

.elementor-button-icon {
  display: inline-block;
  width: 0;
  overflow: hidden;
  transition: width 1s;
}

.elementor-button-text {
  transition: border 1s;
}

a:hover::after {
  width: 100%;
}

a:hover .elementor-button-icon {
  width: 24px;
}
<a href="#" class="elementor-button-link elementor-button elementor-size-sm">
  <span class="elementor-button-icon elementor-align-icon-left">&#8594;</span>
  <span class="elementor-button-text">Say Hello</span>
</a>

user_23332140
Related