.btn-flip{position:relative;display:inline-block;text-decoration:none;font-family:Open Sans,inherit;cursor:pointer;outline:none;overflow:hidden;perspective:800px;background:none;font-size:.75rem;width:7rem;height:2rem;padding:.5em 1.5em;border-radius:.75rem}@media (max-width:765px){.btn-flip{font-size:.5rem;width:5.5rem;height:1.7rem;padding:.4em 1em}}.btn-flip:after,.btn-flip:before{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:.25rem;transition:.75s;backface-visibility:hidden;text-transform:uppercase;font-weight:600;letter-spacing:1px}.btn-flip:before{content:attr(data-front);color:var(--foreground);background:var(--muted-foreground-active);transform:translateY(0) rotateX(0);opacity:1}.btn-flip:after{content:attr(data-back);color:var(--background);background:var(--primary);transform:translateY(-50%) rotateX(90deg);opacity:0}.btn-flip:active:after,.btn-flip:hover:after{opacity:1;transform:translateY(0) rotateX(0)}.btn-flip:active:before,.btn-flip:hover:before{opacity:0;transform:translateY(50%) rotateX(90deg)}