CODEWITHSUNDEEP
csssass
Guardian
Guardian

Reputation: 399

Move font-awesome icon to the right on hover

I am trying to accomplish the following:

<div class="cta-button">
  <a href="my-link">My link</a>
</div>

With the following scss applied

.cta-button a {
  background: $yellow;
  border-radius: 10px;
  padding: 20px;
  @include sans-p3-black;
  @include link_reset;
  transition: all 0.3s ease;
    &:after {
      @include fa('\f178');
      margin-left: 10px;
      color: $white;
      transition: all 0.3s ease;
    }
    &:hover {
      &:after {
        margin-left: 15px;
        transition: all 0.3s ease;
      }
    }
}

When I increase the margin-left with 5 px (since i want the font awesome icon to move to the right on hover), the text in the a tag gets pushed to the left.

I am using the same scss for a button element, there is works perfectly.

Any help would be appreciated.

Many thanks in advance

Upvotes: 3

Views: 7670

Answers (1)

Ben Davies
Ben Davies

Reputation: 436

Have you tried using the transform property as opposed to margin?

transform: translateX(5px);

Really good blog post from CSS tricks if you've not used transforms before: https://css-tricks.com/almanac/properties/t/transform/

.cta-button a {
  background: $yellow;
  border-radius: 10px;
  padding: 20px;
  @include sans-p3-black;
  @include link_reset;
  transition: all 0.3s ease;
    &:after {
      @include fa('\f178');
      margin-left: 10px;
      color: $white;
      transition: all 0.3s ease;
    }
    &:hover {
      &:after {
        transform: translateX(5px);
      }
    }
}

You will need to add in browser prefixes for support.

Upvotes: 4

Related Questions