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
No description
47 Replies
Rook
Rookβ€’15mo ago
wouldn't that just show the dark blue color of the button's background?
Chris Bolson
Chris Bolsonβ€’15mo ago
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)
Rook
Rookβ€’15mo ago
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 it
.suhaylmv
.suhaylmvβ€’15mo ago
Can't use this solution in my case, because the background gradient is an image
Rook
Rookβ€’15mo ago
why not? can you show me what you tried?
Rook
Rookβ€’15mo ago
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
.suhaylmv
.suhaylmvβ€’15mo ago
Doesn't seem to work for some reason:
No description
.suhaylmv
.suhaylmvβ€’15mo ago
This is the code of the button :
<a
href="/contacto/"
rel="prefetch"
class="absolute right-[8%] top-[50%] inline-block translate-y-[-50%] rounded-sm bg-accentSecondary-800 px-10 py-[10px] mix-blend-multiply xl:right-[10%] 2xl:right-0"
>
<span class="text-white">Contactar</span>
</a>
<a
href="/contacto/"
rel="prefetch"
class="absolute right-[8%] top-[50%] inline-block translate-y-[-50%] rounded-sm bg-accentSecondary-800 px-10 py-[10px] mix-blend-multiply xl:right-[10%] 2xl:right-0"
>
<span class="text-white">Contactar</span>
</a>
Chooβ™šπ•‚π•šπ•Ÿπ•˜
I misread the post. I didn't realize the goal was for the text to show through.
.suhaylmv
.suhaylmvβ€’15mo ago
have you ever used Astro? I don't think it's possible to do with Astro's <Image /> components
Rook
Rookβ€’15mo ago
what isn't possible with astro's image components? setting a background image in CSS?
.suhaylmv
.suhaylmvβ€’15mo ago
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
Chris Bolson
Chris Bolsonβ€’15mo ago
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"?
.suhaylmv
.suhaylmvβ€’15mo ago
#12182B
Chris Bolson
Chris Bolsonβ€’15mo ago
another possibility is that the button (link) is within a parent with a white background
.suhaylmv
.suhaylmvβ€’15mo ago
Can you elaborate? I don't understand
Chris Bolson
Chris Bolsonβ€’15mo ago
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:
<li class="bg-white">
<a href="/contacto/" rel="prefetch" class="absolute right-[8%] top-[50%] inline-block translate-y-[-50%] rounded-sm bg-accentSecondary-800 px-10 py-[10px] mix-blend-multiply xl:right-[10%] 2xl:right-0">
<span class="text-white">Contactar</span>
</a>
</li>
<li class="bg-white">
<a href="/contacto/" rel="prefetch" class="absolute right-[8%] top-[50%] inline-block translate-y-[-50%] rounded-sm bg-accentSecondary-800 px-10 py-[10px] mix-blend-multiply xl:right-[10%] 2xl:right-0">
<span class="text-white">Contactar</span>
</a>
</li>
.suhaylmv
.suhaylmvβ€’15mo ago
When the navbar is on top of the page, it's transparent, but when it moves it has a background color
<nav
class={
"fixed left-0 top-0 z-50 h-[70px] w-full justify-between border-b border-black font-main text-xl font-semibold text-accentSecondary-800 2xl:flex 2xl:items-center 2xl:justify-center " +
(isBgTransparent()
? "bg-none duration-300 ease-out"
: " bg-[#CADBF3] duration-300 ease-out")
}
>
<div class="relative hidden h-full w-full md:block 2xl:max-w-[1450px]">
<div class="absolute left-[8%] top-[50%] flex translate-y-[-50%] gap-8 lg:gap-12 xl:left-[10%] xl:gap-16 2xl:left-0">
<a href="/" rel="prefetch" class="">
Inicio
</a>
<a href="/blog/" class="" rel="prefetch">
Blog
</a>
</div>
<a href="/" aria-label="logo">
<img
src="/logo.svg"
alt="logo"
class="absolute left-[50%] top-[50%] h-[30px] translate-x-[-50%] translate-y-[-50%]"
/>
</a>
<a
href="/contacto/"
rel="prefetch"
class="absolute right-[8%] top-[50%] inline-block translate-y-[-50%] rounded-sm bg-accentSecondary-800 px-10 py-[10px] mix-blend-multiply xl:right-[10%] 2xl:right-0 "
>
<span class="text-white">Contactar</span>
</a>
</div>
<div class="block md:hidden">
<a href="/" class="" aria-label="logo">
<img
src="/logo.svg"
alt="logo"
class="absolute left-[5%] top-[50%] h-[25px] translate-y-[-50%] md:h-[30px]"
/>
</a>
<div
onclick={hamburgerClickHandler}
class="absolute right-[5%] top-[50%] translate-y-[-50%]"
>
{!isSidebarActive() ? <VsMenu size={36} /> : <VsClose size={36} />}
</div>
</div>
</nav>
<nav
class={
"fixed left-0 top-0 z-50 h-[70px] w-full justify-between border-b border-black font-main text-xl font-semibold text-accentSecondary-800 2xl:flex 2xl:items-center 2xl:justify-center " +
(isBgTransparent()
? "bg-none duration-300 ease-out"
: " bg-[#CADBF3] duration-300 ease-out")
}
>
<div class="relative hidden h-full w-full md:block 2xl:max-w-[1450px]">
<div class="absolute left-[8%] top-[50%] flex translate-y-[-50%] gap-8 lg:gap-12 xl:left-[10%] xl:gap-16 2xl:left-0">
<a href="/" rel="prefetch" class="">
Inicio
</a>
<a href="/blog/" class="" rel="prefetch">
Blog
</a>
</div>
<a href="/" aria-label="logo">
<img
src="/logo.svg"
alt="logo"
class="absolute left-[50%] top-[50%] h-[30px] translate-x-[-50%] translate-y-[-50%]"
/>
</a>
<a
href="/contacto/"
rel="prefetch"
class="absolute right-[8%] top-[50%] inline-block translate-y-[-50%] rounded-sm bg-accentSecondary-800 px-10 py-[10px] mix-blend-multiply xl:right-[10%] 2xl:right-0 "
>
<span class="text-white">Contactar</span>
</a>
</div>
<div class="block md:hidden">
<a href="/" class="" aria-label="logo">
<img
src="/logo.svg"
alt="logo"
class="absolute left-[5%] top-[50%] h-[25px] translate-y-[-50%] md:h-[30px]"
/>
</a>
<div
onclick={hamburgerClickHandler}
class="absolute right-[5%] top-[50%] translate-y-[-50%]"
>
{!isSidebarActive() ? <VsMenu size={36} /> : <VsClose size={36} />}
</div>
</div>
</nav>
Sorry for that long code)
Chris Bolson
Chris Bolsonβ€’15mo ago
(isBgTransparent()
? "bg-none duration-300 ease-out"
: " bg-[#CADBF3] duration-300 ease-out")
(isBgTransparent()
? "bg-none duration-300 ease-out"
: " bg-[#CADBF3] duration-300 ease-out")
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
.suhaylmv
.suhaylmvβ€’15mo ago
yeah, that's not the issue
Chris Bolson
Chris Bolsonβ€’15mo ago
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.
.suhaylmv
.suhaylmvβ€’15mo ago
btw it works when the background isn't transparent
No description
.suhaylmv
.suhaylmvβ€’15mo ago
Thanks for your time and help!
Chooβ™šπ•‚π•šπ•Ÿπ•˜
Mix blend mode is sufficient if you use white text and the mode is darken. https://codepen.io/chooking/pen/eYbNYeY
.suhaylmv
.suhaylmvβ€’15mo ago
Still doesn't work
No description
Chooβ™šπ•‚π•šπ•Ÿπ•˜
What exact code did you use?
.suhaylmv
.suhaylmvβ€’15mo ago
<nav
class={
"fixed left-0 top-0 z-50 h-[70px] w-full justify-between border-b border-black font-main text-xl font-semibold text-accentSecondary-800 2xl:flex 2xl:items-center 2xl:justify-center " +
(isBgTransparent()
? "bg-none duration-300 ease-out"
: "bg-[#CADBF3] duration-300 ease-out")
}
>
<div class="relative hidden h-full w-full md:block 2xl:max-w-[1450px]">
<div class="absolute left-[8%] top-[50%] flex translate-y-[-50%] gap-8 lg:gap-12 xl:left-[10%] xl:gap-16 2xl:left-0">
<a href="/" rel="prefetch" class="">
Inicio
</a>
<a href="/blog/" class="" rel="prefetch">
Blog
</a>
</div>
<a href="/" aria-label="logo">
<img
src="/logo.svg"
alt="logo"
class="absolute left-[50%] top-[50%] h-[30px] translate-x-[-50%] translate-y-[-50%]"
/>
</a>
<a
href="/contacto/"
rel="prefetch"
class="absolute right-[8%] top-[50%] inline-block translate-y-[-50%] rounded-sm bg-accentSecondary-800 px-10 py-[10px] mix-blend-darken xl:right-[10%] 2xl:right-0 "
>
<span class="text-white">Contactar</span>
</a>
</div>
<div class="block md:hidden">
<a href="/" class="" aria-label="logo">
<img
src="/logo.svg"
alt="logo"
class="absolute left-[5%] top-[50%] h-[25px] translate-y-[-50%] md:h-[30px]"
/>
</a>
<div
onclick={hamburgerClickHandler}
class="absolute right-[5%] top-[50%] translate-y-[-50%]"
>
{!isSidebarActive() ? <VsMenu size={36} /> : <VsClose size={36} />}
</div>
</div>
</nav>
<nav
class={
"fixed left-0 top-0 z-50 h-[70px] w-full justify-between border-b border-black font-main text-xl font-semibold text-accentSecondary-800 2xl:flex 2xl:items-center 2xl:justify-center " +
(isBgTransparent()
? "bg-none duration-300 ease-out"
: "bg-[#CADBF3] duration-300 ease-out")
}
>
<div class="relative hidden h-full w-full md:block 2xl:max-w-[1450px]">
<div class="absolute left-[8%] top-[50%] flex translate-y-[-50%] gap-8 lg:gap-12 xl:left-[10%] xl:gap-16 2xl:left-0">
<a href="/" rel="prefetch" class="">
Inicio
</a>
<a href="/blog/" class="" rel="prefetch">
Blog
</a>
</div>
<a href="/" aria-label="logo">
<img
src="/logo.svg"
alt="logo"
class="absolute left-[50%] top-[50%] h-[30px] translate-x-[-50%] translate-y-[-50%]"
/>
</a>
<a
href="/contacto/"
rel="prefetch"
class="absolute right-[8%] top-[50%] inline-block translate-y-[-50%] rounded-sm bg-accentSecondary-800 px-10 py-[10px] mix-blend-darken xl:right-[10%] 2xl:right-0 "
>
<span class="text-white">Contactar</span>
</a>
</div>
<div class="block md:hidden">
<a href="/" class="" aria-label="logo">
<img
src="/logo.svg"
alt="logo"
class="absolute left-[5%] top-[50%] h-[25px] translate-y-[-50%] md:h-[30px]"
/>
</a>
<div
onclick={hamburgerClickHandler}
class="absolute right-[5%] top-[50%] translate-y-[-50%]"
>
{!isSidebarActive() ? <VsMenu size={36} /> : <VsClose size={36} />}
</div>
</div>
</nav>
Chris Bolson
Chris Bolsonβ€’15mo ago
Have you tried "bg-transparent" rather than "bg-none"?
Chooβ™šπ•‚π•šπ•Ÿπ•˜
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.
.suhaylmv
.suhaylmvβ€’15mo ago
Still the same Yeah, I get that, sorry
Chooβ™šπ•‚π•šπ•Ÿπ•˜
No, but I didn't realize it was a link until I saw your code.
Chooβ™šπ•‚π•šπ•Ÿπ•˜
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
.suhaylmv
.suhaylmvβ€’15mo ago
This is the code inside a wrapper I use for all pages, in case it's relevant
<body>
<div
class="font-main min-h-screen grid grid-cols-1 grid-rows-[auto_1fr_auto] selection:text-accentSecondary-800 selection:bg-accentMain"
>
{
isNavbarDynamic ? (
<NavbarDynamic client:only="solid-js" transition:persist />
) : (
<NavbarStatic client:only="solid-js" transition:persist />
)
}

