How to remove button zoom on hover in Dawn theme?

Store Design
, , ,
1

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:

Screenshot (8).png
Screenshot (8).png923×392 8.15 KB

Kind Regards,

2

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 :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

@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;}
4

Thanks a lot, @suyash1

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

5

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

.button{background-color: #ff0000;}

suyash1_0-1673540208938.png
suyash1_0-1673540208938.png1366×768 83.1 KB

6

thanks @suyash1

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

7

@swishlatvija - for hover add this

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

@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:

buttons.png
buttons.png1120×128 5.81 KB

9

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

10

Hey, @suyash1

This code removed the borderlines on hover.

11

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

12

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

13

@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;}
}
14

Thank you Suyash, it worked!