oNxWdEz

index.html

<button type="button" class="cta">
    <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>
</button>

onxwdez.markdown

oNxWdEz

A Pen by Mark Thomes on CodePen.

License.

script.babel

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

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

style.scss

$duration: 1000ms;

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%;
    opacity: 0;

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

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

.slide-part {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    transition: opacity 250ms linear;
}

.slide-part:last-child .label {
    opacity: 0;
    transition: opacity 250ms linear $duration;
}

.full {
    .slide-part:first-child {
        opacity: 0;
    }

    .slide-part:last-child {
        animation: slideUpAndOver $duration linear;

        .label {
            opacity: 1;
        }
    }

    .icon {
        opacity: 1;
        animation: secondaryBounce $duration linear forwards;
    }
}

@keyframes slideUpAndOver {
    0% {
        transform: translate(-42px, 54px);
    }

    30% {
        transform: translate(-42px, -10px);
    }

    60% {
        transform: translate(-42px, 0);
    }
    
    85% {
        transform: translate(-42px, 0);
    }
    
    100% {
        transform: translate(0, 0);
    }
}

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