Button Lab · Visual Playground

01 — Fill Effects

Sliding Fill

A hidden color layer waits off to the left. On hover, it slides across — the text color also switches so it reads against the new fill. Uses ::before + transform: translateX.

::before + translateX FILL

Hover me Learn more

<a href="#" class="btn btn-slide">Hover me</a>

.btn-slide {
  background: transparent;
  color: #ec4899;
  border: 2px solid #ec4899;
  border-radius: 8px;
  padding: 14px 32px;
  position: relative;
  overflow: hidden;            /* hides the sliding layer */
  transition: color .3s ease;
}
/* Hidden fill layer waiting off to the left */
.btn-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ec4899;
  transform: translateX(-100%);
  transition: transform .35s ease;
  z-index: -1;
}
.btn-slide:hover { color: #fff; }
.btn-slide:hover::before { transform: translateX(0); }

02 — Fill Effects

Liquid Fill Up

A darker layer rises from the bottom of the button like water filling a glass. The cubic-bezier easing gives it a subtle acceleration.

::before + top 100% → 0 FILL

Fill me up

<a href="#" class="btn btn-liquid">Fill me up</a>

.btn-liquid {
  background: #0ea5e9;
  color: #fff;
  border-radius: 8px;
  padding: 14px 32px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
/* Start below the button, rise up on hover */
.btn-liquid::before {
  content: '';
  position: absolute;
  top: 100%;     /* below the visible area */
  left: 0;
  width: 100%; height: 100%;
  background: #0f172a;
  transition: top .4s cubic-bezier(.4,0,.2,1);
  z-index: -1;
}
.btn-liquid:hover::before { top: 0; }

03 — Fill Effects

Outline → Solid

A ghost/outline button that fills with a solid color on hover — the simplest and most reliable pattern. Works great as a secondary call-to-action.

background transition only FILL

Secondary

<a href="#" class="btn btn-outline">Secondary</a>

.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;     /* pill shape */
  padding: 12px 32px;
  transition: background .3s ease, color .3s ease;
}
.btn-outline:hover {
  background: #fff;
  color: #0f172a;
}

04 — 3D / Depth

3D Press

A chunky button with a darker base underneath. Lifts up on hover, presses down on click — like a real key. Great for game UIs or playful brands.

box-shadow offset + translateY 3D

Click me

<a href="#" class="btn btn-press">Click me</a>

.btn-press {
  background: #ec4899;
  color: #fff;
  border-radius: 10px;
  padding: 14px 32px;
  box-shadow:
    0 6px 0 #831843,             /* darker base beneath */
    0 10px 20px rgba(0,0,0,.3);
  transform: translateY(0);
  transition: transform .15s, box-shadow .15s;
}
.btn-press:hover {
  transform: translateY(-3px);   /* lift up */
  box-shadow:
    0 9px 0 #831843,
    0 16px 28px rgba(0,0,0,.35);
}
.btn-press:active {
  transform: translateY(3px);    /* press down */
  box-shadow:
    0 2px 0 #831843,
    0 4px 12px rgba(0,0,0,.2);
}

05 — 3D / Depth

3D Extrude

A flat button with a hard offset shadow — pure brutalist / neo-retro style. On hover it lifts up and left; on click it slides back into its shadow.

hard box-shadow offset + translate 3D

Press here

<a href="#" class="btn btn-extrude">Press here</a>

.btn-extrude {
  background: #fcd34d;
  color: #0f172a;
  border-radius: 8px;
  padding: 14px 32px;
  box-shadow: 6px 6px 0 #0f172a;     /* HARD shadow (no blur) */
  transition: all .15s ease;
}
.btn-extrude:hover {
  transform: translate(-3px,-3px);   /* lift up & left */
  box-shadow: 9px 9px 0 #0f172a;     /* shadow grows */
}
.btn-extrude:active {
  transform: translate(3px,3px);     /* press into shadow */
  box-shadow: 2px 2px 0 #0f172a;
}

06 — 3D / Depth

Neumorphic

Soft "embossed" buttons that look like they're made of the same material as the background. Uses paired light and dark shadows. On hover, shadows invert inside the button, making it look pressed.

dual light + dark box-shadow 3D

Hover me

<a href="#" class="btn btn-neu">Hover me</a>

<!-- Neumorphism needs a soft background (not pure white) -->
<body style="background:#e5e7eb">

.btn-neu {
  background: #e5e7eb;       /* SAME as body background */
  color: #1e293b;
  border-radius: 14px;
  padding: 14px 32px;
  box-shadow:
    8px 8px 16px rgba(148,163,184,.6),    /* bottom-right shadow */
    -8px -8px 16px rgba(255,255,255,.9);  /* top-left highlight */
  transition: box-shadow .3s ease;
}
/* Pressed: shadows go INSIDE */
.btn-neu:hover {
  box-shadow:
    inset 6px 6px 12px rgba(148,163,184,.5),
    inset -6px -6px 12px rgba(255,255,255,.9);
}

07 — Text / Icon

Text Flip

Two text layers stacked on top of each other — the front one slides up and the back one slides in from below. Great for showing a primary label and an action ("Learn more" → "Go →").

two spans + translateY swap TEXT

Learn more Let’s go →

<a href="#" class="btn btn-flip">
  <span class="txt front">Learn more</span>
  <span class="txt back">Let's go →</span>
</a>

.btn-flip {
  background: #1e293b;
  color: #fff;
  border-radius: 8px;
  padding: 14px 32px;
  position: relative;
  overflow: hidden;
}
.btn-flip .txt {
  display: block;
  transition: transform .35s cubic-bezier(.7,0,.3,1);
}
/* Second text layer sits hidden below the button */
.btn-flip .txt.back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  background: #ec4899;
}
/* On hover: front exits up, back slides in */
.btn-flip:hover .txt.front { transform: translateY(-100%); }
.btn-flip:hover .txt.back  { transform: translateY(0); }

