bGpWYRB

bgpwyrb.markdown

bGpWYRB

A Pen by Mark Thomes on CodePen.

License.

index.html

<button type="button" class="cta">
    <span class="slide">
        <span class="slide-part">
            <span class="label">Add to cart</span>
        </span>
        <span class="slide-part">
            <span class="label">1 in cart</span>
            <span class="icon">
                <svg viewBox="0 0 32 27" height="27">
                    <rect x="4" y="4" width="24" height="19" fill="transparent" stroke="white" stroke-width="3" />
                </svg>
            </span>
        </span>
    </span>
</button>

script.babel

const cta = document.querySelector(".cta");

cta.addEventListener("click", () => {
    cta.classList.toggle("full");
});

style.scss

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    background-color: whitesmoke;
}

* {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
}

.cta {
    width: 242px;
    appearance: none;
    background-color: red;
    color: white;
    border: none;
    font-size: 21px;
    height: 54px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 27px;
    position: relative;
    overflow: hidden;

    &:focus {
        outline: none;
    }
}

.cta span {
    white-space: nowrap;
}

.icon {
    margin-left: 6px;
    position: relative;
    transform-origin: 0 100%;

    &::after {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.slide {
    transform: translateY(0);
    transition: transform 250ms cubic-bezier(0.83, 0, 0.17, 1);
}

.slide,
.slide-part {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-part {
    height: 54px;
}

.slide-part:nth-child(2) {
    top: 54px;
}

.full {
    .slide {
        transform: translateY(-100%);
    }

    .icon {
        animation: secondaryBounce 400ms linear forwards 150ms;
    }
}

@keyframes secondaryBounce {
    0% {
        animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
        transform: rotate(0);
    }
    50% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
        transform: rotate(-6deg);
    }
    100% {
        transform: rotate(0);
    }
}