How To Change The Outline Of A Button: Only Need To Change For Buttons In Image Background Sections

Store Design
, , ,
1

I’ve been searching for hours on how to change the border color that pops up when I hover my mouse over a specific button. I would like that border to match the color of the button background (#ffc700), instead of that white. Every other button on my site has its hover border come up as the same color as its button’s background, so I do NOT want to change those. I am only having this issue with buttons within image banners… please help. I’ve attached a screenshot to show what I’m talking about.

Screen Shot 2023-02-14 at 7.25.52 PM.png
Screen Shot 2023-02-14 at 7.25.52 PM.png2634×1538 422 KB

2

Hello @dolphinstudio ,

It’s the GemPages Support Team and we are glad to assist you today!

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

3

(null)

4

Hi @dolphinstudio

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

It will look like this when hovering:

PageFlyVictor_0-1676423769284.png
PageFlyVictor_0-1676423769284.png1920×937 308 KB

Hope this can help you solve the issue

Best regards,

Victor | PageFly

5

Thank you for your reply. This option took away the button borders entirely. I want to keep the borders just change this one’s border from white to yellow.

6

@dolphinstudio Got it, thank you, please help me to send the page password again, seems like it has been changed

PageFlyVictor_0-1676424475519.png
PageFlyVictor_0-1676424475519.png1460×937 12.5 KB

7

Hello @dolphinstudio ,

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1676424478213.png
GemPages_0-1676424478213.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

8

@dolphinstudio You can try this code again, with the same instruction above
9

This almost worked, but I was able to tweak it and and make it work anyway… thank you so much!! When I put this code in my theme.liquid file, it messed with the borders on all of the buttons with other background colors on my site. I just pasted the code you posted without the tags into the Custom CSS section (Custom CSS for Image Banner) of my theme editor (not the code editor) and it seems to be working now. Thanks again!