button{display:flex;justify-content:space-around;align-items:center;gap:1em;padding:1em 0 1em 1em;background-color:white;cursor:pointer;box-shadow:4px 6px 0 black;border:4px solid;border-radius:15px;position:relative;overflow:hidden;z-index:100;transition:box-shadow .25s,transform .25s,filter 50ms;width:100%;max-width:28rem;min-width:0;margin:0 auto;box-sizing:border-box}button:hover{transform:translate(2px,2px);box-shadow:2px 3px 0 black}button:active{filter:saturate(.75)}button:after{content:"";position:absolute;inset:0;background-color:#FF2A00;z-index:-1;transform:translateX(-100%);transition:transform .25s}button:hover:after{transform:translateX(0)}.bgContainer{display:flex;justify-content:start;align-items:center;font-size:2em;font-weight:600;min-width:12ch;padding-left:.5em;padding-right:.5em}.arrowContainer,.bgContainer{position:relative;overflow:hidden}.arrowContainer{padding:1em;margin-inline-end:1em;border:4px solid;border-radius:50%;background-color:#FF2A00;transition:transform .25s,background-color .25s;z-index:100}.arrowContainer:after{content:"";position:absolute;inset:0;border-radius:inherit;background-color:white;transform:translateX(-100%);z-index:-1;transition:transform .25s ease-in-out}button:hover .arrowContainer:after{transform:translateX(0)}button:hover .arrowContainer{transform:translateX(5px)}button:active .arrowContainer{transform:translateX(8px)}.arrowContainer svg{vertical-align:middle}.iconContainer{display:flex;align-items:center;justify-content:center;width:2em;height:2em;min-width:2em;min-height:2em}@media (max-width:640px){button{max-width:100%;min-width:0}.arrowContainer{padding:.75em;margin-inline-end:.5em}.bgContainer{font-size:1.2em;padding-left:.25em;padding-right:.25em}}