22 CSS Transition Effects 01 / 22

Button Hover Transitions

Nine polished button hover effects: fill sweep, slide-up, neon glow, rotate icon, border draw, 3D depth, ripple ring, shimmer and split wipe.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="trn-01">
  <div class="trn-01__title">
    <h1>Button Hover Transitions</h1>
    <p>9 production-ready CSS transition hover effects — hover each button</p>
  </div>
  <div class="trn-01__grid">
    <div>
      <button class="btn btn-fill"><span>Fill Sweep</span></button>
      <span class="btn-label">Fill sweep</span>
    </div>
    <div>
      <button class="btn btn-slide" data-text="Slide Up"><span>Slide Up</span></button>
      <span class="btn-label">Slide up</span>
    </div>
    <div>
      <button class="btn btn-glow">Neon Glow</button>
      <span class="btn-label">Neon glow</span>
    </div>
    <div>
      <button class="btn btn-rotate"><span class="icon">⚙</span> <span>Rotate</span></button>
      <span class="btn-label">Rotate icon</span>
    </div>
    <div>
      <button class="btn btn-draw">
        <span>Border Draw</span>
        <span class="top"></span><span class="bot"></span>
        <span class="lft"></span><span class="rgt"></span>
      </button>
      <span class="btn-label">Border draw</span>
    </div>
    <div>
      <button class="btn btn-depth">3D Push</button>
      <span class="btn-label">3D depth</span>
    </div>
    <div>
      <button class="btn btn-ripple">Ripple Ring</button>
      <span class="btn-label">Ripple ring</span>
    </div>
    <div>
      <button class="btn btn-shimmer"><span>Shimmer</span></button>
      <span class="btn-label">Shimmer</span>
    </div>
    <div>
      <button class="btn btn-split"><span>Split Wipe</span></button>
      <span class="btn-label">Split wipe</span>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#0a0a0f;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.trn-01{width:100%;max-width:900px}
.trn-01__title{text-align:center;margin-bottom:48px}
.trn-01__title h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;color:#fff;letter-spacing:-.03em;margin-bottom:8px}
.trn-01__title p{color:#666;font-size:1rem}
.trn-01__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}

/* BASE */
.btn{font-family:'Inter';font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:16px 32px;border:none;cursor:pointer;border-radius:4px;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}

