Hover link effects: CSS that doesn't apply to buttons

Hi everyone!

I am experimenting with CSS to create some hover link effects for my site. For now, I'm going with something that gives a passing underline. 

This is the code I'm using:

}
a {
  color: #C8102E;
  position: relative;
  text-decoration: none;
}

a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #C8102E;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

For the links in regular text, it's giving me the desired effect:

However, the passing underline also appears below my buttons which I don't want.

Is there some code that I can add so that this hover effect does not apply to any buttons? Or, will I have to use HTML to add these hover links on a link-by-link basis?

Thank you in advance.

@AustD You just need to add :not(.sqs-block-button-element) after the a tag in your code to exclude the buttons. The updated code should look like this:

a:not(.sqs-block-button-element) {
    color: #c8102e;
    position: relative;
    text-decoration: none;
}

a:not(.sqs-block-button-element)::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 4px;
    background-color: #c8102e;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scalex(0);
    transition: transform .3s ease-in-out;
}

a:not(.sqs-block-button-element):hover::before {
    transform-origin: left;
    transform: scalex(1);
}

@Lesum Thank you very much! The buttons are now excluded as I wanted.

The only issue I now have is that all the hyperlinks on my site are colour #C8102E. I realise it's probably bad practice but before I used your modified code, certain links (the social media links) on my site were black.  However, with this code, every link is now red.

Is there something I can add to ensure my links stay the colour they were before this hover link CSS was applied? Or, will it just be a case of manually changing the links in black back to red?

That aside, I've noticed a bigger issue with this code that I'm hoping you could also help me with. The issue must have been apparent when I created this post but I've only noticed it now. It seems the original hovel link CSS removed/hid all images across my site that contained links. Here is an example from one affected page: 

Page in question: https://www.sportsandsuitcases.com/lima

The page should look like this with each of these six images that you now see being clickable:

Can the hover link code be modified so that it excludes buttons but not any image that contains a link?

Thank you again

@Lesum Thank you! That modified code has done the trick! 🙏