Change size of button on hover without changing the size of text in the button

flammagreg · ‎05-01-2024

Hi guys, I've been stuck on this for hours. Anyone know how I can make the size of a button on hover to be smaller without affecting the size of the text inside of the button? Any help is greatly appreciated!

A good reference is how the buttons on Gucci's website operate.

My website: fluzeo.com

ThePrimeWeb · ‎05-01-2024

Hey @flammagreg,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    .banner__buttons:hover {
        transform: scale(1) !important;
    }
    
    .banner__buttons {
        position: relative !important;
    }
    
    .banner__buttons .button {
        background-color: transparent !important;
    }
    
    .banner__buttons:after {
        content: '';
        background-color: white !important;
        height: 100% !important;
        width: 100% !important;
        position: absolute !important;
        z-index: -1 !important;
        border-radius: 2px !important;
        transform: scale(1) !important;
        transition: transform 300ms !important;
    }
    
    .banner__buttons:hover::after {
        transform: scale(0.95) !important;
    }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎05-01-2024

Hey @flammagreg,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    .banner__buttons:hover {
        transform: scale(1) !important;
    }
    
    .banner__buttons {
        position: relative !important;
    }
    
    .banner__buttons .button {
        background-color: transparent !important;
    }
    
    .banner__buttons:after {
        content: '';
        background-color: white !important;
        height: 100% !important;
        width: 100% !important;
        position: absolute !important;
        z-index: -1 !important;
        border-radius: 2px !important;
        transform: scale(1) !important;
        transition: transform 300ms !important;
    }
    
    .banner__buttons:hover::after {
        transform: scale(0.95) !important;
    }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

flammagreg · ‎05-01-2024

Amazing, thank you! Do you know where and what line of code I should use to make the transition of the box slower (some sort of ease code)?

ThePrimeWeb · ‎05-01-2024

Here @flammagreg. It's 300 milliseconds now. Just change it to whatever you need. 1000ms for 1 second.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

flammagreg · ‎05-01-2024

Super helpful thank you!