Button underline ease in on hover

Shopify Discussion
1

Hey everyone, I have added some css to my link buttons to change the underline colour to red on hover (code below). I was wondering if there’s a way to make this colour change ease in on hover from left to right, so the transition feels more smooth I’m not sure if this kind of animation possible without an experts help? Any advice would be appreciated!

URL (symmetry theme) – https://pantee.co.uk/?_ab=0&_fd=0&_sc=1

.text-overlay__button-row .text-overlay__button:hover {
text-decoration-color: #c90013 !important ;
}

This is an example mockup of what I mean so the colour eases in from left to right…

Screenshot 2024-08-27 at 18.59.13.png
Screenshot 2024-08-27 at 18.59.13.png1436×656 78.6 KB

2

Hi @emilyaugstudios ,

To bring a left to right transition for the links/button on hover, you can update your css accordingly.

.text-overlay__button-row.text-overlay__button-row--link {
  background: linear-gradient(to right, #c90013, #c90013) 0% 100% no-repeat;
    background-size: auto;
  background-size: auto;
  background-size: 0% 2px;
  transition: background-size 0.5s linear;
}
.text-overlay__button-row.text-overlay__button-row--link:hover {
  background-size: 100% 2px !important;
}

Note: Change the class names accordingly for the elements you want to apply this style for. Also, If you need to add this style for a specific section. You can add the css code in he liquid file of that section.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

1 Like
3

Hi @Sweans – I think we are nearly there with it, thank you for your help :slightly_smiling_face: the only thing now is I can see the red line appearing but it does so behind the white line, I think maybe I need to figure out how to remove the white line or make the red appear on top?

See on the main homepage banner here where it says ‘SHOP NOW’ – https://pantee.co.uk/?_ab=0&_fd=0&_sc=1

4

Hi @emilyaugstudios ,

You can fix this for the “Shop Now” button on the main banner of homepage by replacing this code instead of the previous one:

.text-overlay__button-row .text-overlay__button {
  position: relative;
}

.text-overlay__button-row .text-overlay__button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #c90013;
  transition: width 0.5s linear;
}

.text-overlay__button-row .text-overlay__button:hover::after {
  width: 100%;
}

The above given css will add an after element for the button which will have the underline with left to right transition and it will not effect the existing style of the “Shop Now” button.

If this doesn’t fix the issue you’re facing, please provide a screenshot so that we can help you.

I hope this helps!

Regards,

Sweans