Prism Edge Button
A dark glass button with a cyan edge flare on the left, a faint rim and a diagonal light band.
Preview and code
index.html
<button class="pr" type="button"><span>Get started</span></button>
styles.css
.pr{position:relative;padding:17px 34px;border:1px solid rgba(255,255,255,.16);border-left:1px solid #38bdf8;border-radius:14px;background:linear-gradient(135deg,#232326,#0b0b0c 65%);color:#fff;font:600 18px/1 system-ui,sans-serif;cursor:pointer;box-shadow:-8px 0 22px -6px rgba(14,140,255,.75),inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.6);transition:transform .15s ease,box-shadow .2s ease}
.pr::after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);pointer-events:none}
.pr span{position:relative;z-index:1}
.pr:hover{box-shadow:-10px 0 28px -4px rgba(14,160,255,.9),inset 0 1px 0 rgba(255,255,255,.2),0 14px 30px rgba(0,0,0,.6)}
.pr:active{transform:translateY(2px)}
.pr:focus-visible{outline:2px solid #38bdf8;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.pr{transition:none}}About
Made for dark hero sections. The flare is a left border plus a blurred shadow, and the band is a gradient on a pseudo-element. Replace the label with anything.