Fix text on hover button

Shopify Discussion
,
1

Hi this is the code I have used in my theme CSS. So now the opacity is lower and you can hover over them. However the texts opacity has also gone lower, which I did not want. I only wanted the background box of the button to have lower opacity and the text still be visible. Would appreciate some help please!

.button.button–primary {
opacity: 0.5;
transition: opacity 0.5s ease;
}
.button.button–primary:hover {
opacity: 1;
}

looks like this right now

Screenshot 2024-05-27 at 15.28.45.png
Screenshot 2024-05-27 at 15.28.45.png516×418 474 KB

2

Hello @tranquilweaves
Can you share store URL?

3

Hi @niraj_patel it is tranquilweaves.com

4

Hi @Adnan333 , what i meant is that I want the text opacity to be 100% all the time. I am happy with the background colour and how its opacity changes when I hover on it. Just wanted some code to fix the text opacity, if that makes sense? My website is tranquilweaves.com, you can see the button here

5

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

#shopify-section-template--22695590953301__slideshow_n8MQAp .button.button--primary { opacity: 1.5 !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

6

@niraj_patel it has also changed the background opacity of the button, how can I make it only affect the text within the button? As I want the button so it has low opacity (the background of the button) and then when you hover the background goes solid. But I want the text to always be solid and visible.

7

@Adnan333 I dont understand what you mean, where do I edit the code?

8

Yes thank you, this has worked almost! the only thing is now it is showing an outline (I have outline unticked for this button), do you know why this is?

Screenshot 2024-05-27 at 16.08.11.png
Screenshot 2024-05-27 at 16.08.11.png454×338 330 KB

9

@Adnan333 I have added it but it still shows when you hover on the button, if you look at the button now at tranquilweaves.com you will see what I mean

10

@Adnan333 for some reason it is still showing the outline when you hover, I added that CSS but still is the same

11

Hi @tranquilweaves

Try this code, if still the outline still visible.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

a.button.button--primary:before, a.button.button--primary:after, a.button.button--primary:not([disabled]):hover::after {
    box-shadow: none !important;
    border: 0px !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

12

@Made4uo-Ribe Thank you this worked! :slightly_smiling_face: