Y2K Chrome CSS Button

Free25 lines · no JS · light-safe

Open in Studio

Theme

A real <button> carrying .btn-y2k-chrome — the preview is the stylesheet, not a picture of it.

States

default

hover

focus-visible

active

disabled

not declared

.btn-y2k-chrome {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid #8195b5;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #cfd9ea 45%, #97a8c4 50%, #dde6f4 100%);
  color: #23406b;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 8px rgba(70, 90, 120, 0.35);
  transition: filter 0.2s ease;
}
.btn-y2k-chrome:hover {
  filter: brightness(1.05);
}
.btn-y2k-chrome:active {
  filter: brightness(0.92);
}
.btn-y2k-chrome:focus-visible {
  outline: 2px solid #8195b5;
  outline-offset: 3px;
}

Self-contained · MIT · no build step.btn-y2k-chrome

RetroPillShimmer

Implementation notes

About the Y2K Chrome CSS button

Y2K Chrome uses nostalgic visual cues paired with modern interaction states. Its pill silhouette makes the label easy to scan in compact layouts. It is built around a four-stop linear gradient anchored on #cfd9ea with a two-layer shadow. The shimmer details are included in the copy-paste CSS.

Usage

<button class="btn-y2k-chrome">Button</button>

Pair it with the CSS tab above — the class is self-contained.

Before shipping: keep the semantic button element, verify contrast on your actual background and add a visible:focus-visible state. If you retain motion, include a prefers-reduced-motion override.

Built with: HTML + plain CSS
Shape: Pill
Exports: CSS, Tailwind, React
License: MIT · commercial use

Complete the look

Build the interface around this button

We matched its palette, surface, geometry and motion to a complete UI system — like composing an outfit, not browsing unrelated parts.

Style DNA · v1

How matching works →

Pro preview

Modal78% match