.btn-flip{position:relative;display:inline-block;min-width:8.75rem;font-size:1rem;height:3rem;text-decoration:none;font-family:Open Sans,inherit;cursor:pointer;outline:none;border-radius:.75rem;overflow:hidden;perspective:800px}.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)}