27 CSS Button Hover Effects 01 / 27

Minimalist Border & Outline Drawing Hover Effects

Four editorial ghost-button techniques on a paper-and-ink palette — an SVG perimeter stroke that draws itself via stroke-dasharray, corner brackets that expand into a full border, a vertical scaleY background wipe, and split borders sliding in from both edges.

Best forcorporate sites, agency portfolios, and minimalist editorial layouts.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="bhe-mbo" aria-label="Minimalist border drawing hover effects demo">
  <div class="bhe-mbo__row">
    <div class="bhe-mbo__cell">
      <a class="bhe-mbo__btn bhe-mbo__draw" tabindex="0">
        <svg viewBox="0 0 200 56" preserveAspectRatio="none" aria-hidden="true"><rect x="1" y="1" width="198" height="54"/></svg>
        Discover
      </a>
      <span class="bhe-mbo__label">Perimeter Draw</span>
    </div>
    <div class="bhe-mbo__cell">
      <button class="bhe-mbo__btn bhe-mbo__corners" type="button">Read More</button>
      <span class="bhe-mbo__label">Corner Expand</span>
    </div>
    <div class="bhe-mbo__cell">
      <button class="bhe-mbo__btn bhe-mbo__wipe" type="button"><span>Get Access</span></button>
      <span class="bhe-mbo__label">Background Wipe</span>
    </div>
    <div class="bhe-mbo__cell">
      <button class="bhe-mbo__btn bhe-mbo__split" type="button"><span>Contact</span></button>
      <span class="bhe-mbo__label">Split Reveal</span>
    </div>
  </div>
</section>
.bhe-mbo {
  --bhe-mbo-bg: #f4f1ea;
  --bhe-mbo-ink: #1a1a1a;
  --bhe-mbo-muted: #6b6b6b;
  --bhe-mbo-line: #1a1a1a;
  --bhe-mbo-accent: #c4452e;

  display: flex; align-items: center; justify-content: center;
  background: var(--bhe-mbo-bg); color: var(--bhe-mbo-ink);
  font-family: 'Georgia', 'Times New Roman', serif;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-mbo *, .bhe-mbo *::before, .bhe-mbo *::after { box-sizing: border-box; }
.bhe-mbo__row { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; }
.bhe-mbo__cell { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.bhe-mbo__label { font-size: 0.7rem; letter-spacing: 0.15em; color: var(--bhe-mbo-muted); text-transform: uppercase; }

.bhe-mbo__btn {
  position: relative;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bhe-mbo-ink);
  background: transparent;
  border: none;
  padding: 1.1rem 2.6rem;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
}

/* 1: SVG perimeter draw */
.bhe-mbo__draw svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--bhe-mbo-ink); stroke-width: 1.5;
}
.bhe-mbo__draw rect {
  stroke-dasharray: 50 350;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.7, 0, 0.2, 1), stroke-dasharray 0.8s cubic-bezier(0.7, 0, 0.2, 1);
}
.bhe-mbo__draw:hover rect { stroke-dasharray: 400 0; stroke-dashoffset: -100; }

/* 2: corners expand to full border */
.bhe-mbo__corners::before,
.bhe-mbo__corners::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  transition: width 0.35s ease, height 0.35s ease;
}
.bhe-mbo__corners::before { top: 0; left: 0; border-top: 1.5px solid var(--bhe-mbo-accent); border-left: 1.5px solid var(--bhe-mbo-accent); }
.bhe-mbo__corners::after  { bottom: 0; right: 0; border-bottom: 1.5px solid var(--bhe-mbo-accent); border-right: 1.5px solid var(--bhe-mbo-accent); }
.bhe-mbo__corners:hover::before,
.bhe-mbo__corners:hover::after { width: 100%; height: 100%; }
.bhe-mbo__corners:hover { color: var(--bhe-mbo-accent); }

/* 3: background wipe up */
.bhe-mbo__wipe { border: 1px solid var(--bhe-mbo-line); z-index: 0; }
.bhe-mbo__wipe::before {
  content: ''; position: absolute; inset: 0; background: var(--bhe-mbo-ink);
  transform: scaleY(0); transform-origin: bottom; z-index: -1;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.bhe-mbo__wipe span { transition: color 0.4s; }
.bhe-mbo__wipe:hover::before { transform: scaleY(1); }
.bhe-mbo__wipe:hover span { color: var(--bhe-mbo-bg); }

/* 4: split border slide */
.bhe-mbo__split span { position: relative; z-index: 2; transition: color 0.4s; }
.bhe-mbo__split::before,
.bhe-mbo__split::after {
  content: ''; position: absolute; top: 0; height: 100%; width: 0;
  background: var(--bhe-mbo-accent); transition: width 0.35s ease;
}
.bhe-mbo__split::before { left: 0; }
.bhe-mbo__split::after  { right: 0; }
.bhe-mbo__split:hover::before,
.bhe-mbo__split:hover::after { width: 50%; }
.bhe-mbo__split:hover span { color: var(--bhe-mbo-bg); }

@media (prefers-reduced-motion: reduce) {
  .bhe-mbo__draw rect, .bhe-mbo__corners::before, .bhe-mbo__corners::after,
  .bhe-mbo__wipe::before, .bhe-mbo__wipe span, .bhe-mbo__split::before, .bhe-mbo__split::after, .bhe-mbo__split span { transition: none; }
}

More from 27 CSS Button Hover Effects

Modern 3D Skeuomorphic Button Press EffectsNeo-Brutalist & Cyberpunk Button Glow EffectsSliding Background Color Wipe Button EffectsLiquid Fill & Organic Morphing Button EffectsKinetic Text Flip & Icon Reveal Button EffectsLiquid FillMagnetic BorderGlitch SliceNeon PulseSplit RevealDiagonal ShutterElastic Lift
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →