Liquid Glass Focus Mode Buttons

<div class="liquid-focus-stage">

  <button class="liquid-focus-btn deep-focus" type="button">
    <span class="liquid-focus-icon">◎</span>
    <span class="liquid-focus-text">Deep Focus</span>
  </button>

  <button class="liquid-focus-btn creative-flow" type="button">
    <span class="liquid-focus-icon">✦</span>
    <span class="liquid-focus-text">Creative Flow</span>
  </button>

  <button class="liquid-focus-btn chill-mode" type="button">
    <span class="liquid-focus-icon">☾</span>
    <span class="liquid-focus-text">Chill Mode</span>
  </button>

</div>

.liquid-focus-stage{
  position:relative;
  width:430px;
  height:300px;
}

.liquid-focus-btn{
  --accent:34,211,238;

  position:absolute;
  width:310px;
  height:82px;

  display:flex;
  align-items:center;
  padding:0 30px;

  border:1px solid #26354a;
  border-radius:44px;

  background:linear-gradient(
    180deg,
    #111c2d 0%,
    #0b1525 48%,
    #07101d 100%
  );

  color:#eaf2ff;
  font-size:16px;
  font-weight:700;

  cursor:pointer;
  outline:none;

  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.12),
    inset 0 -5px 10px rgba(0,0,0,.24),
    0 10px 18px rgba(0,0,0,.38),
    0 18px 30px rgba(0,0,0,.22);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    color .25s ease;
}

.liquid-focus-btn::before{
  content:"";
  position:absolute;
  top:2px;
  left:8px;
  right:8px;
  height:42%;

  border-radius:40px;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.015)
  );

  pointer-events:none;
}

.liquid-focus-btn::after{
  content:"";
  position:absolute;

  left:22px;
  right:22px;
  bottom:-13px;

  height:18px;
  border-radius:50%;

  background:rgba(var(--accent),.35);

  filter:blur(15px);
  opacity:0;

  z-index:-1;
  pointer-events:none;

  transition:opacity .25s ease;
}

.liquid-focus-icon{
  position:relative;
  z-index:2;

  width:28px;
  height:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:none;
  margin-right:17px;

  color:#94a3b8;
  font-size:27px;
  line-height:1;

  transition:
    color .25s ease,
    filter .25s ease;
}

.liquid-focus-text{
  position:relative;
  z-index:2;
  white-space:nowrap;
}

.liquid-focus-btn.deep-focus{
  --accent:34,211,238;
}

.liquid-focus-btn.creative-flow{
  --accent:139,92,246;
}

.liquid-focus-btn.chill-mode{
  --accent:236,72,153;
}

.liquid-focus-btn:nth-child(1){
  top:15px;
  left:25px;
  transform:rotate(-6deg);
  z-index:1;
}

.liquid-focus-btn:nth-child(2){
  top:105px;
  left:60px;
  transform:rotate(-6deg);
  z-index:2;
}

.liquid-focus-btn:nth-child(3){
  top:195px;
  left:95px;
  transform:rotate(-6deg);
  z-index:1;
}

.liquid-focus-btn:hover,
.liquid-focus-btn.selected{
  z-index:5;

  color:#ffffff;
  border-color:rgba(var(--accent),.95);

  background:linear-gradient(
    180deg,
    rgba(var(--accent),.92) 0%,
    rgba(var(--accent),.68) 48%,
    rgba(var(--accent),.42) 100%
  );

  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.30),
    inset 0 -6px 12px rgba(0,0,0,.18),
    0 12px 22px rgba(0,0,0,.38),
    0 0 20px rgba(var(--accent),.45),
    0 0 38px rgba(var(--accent),.20);
}

.liquid-focus-btn:hover::after,
.liquid-focus-btn.selected::after{
  opacity:1;
}

.liquid-focus-btn:hover .liquid-focus-icon,
.liquid-focus-btn.selected .liquid-focus-icon{
  color:#ffffff;
  filter:drop-shadow(
    0 0 5px rgba(255,255,255,.35)
  );
}

.liquid-focus-btn:nth-child(1):hover,
.liquid-focus-btn:nth-child(2):hover,
.liquid-focus-btn:nth-child(3):hover{
  transform:
    rotate(-6deg)
    translateY(-6px)
    scale(1.025);
}

.liquid-focus-btn:active{
  transform:
    rotate(-6deg)
    translateY(-2px)
    scale(.985);
}

@media(max-width:600px){

  .liquid-focus-stage{
    width:330px;
    height:270px;
  }

  .liquid-focus-btn{
    width:250px;
    height:70px;
    padding:0 22px;
    font-size:14px;
  }

  .liquid-focus-btn:nth-child(1){
    top:15px;
    left:10px;
  }

  .liquid-focus-btn:nth-child(2){
    top:92px;
    left:38px;
  }

  .liquid-focus-btn:nth-child(3){
    top:169px;
    left:66px;
  }

  .liquid-focus-icon{
    width:24px;
    height:24px;
    margin-right:14px;
    font-size:23px;
  }
}