/* 1 — Fill sweep left-to-right */
.btn-fill{background:transparent;color:#6c63ff;border:2px solid #6c63ff;transition:color .35s ease}
.btn-fill::before{content:'';position:absolute;inset:0;background:#6c63ff;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.btn-fill:hover::before{transform:scaleX(1)}
.btn-fill span{position:relative;z-index:1}
.btn-fill:hover{color:#fff}

/* 2 — Slide up reveal */
.btn-slide{background:#ff3c78;color:#fff;transition:transform .3s ease,box-shadow .3s ease}
.btn-slide::after{content:attr(data-text);position:absolute;inset:0;background:#ff3c78;display:flex;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .3s cubic-bezier(.7,0,.2,1)}
.btn-slide:hover{box-shadow:0 20px 40px rgba(255,60,120,.4)}
.btn-slide:hover::after{transform:translateY(0)}
.btn-slide:hover span{transform:translateY(-100%)}
.btn-slide span{display:inline-block;transition:transform .3s cubic-bezier(.7,0,.2,1)}

/* 3 — Neon glow pulse */
.btn-glow{background:#0d1117;color:#00ffcc;border:2px solid #00ffcc;transition:box-shadow .4s ease,background .4s ease,color .4s ease}
.btn-glow:hover{background:#00ffcc;color:#0d1117;box-shadow:0 0 20px #00ffcc,0 0 60px rgba(0,255,204,.4),inset 0 0 20px rgba(0,255,204,.1)}

/* 4 — Rotate icon */
.btn-rotate{background:#f59e0b;color:#1c1003;transition:background .3s,box-shadow .3s}
.btn-rotate .icon{display:inline-block;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.btn-rotate:hover .icon{transform:rotate(180deg)}
.btn-rotate:hover{background:#fbbf24;box-shadow:0 12px 30px rgba(245,158,11,.4)}

/* 5 — Border draw */
.btn-draw{background:transparent;color:#e879f9;font-weight:700}
.btn-draw::before,.btn-draw::after{content:'';position:absolute;width:0;height:2px;background:#e879f9;transition:width .3s ease}
.btn-draw .top,.btn-draw .bot{position:absolute;left:0;right:0;height:2px;background:#e879f9;transform:scaleX(0);transition:transform .3s ease}
.btn-draw .top{top:0;transform-origin:right}
.btn-draw .bot{bottom:0;transform-origin:left}
.btn-draw .lft,.btn-draw .rgt{position:absolute;top:0;bottom:0;width:2px;background:#e879f9;transform:scaleY(0);transition:transform .3s .3s ease}
.btn-draw .lft{left:0;transform-origin:bottom}
.btn-draw .rgt{right:0;transform-origin:top}
.btn-draw:hover .top{transform:scaleX(1);transform-origin:left}
.btn-draw:hover .bot{transform:scaleX(1);transform-origin:right}
.btn-draw:hover .lft{transform:scaleY(1)}
.btn-draw:hover .rgt{transform:scaleY(1)}
.btn-draw span{position:relative;z-index:1}

/* 6 — 3D push depth */
.btn-depth{background:#3b82f6;color:#fff;box-shadow:0 6px 0 #1d4ed8,0 8px 16px rgba(59,130,246,.3);transition:transform .1s,box-shadow .1s}
.btn-depth:hover{transform:translateY(3px);box-shadow:0 3px 0 #1d4ed8,0 4px 8px rgba(59,130,246,.3)}
.btn-depth:active{transform:translateY(6px);box-shadow:0 0 0 #1d4ed8,0 2px 6px rgba(59,130,246,.2)}

/* 7 — Magnetic ripple */
.btn-ripple{background:#10b981;color:#fff;transition:background .3s,box-shadow .3s}
.btn-ripple:hover{background:#059669;box-shadow:0 0 0 8px rgba(16,185,129,.15),0 0 0 16px rgba(16,185,129,.08)}

/* 8 — Text scramble shimmer */
.btn-shimmer{background:linear-gradient(135deg,#1e1b4b,#312e81);color:#c7d2fe;border:1px solid rgba(199,210,254,.2);overflow:hidden}
.btn-shimmer::before{content:'';position:absolute;top:-50%;left:-150%;width:60%;height:200%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.15),transparent);transform:skewX(-15deg);transition:left .6s ease}
.btn-shimmer:hover::before{left:150%}
.btn-shimmer span{position:relative;z-index:1}

/* 9 — Split diagonal wipe */
.btn-split{background:transparent;color:#f97316;border:2px solid #f97316;overflow:hidden}
.btn-split::before,.btn-split::after{content:'';position:absolute;inset:0;background:#f97316;transform:scaleX(0);transition:transform .3s cubic-bezier(.7,0,.2,1)}
.btn-split::before{transform-origin:right;clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}
.btn-split::after{transform-origin:left;clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}
.btn-split:hover::before,.btn-split:hover::after{transform:scaleX(1)}
.btn-split:hover{color:#fff}
.btn-split span{position:relative;z-index:1;transition:color .3s}

/* labels */
.btn-label{display:block;text-align:center;margin-top:8px;font-size:.68rem;color:#555;letter-spacing:.1em;text-transform:uppercase}

@media(max-width:600px){.trn-01__grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.btn,.btn::before,.btn::after,.btn *{transition:none !important}}

More from 22 CSS Transition Effects

Flip Card 3D TransitionText Reveal AnimationImage Zoom Hover TransitionBackground Color TransitionBorder Animation TransitionNavigation Hover TransitionUnderline Animation HoverGlassmorphism Hover TransitionSlide-In Animation on ScrollFade In Fade Out TransitionLoading Skeleton TransitionModal Open Close Transition
View the full collection →

Search CodeFronts

Loading…

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