Sheen Outline Buttons
Outlined pill buttons with a glowing edge and a light sheen that sweeps across on hover. Three sizes including an icon-only round one.
Preview and code
index.html
<div class="bw"><button class="sb" type="button">Continue <i>↗</i></button><button class="sb s" type="button"><i>✦</i> Generate</button><button class="sb r" type="button"><i>✦</i></button></div>
styles.css
.bw{width:100%;height:100%;min-height:380px;display:flex;align-items:center;justify-content:center;gap:14px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.sb{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:11px 22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.35);color:#fff;font:600 13px system-ui;cursor:pointer;box-shadow:inset 0 0 12px rgba(255,255,255,.08),0 0 14px rgba(255,255,255,.06);transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,border-color .3s}.sb.s{padding:8px 14px;font-size:11px}.sb.r{width:34px;height:34px;padding:0;justify-content:center}.sb:before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s}.sb:hover{transform:scale(1.05);border-color:#fff;box-shadow:inset 0 0 16px rgba(255,255,255,.18),0 0 22px rgba(255,255,255,.18)}.sb:hover:before{left:130%}.sb:active{transform:scale(.96)}.sb i{font-style:normal;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}.sb:hover i{transform:translate(2px,-2px) rotate(8deg)}