.fancy-button{all:unset;display:flex;align-items:center;position:relative;padding:.6em 2em;border:.15em solid #fff;border-radius:.25em;color:#fff;font-size:1.5em;font-weight:600;cursor:pointer;overflow:hidden;transition:border .3s,color .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fancy-button p{z-index:1}.fancy-button:hover{color:#000}.fancy-button:active{border-color:#888}.fancy-button:after,.fancy-button:before{content:"";position:absolute;width:9em;aspect-ratio:1;background:hsla(0,0%,100%,.5);border-radius:50%;transition:transform .5s,background .3s}.fancy-button:before{left:0;transform:translateX(-8em)}.fancy-button:after{right:0;transform:translateX(8em)}.fancy-button:hover:before{transform:translateX(-1em)}.fancy-button:hover:after{transform:translateX(1em)}.fancy-button:active:after,.fancy-button:active:before{background:#888}@media (max-width:600px){.fancy-button{padding:.4em 1.2em;font-size:1.2em}.fancy-button:after,.fancy-button:before{width:7em}.fancy-button:before{transform:translateX(-6em)}.fancy-button:after{transform:translateX(6em)}.fancy-button:hover:before{transform:translateX(-.5em)}.fancy-button:hover:after{transform:translateX(.5em)}}