← All Examples

Ghost Button Fill Sweep

An outlined button that fills with color from left to right on hover using a pseudo-element.

Published July 15, 2026

Demo

HTML

<button class="ghost-btn">
  <span>Hover me</span>
</button>

CSS

.ghost-btn {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  transition: color .3s;
}

.ghost-btn span { position: relative; z-index: 1; }

.ghost-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform .3s ease;
}

.ghost-btn:hover::before { transform: translateX(0); }
.ghost-btn:hover { color: var(--bg); }

How it works

A ::before pseudo-element is positioned absolutely inside the button with overflow: hidden on the parent. Starting at translateX(-101%) places it completely off-screen to the left. On hover, it transitions to translateX(0) — sweeping the fill across the button. The button text sits in a <span> with position: relative; z-index: 1 so it stays on top of the pseudo-element. Changing text color on hover completes the effect.