.headerButton{--c:#fff;background:linear-gradient(90deg,#0000 33%,#fff5,#0000 67%) var(--_p,100%)/300% no-repeat,#567cdb;color:#0000;border:none;transform:perspective(500px) rotateY(calc(20deg*var(--_i, -1)));text-shadow:calc(var(--_i, -1)* .08em) -.01em 0 var(--c),calc(var(--_i, -1)*-.08em) .01em 2px #0004;outline-offset:.1em;transition:.3s}.headerButton:focus-visible,.headerButton:hover{--_p:0%;--_i:1}.headerButton:active{text-shadow:none;color:var(--c);box-shadow:inset 0 0 9000000000q #0005;transition:0s}.headerButton{font-family:system-ui,sans-serif;font-weight:700;font-size:1rem;margin:0;cursor:pointer;padding:.5em 1.2em;border-radius:.5em}.heroCustomButton{display:flex;justify-content:center;align-items:center;width:190px;height:50px;border-radius:50px;border:1px solid #567cdb;position:relative;overflow:hidden;transition:all .5s ease-in;z-index:1}.heroCustomButton:hover{border:1px solid #8a2be2}.heroCustomButton:after,.heroCustomButton:before{content:"";position:absolute;top:0;width:0;height:100%;transform:skew(15deg);transition:all .5s;overflow:hidden;z-index:-1}.heroCustomButton:before{left:-10px;background:#8327c4}.heroCustomButton:after{right:-10px;background:#8A2BE2}.heroCustomButton:hover:after,.heroCustomButton:hover:before{width:58%}.heroCustomButton:hover span{color:#fff;transition:.3s}.heroCustomButton span{color:#567cdb;font-size:18px;transition:all .3s ease-in}