How to make a button with text which "traspasses" the background?
I want the text to "show" the gradient behind the button. I tried using all the main types of mix-blend-mode and couldn't make it work
47 Replies
wouldn't that just show the dark blue color of the button's background?
You should be able to get more or less what you want with mix-blend mode.
https://codepen.io/cbolson/pen/wvRawqd (I have used stripes for the demo just to clearly show that the background is being shown through the text) Of course it only works like this if the button color is dark (as is your case)
https://codepen.io/Therason/pen/bGOdbKo
Here's a solution that maybe works with any color, but it's a bit weird. No clue if it's the best approach, but the idea is to have an element with the same background as the body, then apply
background-clip: text
to itCan't use this solution in my case, because the background gradient is an image
why not? can you show me what you tried?
https://codepen.io/Therason/pen/bGOdbKo
I've updated it to use an image instead. I don't think using an image instead of a gradient makes much of a difference, you just might have to toy with the positioning
Doesn't seem to work for some reason:
This is the code of the button :
I misread the post. I didn't realize the goal was for the text to show through.
have you ever used Astro?
I don't think it's possible to do with Astro's <Image /> components
what isn't possible with astro's image components? setting a background image in CSS?
also the button is on a transparent navbar, it shouldn't have a fixed background image
Yeah, the point of these components is to optimize them on build (avif/webp format, compression, lazy loading, etc..)
At the end it uses another image, not the original one
I just tried it with Tailwind and it worked. I removed all your positioning as I don't think that would be causing the issue. What is the value of "accentSecondary-800"?
#12182B
another possibility is that the button (link) is within a parent with a white background
Can you elaborate? I don't understand
Is the contact button contained within another element that might prevent you from seeing the body background (or wherever your background image is defined)
For example if you had something like this:
When the navbar is on top of the page, it's transparent, but when it moves it has a background color
Sorry for that long code)
that could be the issue as it may be applying the backgound color..... though then it would also have that color outside of the button π€
no, that can't be it, sorry
yeah, that's not the issue
yes, sorry, I missed your explanation text plus it is clear from the code.
Well I don't know what the reason might be, sorry.
btw it works when the background isn't transparent
Thanks for your time and help!
Mix blend mode is sufficient if you use white text and the mode is darken.
https://codepen.io/chooking/pen/eYbNYeY
Still doesn't work
What exact code did you use?
Have you tried "bg-transparent" rather than "bg-none"?
I see. This is a totaly different structure. My version uses an actual button. You are using an anchor tag with a span to hold the text.
Still the same
Yeah, I get that, sorry
No, but I didn't realize it was a link until I saw your code.
I just tried it with a link and span, and it still works. I don't know why it doesn't work for you.
https://codepen.io/chooking/pen/GRPJRXG
This is the code inside a wrapper I use for all pages, in case it's relevant
This code is the content of <NavbarDynamic /> component,
Now I doubt this may be relevant for the problem
@chooking publishing and sending the link to the site would be helpful for solving this issue?
The full code might possibly help. You could be leaving out an important part.
But it would be better if you could make a minimum replica of the problem. It would be easier than looking through all of your code.
Okay. Give me half an hour. I'll try to create a minimum replica
@chooking here's the repo: https://github.com/suhaylmv/test
GitHub
GitHub - suhaylmv/test
Contribute to suhaylmv/test development by creating an account on GitHub.
That is not a minimum replica. I meant isolate that link and the background with absolutely nothing else that isn't needed to recreate the problem.
I just noticed another detail. You use a gradient from an image instead of a linear gradient CSS filter. I'm not sure if that makes a difference. Will check later.
I think the whole navbar component could relate to the problem. But I can leave only the background and the link if you wish
Look:
the link text color is correct when it's outside the navbar
OK. Leave it in. I will look later.
the issue has to be with the navbar
ok
You used text-indigo-100. It is not pure white.
This is probably not the only issue, but I just noticed it, and it definitely has an effect.
oh that's right
btw I simplified the code
check the repo
Now it's just this:
When I remove the class fixed from <nav>, mix-blend-mode works
So it doesn't work when a container is fixed, for some reason
Add back the fixed class but also put a mix blend mode on the nav.
Now it works! Thank you so much!
Now the css transition is messed up, I'll try to find a way to fix it