.button {
min-width: 100%;
height: auto;
margin: 0px;
padding: 0px;
font-size: 14px;
cursor: pointer;
overflow: hidden;
box-shadow: none;
outline: 1px solid #1e1e1e !important;
border: 1px solid #FFFFFF !important;
background: #1E1E1E;
--background: #0989FF;
--text: #0989FF;
--cart: #FFFFFF;
--tick: #0989FF;
position: relative;
transform: scale(var(--scale, 1));
transition: background-color .3s cubic-bezier(.4,0,0,1);
}

.button:active {
--scale: .95;
border: 2px solid #000000;
}

.button .btn-body {
width: 100%;
height: 40px;
transform: translateX(var(--span-y, 0));
transition: transform 0.7s ease;
color: #FFFFFF;
background-image: linear-gradient(to top, #001c34, #001b35, #001a35, #001936, #001836, #001836, #001836, #001836, #001936, #001a35, #001b35, #001c34);
display: flex;
}

.button .btn-body .fas {
width: 38px;
height: 40px;
line-height: 38px;
font-size: 15px;
color: #FFFFFF;
background: #1e1e1e;
border-right: 1px solid #BBBBBB;
}

.button .btn-body p {
width: 83%;
height: 40px;
line-height: 38px;
float: right;
}

.button .cart {
position: absolute;
top: 43%;
left: 50%;
margin: -13px 0 0 -18px;
transform-origin: 12px 23px;
transform: translateX(-350px) rotate(-18deg);
}


.button .cart:before, .button .cart:after {
content: "";
position: absolute;
}

.button .cart:before {
width: 6px;
height: 6px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--cart);
top: 22px;
left: 9px;
filter: drop-shadow(11px 0 0 var(--cart));
}

.button .cart:after {
width: 16px;
height: 9px;
background: var(--cart);
top: 10px;
left: 9px;
transform-origin: 50% 100%;
transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0));
transition: transform 1.2s ease var(--fill-d);
}

.button .cart svg {
z-index: 1;
width: 36px;
height: 26px;
display: block;
position: absolute;
top: 1px;
left: 0px;
bottom: 0px;
fill: none;
stroke: var(--cart);
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}

.button .cart svg polyline:last-child {
stroke: var(--tick);
stroke-dasharray: 10px;
stroke-dashoffset: var(--offset, 10px);
transition: stroke-dashoffset 0.4s ease var(--offset-d);
}

.button.loading {
--span-y: 105%;
--icon-r: 180deg;
--fill: 1;
--fill-d: .8s;
--offset: 0;
--offset-d: 1.73s;
}

.button.loading .cart {
-webkit-animation: cart 3.4s linear forwards 0.2s;
animation: cart 3.4s linear forwards 0.2s;
}

@-webkit-keyframes cart {
12.5% {
transform: translateX(-60px) rotate(-18deg);
}

25%, 45%, 55%, 75% {
transform: none;
}

50% {
transform: scale(0.9);
}

44%, 56% {
transform-origin: 12px 23px;
}

45%, 55% {
transform-origin: 50% 50%;
}

87.5% {
transform: translateX(0px) rotate(-18deg);
}

100% {
transform: translateX(500px) rotate(-18deg);
}

}

@keyframes cart {
12.5% {
transform: translateX(-60px) rotate(-18deg);
}

25%, 45%, 55%, 75% {
transform: none;
}

50% {
transform: scale(1.1);
}

44%, 56% {
transform-origin: 12px 23px;
}

45%, 55% {
transform-origin: 50% 50%;
}

87.5% {
transform: translateX(70px) rotate(-18deg);
}

100% {
transform: translateX(500px) rotate(-18deg);
}

}