const focusButtons =
  document.querySelectorAll('.liquid-focus-btn');

focusButtons.forEach(function(button) {

  button.addEventListener('click', function() {

    focusButtons.forEach(function(item) {
      item.classList.remove('selected');
    });

    button.classList.add('selected');

  });

});

How These Liquid Glass Focus Mode Buttons Work

The Liquid Glass Focus Mode Buttons component presents three stacked choices: Deep Focus, Creative Flow, and Chill Mode. Each button contains a small symbol and a text label, while separate classes assign cyan, purple, and pink accent colors. The buttons are placed inside a relatively positioned 430px by 300px stage, which gives the component a fixed area for its overlapping layout.

Each button uses absolute positioning and measures 310px by 82px on larger screens. The three buttons are offset with different top and left values and share a rotate(-6deg) transform. This creates the diagonal stacked arrangement without requiring extra wrapper elements for each row. Different z-index values control how the buttons overlap, while the active or hovered button moves to z-index: 5 so it appears above the others.

The glass-like appearance comes mainly from layered gradients, borders, shadows, and pseudo-elements. The default background is a dark vertical gradient running from #111c2d to #07101d. Multiple inset and outer box-shadow values provide highlights, depth, and separation from the background. The ::before pseudo-element covers the upper 42% of each button with a subtle white gradient, creating the reflective highlight across the surface.

Each button defines its own --accent custom property. Deep Focus uses cyan, Creative Flow uses purple, and Chill Mode uses pink. On hover or when the selected class is present, that accent value is reused for the border, background gradient, glow, and the blurred ::after element beneath the button. This keeps the interaction styling consistent while allowing each option to have a different color.

Hovering also moves the button upward by 6px and scales it to 1.025. Pressing it reduces the movement and scales the button to .985, giving the control a clear pressed state. These changes use 0.25-second transitions for transforms, colors, backgrounds, borders, and shadows. For more detail about this mechanism, see the MDN CSS transitions documentation.

JavaScript turns the visual controls into a single-selection group. It selects every .liquid-focus-btn element and attaches a click listener to each one. Whenever a button is clicked, the script first removes selected from all three buttons and then adds it to the clicked button. As a result, only one focus mode remains visually selected at a time.

The component also includes a breakpoint at 600px. On smaller screens, the stage becomes 330px wide, buttons shrink to 250px by 70px, and their positions, padding, typography, and icon dimensions are adjusted to preserve the staggered arrangement.

Customizing These Liquid Glass Focus Mode Buttons

Most of the appearance can be changed directly through the existing CSS values without altering the component’s selection logic.

• Change --accent on .deep-focus, .creative-flow, and .chill-mode to give each mode a different highlight color.
• Adjust the 310px width, 82px height, and 44px border radius to change the overall button proportions.
• Edit the dark background gradient colors to match a different interface theme.
• Change the top and left values on the three nth-child() rules to increase or reduce the staggered spacing.
• Modify rotate(-6deg) if you want the stack to appear flatter or more angled.
• Adjust translateY(-6px) and scale(1.025) to control how strongly a button responds on hover.
• Change the .25s transition durations to make state changes faster or slower.
• Modify the ::after blur, opacity, and accent-based background to control the colored glow.
• Update the 600px media query values if the smaller layout should activate at a different viewport width.

Where to Use These Liquid Glass Focus Mode Buttons

This component works best when users need to choose one option from a small group and the selected state should remain clearly visible.

• Focus or productivity mode selectors
• Music and audio mood controls
• Creative application mode switches
• Dashboard preference panels
• Meditation or relaxation mode selectors
• Game mode selection screens
• Theme or experience selectors

Because the JavaScript removes the previous selected class before applying a new one, the interaction naturally suits mutually exclusive choices. If you need another button interaction based more heavily on pointer movement, the Magnetic Hover Button is a related CodeRipple component worth considering.

Frequently Asked Questions

Do these Liquid Glass Focus Mode Buttons use JavaScript?

Yes. JavaScript adds a click event listener to every button. When one is clicked, the selected class is removed from all buttons and added to the clicked control.

How does the selected button keep its accent color?

Each button has a different --accent CSS custom property. The .selected styles use rgba(var(--accent), ...) for the border, gradient, glow, and other visual effects.

What creates the glass-like highlight on the buttons?

The effect combines a dark gradient, inset shadows, rounded borders, and a ::before pseudo-element containing a subtle white gradient over the upper portion of the button.

Are the buttons responsive on mobile screens?

Yes. A max-width: 600px media query reduces the stage and button dimensions, adjusts their positions, decreases padding and font size, and makes the icons smaller.

The Liquid Glass Focus Mode Buttons combine CSS gradients, pseudo-elements, shadows, transforms, and a small JavaScript selection handler to create a compact three-option interface with persistent visual feedback.