Remove button zoom on hover (Dawn)

[swishlatvija]

Hello,

Could someone please show us how to remove the zoom effect from all Shopify buttons once they are hovered and hopefully also tell us how to add a different hover color? 

Link: https://swish.eu/pages/contact

Image:

Kind Regards,

[GemPages · Accepted solution]

Hello @swishlatvija 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your theme.liquid theme file.

3. Paste the below code before </body>:

<style>
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after,
   .button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before{
   display: none !important;
}
</style>

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[suyash1 · Accepted solution]

@swishlatvija - add this css to the very end of your base.css file and check, what color do you want on hover?

.button:not([disabled]):hover:after{box-shadow: none;}

[suyash1 · Accepted solution]

@swishlatvija - for hover add this

.button:hover{background-color: #ff0000;}

[suyash1 · Accepted solution]

@swishlatvija - something weird as I did not give any code to remove border, did you add any other code?

[GemPages · Accepted solution]

Hello @swishlatvija 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your theme.liquid theme file.

3. Paste the below code before </body>:

<style>
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after,
   .button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before{
   display: none !important;
}
</style>

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[suyash1 · Accepted solution]

@swishlatvija - add this css to the very end of your base.css file and check, what color do you want on hover?

.button:not([disabled]):hover:after{box-shadow: none;}

[swishlatvija]

Thanks a lot, @suyash1 

Could you please show an example with any color? For instance, red?

[suyash1]

@swishlatvija - add this css and check, this will change all buttons to red color

.button{background-color: #ff0000;}

[swishlatvija]

thanks @suyash1 

And my apologies for not being precise enough. I was thinking about the hover color.

[suyash1 · Accepted solution]

@swishlatvija - for hover add this

.button:hover{background-color: #ff0000;}

[swishlatvija]

@suyash1 , thank you so much, but your code also removed the classic borderline on hovering. Is there any fix so that the hover buttons still have a black border?

Hopefully, all buttons have the same size.

Link: https://swish.eu/collections/escalade-sports-basketball-accessories

Pic below:

[suyash1 · Accepted solution]

@swishlatvija - something weird as I did not give any code to remove border, did you add any other code?

[swishlatvija]

Hey, @suyash1 

This code removed the borderlines on hover.

[suyash1 · Accepted solution]

@swishlatvija - please remove my code given to disable shadows, so we can understand if that code is an issue or it is something else

[HELDERWRLD]

Hello Suyash,
And how can i remove the zoom effect when i pass the mouse from the product images?

Site: https://c04baf-2.myshopify.com/
Passe: Diversusoficial

[suyash1]

@HELDERWRLD - please add this css to the very end of your base.css file and check

@media screen and (min-width: 990px){
.card-wrapper:hover .media.media--hover-effect>img+img {transform: none !important;}
}

[HELDERWRLD]

Thank you Suyash, it worked!