How to fix hidden text on hover in Dawn Theme button customization?

[erikapruett]

Hi!

I am customizing the outline button in the Dawn theme. It's functioning as I hoped, except the text seems to be hidden on hover. Would love help! Thank you!

https://charlie-theme.myshopify.com

password: demo

My code:

a.button.button--secondary {
border: 1px solid var(--color-accent-3) !important;
--color-button: none !important;
color:var(--color-accent-3) !important;
padding:10px;
}

a.button.button--secondary:before {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 0;
width: 100%;
background: #000;
transition: height 1s cubic-bezier(.15,.99,.18,.99);
}

a.button.button--secondary:hover:before {
height: 100%;
}

a.button.button--secondary:hover {
color: white !important;
opacity:1;
position: relative;
z-index: 2;
}

[Alex520]

Are you talking about this button?

Also, from the code you provided it looks like the heights for the before and after are not the same. Try changing them so they are the same.

[PageFly-Oliver]

Hi @erikapruett ,

You can try this code by following these steps:

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

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
a.button.button--secondary:hover:before{
z-index:-1 !important
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[suyash1]

@erikapruett - the black layer on hover is overlapping the text and hence text is not visible

[Anshul_arora · Accepted solution]

Hello @erikapruett ,

I understand you are facing issue on showing the text while users will hover over the button https://prnt.sc/VNzIWYT8gRMp

You can fix this issue at your end by making small changes in your css code, which you have added for adding hover effect on the buttons.

You have to remove the 'z-index' property in the " a.button.button--secondary:before " as mentioned in the screenshot https://prnt.sc/hfrBR87t3R5l

After removing the 'z-index' property the text on the button will be visible while user hover over it https://prnt.sc/av4_IpuOWaXk

I hope it helps

Please let me know if you have any query.

Thank you.

[erikapruett]

Thank you, all!!!

Yes, I just need to remove the z-index 😊

[Anshul_arora]

Thank you @erikapruett 

I am glad the solution helps you.