luminomorphism/dist/luminomorph.button.min.css

A UI design system built around light, blur, ambient motion and perceptual feedback.

@keyframes ripple{to{width:300px;height:300px;opacity:0}}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}.l-button,.luminomorph-button{position:relative;padding:12px 24px;color:#fff;overflow:hidden;cursor:pointer}.l-button{font-size:1rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:8px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s,box-shadow .3s}.l-button:hover{background:rgba(255,255,255,.2);box-shadow:0 0 15px rgba(173,216,230,.4)}.l-button:active::after{content:"";top:var(--y);left:var(--x);transform:translate(-50%,-50%);width:0;height:0;background:rgba(255,255,255,.4);animation:ripple .6s linear}.luminomorph-button{border:0;border-radius:12px;background:rgba(255,255,255,.07);font-weight:700;letter-spacing:.5px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 15px rgba(0,255,255,.3);transition:box-shadow .3s,transform .2s}.luminomorph-button:hover{box-shadow:0 0 25px rgba(0,255,255,.6);transform:scale(1.02)}.l-button:active::after,.luminomorph-button .ripple{position:absolute;border-radius:50%;pointer-events:none}.luminomorph-button .ripple{background:rgba(255,255,255,.3);transform:scale(0);animation:ripple-animation .6s linear}