.animated-btn{--theme-color:#ff8c00;--s:10px;--animation-timing:0.3s;--pad:2px;font-family:DM Mono,monospace;letter-spacing:.08em;text-transform:uppercase;position:relative;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#fff;border:1px solid hsla(0,0%,100%,.2);padding:10px 16px;font-size:16px;display:inline-flex;align-items:center;background:linear-gradient(90deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,.2));transition:background var(--animation-timing) ease,border var(--animation-timing) ease}.animated-btn span{font-weight:700;font-size:18px;margin-left:8px;transition:color var(--animation-timing) ease}.animated-btn:before{content:"";position:absolute;box-sizing:border-box;inset:calc(-1 * var(--pad));padding:var(--pad);border:2px solid #fff;background:transparent content-box;-webkit-mask:conic-gradient(#000 0 0) content-box,conic-gradient(at var(--s) var(--s),#0000 75%,#000 0) 0 0 /calc(100% - var(--s)) calc(100% - var(--s));mask:conic-gradient(#000 0 0) content-box,conic-gradient(at var(--s) var(--s),#0000 75%,#000 0) 0 0 /calc(100% - var(--s)) calc(100% - var(--s));pointer-events:none;transition:inset var(--animation-timing) ease,padding var(--animation-timing) ease,border-color var(--animation-timing) ease;will-change:inset,padding}.animated-btn:hover{border-color:var(--theme-color);background:linear-gradient(to right,color(from var(--theme-color) srgb r g b/5%),color(from var(--theme-color) srgb r g b/20%));--pad:8px}.animated-btn:hover span{color:var(--theme-color)}.animated-btn:hover:before{border-color:var(--theme-color)}