08 — Text / Icon

Icon Slide

A hidden arrow icon reveals itself on hover, nudging the text apart. Uses max-width + opacity on the icon so the button width animates smoothly.

max-width animation + gap TEXT

Continue→

<a href="#" class="btn btn-icon">
  Continue
  <span class="icn">→</span>
</a>

.btn-icon {
  background: #10b981;
  color: #fff;
  border-radius: 999px;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 0;                    /* no gap at rest */
  transition: gap .3s ease;
}
/* Hide the icon with zero width */
.btn-icon .icn {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width .35s ease, opacity .2s ease;
}
.btn-icon:hover { gap: 10px; }
.btn-icon:hover .icn {
  max-width: 24px;
  opacity: 1;
}

09 — Text / Icon

Underline Reveal

A minimal text-only button with an animated underline that draws in from the left. Perfect for quiet, text-forward designs.

::after + scaleX + transform-origin TEXT

Read the article

<a href="#" class="btn btn-underline">Read the article</a>

.btn-underline {
  background: transparent;
  color: #fff;
  padding: 10px 0;
  font-weight: 700;
  letter-spacing: .05em;
  position: relative;
}
/* The underline — hidden by scaleX(0) */
.btn-underline::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ec4899;
  transform: scaleX(0);
  transform-origin: left;    /* grows from the left */
  transition: transform .35s ease;
}
.btn-underline:hover::after {
  transform: scaleX(1);      /* grows to full width */
}

10 — Shape / Gradient

Morph Shape

The border-radius property animates to different values on each corner, morphing the button from a rectangle into an organic blob.

animated border-radius corners SHAPE

Morph me

<a href="#" class="btn btn-morph">Morph me</a>

.btn-morph {
  background: #8b5cf6;
  color: #fff;
  border-radius: 10px;             /* normal shape */
  padding: 14px 32px;
  transition: border-radius .6s ease, background .3s ease;
}
/* Each corner gets a different radius — asymmetric blob */
.btn-morph:hover {
  background: #a78bfa;
  border-radius: 40px 6px 40px 6px;
}

11 — Shape / Gradient

Gradient Motion

A multi-stop gradient that's twice as wide as the button. On hover, it slides to reveal the other end. The second button uses a @keyframes loop so the gradient flows continuously.

background-size 200% + background-position GRADIENT

Hover for motion Always animated

<a href="#" class="btn btn-grad">Hover for motion</a>
<a href="#" class="btn btn-grad-anim">Always animated</a>

/* On-hover gradient shift */
.btn-grad {
  color: #fff;
  border-radius: 10px;
  padding: 14px 32px;
  background: linear-gradient(90deg,#ec4899,#8b5cf6,#0ea5e9);
  background-size: 200% 100%;       /* canvas is wider than visible */
  background-position: 0% 50%;      /* start at the left */
  transition: background-position .6s ease;
}
.btn-grad:hover {
  background-position: 100% 50%;    /* slide to the right */
}

/* Always-animated version */
.btn-grad-anim {
  color: #fff;
  border-radius: 10px;
  padding: 14px 32px;
  background: linear-gradient(90deg,#ec4899,#8b5cf6,#0ea5e9,#8b5cf6,#ec4899);
  background-size: 300% 100%;
  animation: gradShift 4s linear infinite;
}
@keyframes gradShift {
  0%   { background-position: 0%   50%; }
  100% { background-position: 300% 50%; }
}

12 — Shape / Gradient

Glass Morphism

A frosted-glass button that blurs whatever is behind it. Needs a colorful background to really show — backdrop-filter: blur() does the work. Blur increases and the button lifts slightly on hover.

backdrop-filter: blur + semi-transparent bg GLASS

Hover me Another one

<!-- Glass buttons need a colorful background to be visible -->
<div class="glass-bg">
  <a href="#" class="btn btn-glass">Hover me</a>
</div>

.btn-glass {
  color: #fff;
  border-radius: 12px;
  padding: 14px 32px;
  background: rgba(255,255,255,.1);            /* semi-transparent */
  backdrop-filter: blur(10px);                 /* THE magic line */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  transition: all .3s ease;
}
.btn-glass:hover {
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

/* A colorful backdrop so the blur has something to blur */
.glass-bg {
  background:
    radial-gradient(circle at 20% 30%, #ec4899 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, #0ea5e9 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, #8b5cf6 0%, transparent 45%),
    #1e1e2e;
}