<div
class="flex flex-col justify-center items-center bg-accentTertiary-100 h-full w-full"
>
<div
class="max-w-[1920px] h-full w-full flex justify-center items-center"
>
<slot />
</div>
</div>
<Footer />
</div>
</body>
<body>
<div
class="font-main min-h-screen grid grid-cols-1 grid-rows-[auto_1fr_auto] selection:text-accentSecondary-800 selection:bg-accentMain"
>
{
isNavbarDynamic ? (
<NavbarDynamic client:only="solid-js" transition:persist />
) : (
<NavbarStatic client:only="solid-js" transition:persist />
)
}

<div
class="flex flex-col justify-center items-center bg-accentTertiary-100 h-full w-full"
>
<div
class="max-w-[1920px] h-full w-full flex justify-center items-center"
>
<slot />
</div>
</div>
<Footer />
</div>
</body>
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?
Chooβ™šπ•‚π•šπ•Ÿπ•˜
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.
.suhaylmv
.suhaylmvβ€’15mo ago
Okay. Give me half an hour. I'll try to create a minimum replica
.suhaylmv
.suhaylmvβ€’15mo ago
@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.
Chooβ™šπ•‚π•šπ•Ÿπ•˜
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.
.suhaylmv
.suhaylmvβ€’15mo ago
I think the whole navbar component could relate to the problem. But I can leave only the background and the link if you wish
.suhaylmv
.suhaylmvβ€’15mo ago
Look:
No description
.suhaylmv
.suhaylmvβ€’15mo ago
the link text color is correct when it's outside the navbar
Chooβ™šπ•‚π•šπ•Ÿπ•˜
OK. Leave it in. I will look later.
.suhaylmv
.suhaylmvβ€’15mo ago
the issue has to be with the navbar ok
Chooβ™šπ•‚π•šπ•Ÿπ•˜
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.
.suhaylmv
.suhaylmvβ€’15mo ago
oh that's right btw I simplified the code check the repo Now it's just this:
<body class="relative bg-blue-200">
<nav
class="fixed left-0 top-0 h-[70px] w-full text-xl font-semibold 2xl:flex 2xl:items-center 2xl:justify-center"
>
<a class="bg-slate-800 px-10 py-[10px] mix-blend-multiply">
<span class="text-white">Contactar</span>
</a>
</nav>
<img src="/gradient.png" alt="gradient" class="z-[-1]" />
</body>
<body class="relative bg-blue-200">
<nav
class="fixed left-0 top-0 h-[70px] w-full text-xl font-semibold 2xl:flex 2xl:items-center 2xl:justify-center"
>
<a class="bg-slate-800 px-10 py-[10px] mix-blend-multiply">
<span class="text-white">Contactar</span>
</a>
</nav>
<img src="/gradient.png" alt="gradient" class="z-[-1]" />
</body>
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
.suhaylmv
.suhaylmvβ€’15mo ago
No description
Chooβ™šπ•‚π•šπ•Ÿπ•˜
Add back the fixed class but also put a mix blend mode on the nav.
.suhaylmv
.suhaylmvβ€’15mo ago
Now it works! Thank you so much! Now the css transition is messed up, I'll try to find a way to fix it
Want results from more Discord servers?
Add your server