Kevin Powell - Community•16mo ago

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

Rook•16mo ago

wouldn't that just show the dark blue color of the button's background?

Chris Bolson•16mo 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•16mo 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

suhaylmvOP•16mo ago

Can't use this solution in my case, because the background gradient is an image

Rook•16mo ago

why not? can you show me what you tried?

Rook•16mo 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

tgb :)

CodePen

clip text to body's bg

...

suhaylmvOP•16mo ago

Doesn't seem to work for some reason:

suhaylmvOP•16mo 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♚𝕂𝕚𝕟𝕘•16mo ago

I misread the post. I didn't realize the goal was for the text to show through.

suhaylmvOP•16mo ago

have you ever used Astro? I don't think it's possible to do with Astro's <Image /> components

Rook•16mo ago

what isn't possible with astro's image components? setting a background image in CSS?

suhaylmvOP•16mo 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•16mo 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"?

suhaylmvOP•16mo ago

#12182B

Chris Bolson•16mo ago

another possibility is that the button (link) is within a parent with a white background

suhaylmvOP•16mo ago

Can you elaborate? I don't understand

Chris Bolson•16mo 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>

suhaylmvOP•16mo 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•16mo 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

suhaylmvOP•16mo ago

yeah, that's not the issue

Chris Bolson•16mo 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.

suhaylmvOP•16mo ago

btw it works when the background isn't transparent

suhaylmvOP•16mo ago

Thanks for your time and help!

Choo♚𝕂𝕚𝕟𝕘•16mo ago

Mix blend mode is sufficient if you use white text and the mode is darken. https://codepen.io/chooking/pen/eYbNYeY

ChooKing

CodePen

Hollow button

...

suhaylmvOP•16mo ago

Still doesn't work

Choo♚𝕂𝕚𝕟𝕘•16mo ago

What exact code did you use?

suhaylmvOP•16mo 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•16mo ago

Have you tried "bg-transparent" rather than "bg-none"?

Choo♚𝕂𝕚𝕟𝕘•16mo ago

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.

suhaylmvOP•16mo ago

Still the same Yeah, I get that, sorry

Choo♚𝕂𝕚𝕟𝕘•16mo ago

No, but I didn't realize it was a link until I saw your code.

Choo♚𝕂𝕚𝕟𝕘•16mo ago

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

ChooKing

CodePen

Hollow Link

...

suhaylmvOP•16mo 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♚𝕂𝕚𝕟𝕘•16mo ago

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.

suhaylmvOP•16mo ago

Okay. Give me half an hour. I'll try to create a minimum replica

suhaylmvOP•16mo 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♚𝕂𝕚𝕟𝕘•16mo ago

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.

suhaylmvOP•16mo 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

suhaylmvOP•16mo ago

Look:

suhaylmvOP•16mo ago

the link text color is correct when it's outside the navbar

Choo♚𝕂𝕚𝕟𝕘•16mo ago

OK. Leave it in. I will look later.

suhaylmvOP•16mo ago

the issue has to be with the navbar ok

Choo♚𝕂𝕚𝕟𝕘•16mo ago

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.

suhaylmvOP•16mo 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

suhaylmvOP•16mo ago

Choo♚𝕂𝕚𝕟𝕘•16mo ago

Add back the fixed class but also put a mix blend mode on the nav.

suhaylmvOP•16mo 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

Gaming

Programming

How to make a button with text which "traspasses" the background?