Disappearing underline on button hover effect

Would anyone happen to know how to customize the button like the one in this site?

There's an existing underline on the button and when you hover over it, the underline disappears. I'd like to create the same effect with CSS!

We can use CSS code to do this. Can you share link your site? We can check & adjust code easier

https://www.susiesaltzman.com/ 😀

1 hour ago, ssjewelry said:

https://www.susiesaltzman.com/ 😀

I don't see button on homepage. Which page are you referring to?

You can check about page - there's a get in touch button 🙂

But would like to have the effect across all buttons on the site except add to cart buttons

On 6/25/2023 at 2:36 PM, ssjewelry said:

https://www.susiesaltzman.com/ 😀

Add to Design > Custom CSS

/* Button underline */
a.sqs-block-button-element--small.sqs-button-element--tertiary.sqs-block-button-element:after {
    content: "";
    background-color: white;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    bottom: 0;
    transition: all 0.3s ease;
}
a.sqs-block-button-element--small.sqs-button-element--tertiary.sqs-block-button-element {
    position: relative;
}
a.sqs-block-button-element--small.sqs-button-element--tertiary.sqs-block-button-element:hover:after {
    width: 0;
    transition: all 0.3s ease;
}

Would it be possible to have the underline disappear from both sides? 
Almost like the disappearance converges into the middle 🙂

THANK YOU!

YAY! This is perfect!

Thank you SO SO much! 😁🤩

Hi @tuanphan!

Would you know how to shorten the button underline so it's the same length as the text? 🙂

https://www.susiesaltzman.com/new-home

16 hours ago, ssjewelry said:

Hi @tuanphan!

Would you know how to shorten the button underline so it's the same length as the text? 🙂

https://www.susiesaltzman.com/new-home

Add this CSS under

a.sqs-block-button-element--small.sqs-button-element--tertiary.sqs-block-button-element {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Thank you SOOO much!

Hello again @tuanphan! 

I created a "medium" version of the button so I can have it in a different color, but I'm not seeing the underline effect. Can you kindly help please? 🙂 

https://www.susiesaltzman.com/

Here is the code I used:

Quote

/* BUTTON UNDERLINE */
a.sqs-block-button-element--medium.sqs-button-element--tertiary.sqs-block-button-element:after {
    content: "";
    background-color: #50332e;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    bottom: 0;
    transition: all .3s ease;
    transform: scalex(1);
}

a.sqs-block-button-element--medium.sqs-button-element--tertiary.sqs-block-button-element {
    position: relative;
}

a.sqs-block-button-element--medium.sqs-button-element--tertiary.sqs-block-button-element:hover:after {
    transform:scalex(0);
    transition: all .3s ease;
}

a.sqs-block-button-element-medium.sqs-button-element--tertiary.sqs-block-button-element {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

6 hours ago, ssjewelry said:

Hello again @tuanphan! 

I created a "medium" version of the button so I can have it in a different color, but I'm not seeing the underline effect. Can you kindly help please? 🙂 

https://www.susiesaltzman.com/

Here is the code I used:

This code for Medium button but use Tertiary style

But your button uses Primary Style

So if you want to use that code, you need to change button to Tertiary style

OR If you want to use Primary style, you need to change "tertiary" in the code to "primary"

It worked! Thank you SOOOO much! ❤️