.mystery-button{position:relative;display:inline-block;cursor:pointer;outline:none;vertical-align:middle;text-decoration:none;font-weight:600;color:var(--button-text);text-transform:uppercase;padding:1.25em 2em;background:var(--light-main-color);border:2px solid var(--button-border);border-radius:50%;transform-style:preserve-3d;transition:transform .15s ease-out,background .15s ease-out;&:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;right:0;bottom:0;background:var(--dark-main-color);border-radius:inherit;box-shadow:0 0 0 2px var(--button-border),0 .625em 0 0 var(--button-shadow);transform:translate3d(0,.75em,-1em);transition:transform .15s ease-out,box-shadow .15s ease-out}&:focus,&:hover{background:var(--main-text-color);text-decoration:underline;&:before{background:var(--main-text-color)}}&:active{background:#cd5b5b;transform:translateY(.75em);&:before{box-shadow:0 0 0 2px var(--button-border),0 0 var(--button-shadow);transform:translateZ(-1em);background:#cd5b5b}}}