Mix-blend-mode Fixed Button Using CSS

This CSS code snippet helps you to create a mix-blen-mode fixed button. The button’s striking appearance is achieved through a carefully crafted, providing a distinctive look that stands out against the background. It is positioned at the bottom, offers a clear call-to-action for users.

The code ensures a smooth transition effect when hovered, enhancing user interaction. Additionally, the typography and layout styling contribute to an overall modern and polished design.

How to Create Mix-blend-mode Fixed Button Using CSS

1. First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Create the necessary HTML structure. Inside the <main> tag, include a <section> with an <h1> for a header, followed by a series of <img> tags to showcase your content. Finally, add the “Order now” button using the <button> element.

<main>
  <section>
    <h1>Scroll</h1>
  </section>
  <img src="https://picsum.photos/1280/720?random=1" alt="">
  <img src="https://picsum.photos/1280/720?random=2" alt="">
  <img src="https://picsum.photos/1280/720?random=3" alt="">
  <img src="https://picsum.photos/1280/720?random=4" alt="">
  <img src="https://picsum.photos/1280/720?random=5" alt="">
  <img src="https://picsum.photos/1280/720?random=6" alt="">
  <img src="https://picsum.photos/1280/720?random=7" alt="">
  <img src="https://picsum.photos/1280/720?random=8" alt="">
  <img src="https://picsum.photos/1280/720?random=9" alt="">
  <img src="https://picsum.photos/1280/720?random=10" alt="">
  <button>
    Order now
  </button>
</main>

3. Add the CSS code to create the stylish fixed button. This includes styling for the body, button position, font, and the unique mix-blend-mode effect.

@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}


* {
  box-sizing: border-box;
}

body {
  background: hsl(0 0% 98%);
  font-family: "Geist Sans", sans-serif;
  overflow-x: hidden;
}

button {
  position: fixed;
  bottom: 3rem;
  left: 50%;
  translate: -50% 0;
  font-size: 1.5rem;
  font-family: "Geist Sans", sans-serif;
  font-weight: 80;
  padding: 1rem 4rem;
  border-radius: 6px;
  border: 0;
  mix-blend-mode: difference;
  transition: filter 0.2s;
  background: white;
  color: black;
}

button::before {
  content: "Order now";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  mix-blend-mode: none;
}

button::after {
  content: "";
  left: 8%;
  right: 8%;
  height: 12%;
  top: 130%;
  background: white;
  position: absolute;
  border-radius: 100px;
  mix-blend-mode: difference;
}

button:is(:hover, :focus-visible) {
  filter: brightness(0.5);
}

h1 {
  font-weight: 120;
  background: linear-gradient(hsl(0 0% 10%), hsl(0 0% 60%));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

section {
  height: 100vh;
  display: grid;
  place-items: center;
  font-size: clamp(2rem, 4vw + 1rem, 8rem);
}

main {
  display: grid;
  gap: 8rem;
  justify-items: center;
  padding-bottom: 50vh;
}

img {
  height: 50vh;
}

img:nth-of-type(even) {
  translate: -25% 0;
}

img:nth-of-type(odd) {
  translate: 25% 0;
}

Customize the code to match your website’s theme and content. Test the button’s appearance and behavior, ensuring that it aligns with your design preferences.

That’s all! hopefully, you have successfully created a Mix-blend-mode Fixed Button Using CSS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.