27 CSS Button Hover Effects 04 / 27

Sliding Background Color Wipe Button Effects

Conversion-optimized fills that reveal contrasting text on hover — left-to-right slide, diagonal skewed wipe, center scaleX expand, and an upward gradient wave.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<section class="bhe-sbg" aria-label="Sliding background color wipe button effects demo">
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__ltr"    type="button"><span>Get Started</span></button><span class="bhe-sbg__label">Slide Right</span></div>
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__diag"   type="button"><span>Buy Now</span></button><span class="bhe-sbg__label">Diagonal Wipe</span></div>
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__center" type="button"><span>Subscribe</span></button><span class="bhe-sbg__label">Center Expand</span></div>
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__wave"   type="button"><span>Join Free</span></button><span class="bhe-sbg__label">Gradient Wave</span></div>
</section>

<section class="bhe-sbg" aria-label="Sliding background color wipe button effects demo">
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__ltr"    type="button"><span>Get Started</span></button><span class="bhe-sbg__label">Slide Right</span></div>
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__diag"   type="button"><span>Buy Now</span></button><span class="bhe-sbg__label">Diagonal Wipe</span></div>
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__center" type="button"><span>Subscribe</span></button><span class="bhe-sbg__label">Center Expand</span></div>
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__wave"   type="button"><span>Join Free</span></button><span class="bhe-sbg__label">Gradient Wave</span></div>
</section>

.bhe-sbg {
  --bhe-sbg-bg: #fafaf7;
  --bhe-sbg-ink: #14110f;
  --bhe-sbg-muted: #8a857e;
  --bhe-sbg-c1: #ff5e3a;
  --bhe-sbg-c2: #1d3557;
  --bhe-sbg-c3: #06b6a4;
  --bhe-sbg-c4-a: #7c3aed;
  --bhe-sbg-c4-b: #ec4899;

  background: var(--bhe-sbg-bg); color: var(--bhe-sbg-ink);
  font-family: 'Verdana', 'Helvetica Neue', sans-serif;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-sbg *, .bhe-sbg *::before, .bhe-sbg *::after { box-sizing: border-box; }
.bhe-sbg__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-sbg__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-sbg-muted); text-transform: uppercase; }

.bhe-sbg__btn {
  position: relative; font-family: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer; border: 2px solid currentColor; padding: 1rem 2.6rem;
  overflow: hidden; background: transparent; letter-spacing: 0.04em;
}
.bhe-sbg__btn span { position: relative; z-index: 2; transition: color 0.4s ease; }
.bhe-sbg__btn::before { content: ''; position: absolute; inset: 0; z-index: 1; }

/* 1: slide left to right */
.bhe-sbg__ltr { color: var(--bhe-sbg-c1); }
.bhe-sbg__ltr::before { background: var(--bhe-sbg-c1); transform: translateX(-100%); transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-sbg__ltr:hover::before { transform: translateX(0); }
.bhe-sbg__ltr:hover span { color: var(--bhe-sbg-bg); }

/* 2: diagonal skewed wipe */
.bhe-sbg__diag { color: var(--bhe-sbg-c2); }
.bhe-sbg__diag::before { background: var(--bhe-sbg-c2); transform: translateX(-120%) skewX(-20deg); width: 130%; left: -15%; transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-sbg__diag:hover::before { transform: translateX(0) skewX(-20deg); }
.bhe-sbg__diag:hover span { color: var(--bhe-sbg-bg); }

/* 3: scaleX center expand */
.bhe-sbg__center { color: var(--bhe-sbg-c3); }
.bhe-sbg__center::before { background: var(--bhe-sbg-c3); transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-sbg__center:hover::before { transform: scaleX(1); }
.bhe-sbg__center:hover span { color: var(--bhe-sbg-bg); }

/* 4: gradient wave slide up */
.bhe-sbg__wave { color: var(--bhe-sbg-ink); border-color: var(--bhe-sbg-c4-a); }
.bhe-sbg__wave::before {
  background: linear-gradient(120deg, var(--bhe-sbg-c4-a), var(--bhe-sbg-c4-b));
  transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
.bhe-sbg__wave:hover::before { transform: translateY(0); }
.bhe-sbg__wave:hover span { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .bhe-sbg__btn::before, .bhe-sbg__btn span { transition: none; }
}

.bhe-sbg {
  --bhe-sbg-bg: #fafaf7;
  --bhe-sbg-ink: #14110f;
  --bhe-sbg-muted: #8a857e;
  --bhe-sbg-c1: #ff5e3a;
  --bhe-sbg-c2: #1d3557;
  --bhe-sbg-c3: #06b6a4;
  --bhe-sbg-c4-a: #7c3aed;
  --bhe-sbg-c4-b: #ec4899;

  background: var(--bhe-sbg-bg); color: var(--bhe-sbg-ink);
  font-family: 'Verdana', 'Helvetica Neue', sans-serif;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-sbg *, .bhe-sbg *::before, .bhe-sbg *::after { box-sizing: border-box; }
.bhe-sbg__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-sbg__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-sbg-muted); text-transform: uppercase; }

.bhe-sbg__btn {
  position: relative; font-family: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer; border: 2px solid currentColor; padding: 1rem 2.6rem;
  overflow: hidden; background: transparent; letter-spacing: 0.04em;
}
.bhe-sbg__btn span { position: relative; z-index: 2; transition: color 0.4s ease; }
.bhe-sbg__btn::before { content: ''; position: absolute; inset: 0; z-index: 1; }

/* 1: slide left to right */
.bhe-sbg__ltr { color: var(--bhe-sbg-c1); }
.bhe-sbg__ltr::before { background: var(--bhe-sbg-c1); transform: translateX(-100%); transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-sbg__ltr:hover::before { transform: translateX(0); }
.bhe-sbg__ltr:hover span { color: var(--bhe-sbg-bg); }

/* 2: diagonal skewed wipe */
.bhe-sbg__diag { color: var(--bhe-sbg-c2); }
.bhe-sbg__diag::before { background: var(--bhe-sbg-c2); transform: translateX(-120%) skewX(-20deg); width: 130%; left: -15%; transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-sbg__diag:hover::before { transform: translateX(0) skewX(-20deg); }
.bhe-sbg__diag:hover span { color: var(--bhe-sbg-bg); }

/* 3: scaleX center expand */
.bhe-sbg__center { color: var(--bhe-sbg-c3); }
.bhe-sbg__center::before { background: var(--bhe-sbg-c3); transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-sbg__center:hover::before { transform: scaleX(1); }
.bhe-sbg__center:hover span { color: var(--bhe-sbg-bg); }

/* 4: gradient wave slide up */
.bhe-sbg__wave { color: var(--bhe-sbg-ink); border-color: var(--bhe-sbg-c4-a); }
.bhe-sbg__wave::before {
  background: linear-gradient(120deg, var(--bhe-sbg-c4-a), var(--bhe-sbg-c4-b));
  transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
.bhe-sbg__wave:hover::before { transform: translateY(0); }
.bhe-sbg__wave:hover span { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .bhe-sbg__btn::before, .bhe-sbg__btn span { transition: none; }
}

More from 27 CSS Button Hover Effects

Sunburst Expand 3D Press Typewriter Retype Ripple Wave Cursor Spotlight Minimalist Border & Outline Drawing Hover Effects Modern 3D Skeuomorphic Button Press Effects Neo-Brutalist & Cyberpunk Button Glow Effects Liquid Fill & Organic Morphing Button Effects Kinetic Text Flip & Icon Reveal Button Effects Liquid Fill Magnetic Border

View the full collection →