.nb-stretchy-button {
    perspective: 10000px;

    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    width: fit-content;

    --elastic-ease-out: linear( 0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1 );
    --transform-ease: cubic-bezier(.59, 1, .88, 1.01);
    --bounce-cubic-ease: cubic-bezier(.34, 2.27, .64, 1);
}
.nb-stretchy-button__container {
    transform-style: preserve-3d;
    display: grid;
    transition: rotate var(--stretch-duration) var(--transform-ease), transform var(--stretch-duration) var(--transform-ease);
}
.nb-stretchy-button__bg {
    grid-area: 1 / 1;
    display: grid;
    transition: scale calc(var(--stretch-duration) * 0.6) var(--transform-ease), transform calc(var(--stretch-duration) * 0.6) var(--transform-ease);
}
.nb-stretchy-button__inner {
    z-index: 1;
    -webkit-clip-path: inset(7.5% 0%);
    clip-path: inset(7.5% 0%);
    grid-area: 1 / 1;
    grid-template-columns: auto 1fr;
    align-items: center;
    display: grid;
}
.nb-stretchy-button__inner::after {
    content: attr(data-text);
    display: block;
    grid-area: 1 / 2 / 1 / 2;
    translate: 0 200% 0;
    transition: scale calc(var(--stretch-duration) * 0.6) var(--transform-ease), translate calc(var(--stretch-duration) * 0.6) var(--transform-ease), transform calc(var(--stretch-duration) * 0.6) var(--transform-ease);
    transform-origin: bottom center;
}
.nb-stretchy-button__text {
    grid-area: 1 / 2 / 1 / 2;
}
.nb-stretchy-button__text {
    transition: scale calc(var(--stretch-duration) * 0.6) var(--transform-ease), translate calc(var(--stretch-duration) * 0.6) var(--transform-ease), transform calc(var(--stretch-duration) * 0.6) var(--transform-ease);
    transform-origin: bottom center;
}
@media (hover: hover) and (pointer: fine) {
	.nb-stretchy-button:is(:hover, :focus-visible) .nb-stretchy-button__container {
        rotate: x var(--stretch-amount);
        transform: rotateX(calc(var(--stretch-amount) * -1));
        transition: rotate var(--stretch-duration) var(--transform-ease), transform calc(var(--stretch-duration) * 1.6) var(--stretch-duration) var(--bounce-cubic-ease);
    }
    .nb-stretchy-button:is(:hover, :focus-visible) .nb-stretchy-button__text {
        scale: 1 var(--stretch-text);
        transform: scaleY(calc(1/var(--stretch-text)));
        translate: 0 -200% 0;
        transition: scale calc(var(--stretch-duration) * 0.8) var(--transform-ease), translate calc(var(--stretch-duration) * 1.4) calc(var(--stretch-duration) * 0.8) var(--bounce-cubic-ease), transform calc(var(--stretch-duration) * 1.4) calc(var(--stretch-duration) * 0.8) var(--bounce-cubic-ease);
    }
    
    .nb-stretchy-button:is(:hover, :focus-visible) .nb-stretchy-button__inner::after {
        scale: 1 var(--stretch-text);
        transform: scaleY(calc(1/var(--stretch-text)));
        translate: 0 0 0;
        transition: scale calc(var(--stretch-duration) * 0.8) calc(var(--stretch-duration) * 0.8) var(--transform-ease), translate calc(var(--stretch-duration) * 1.4) calc(var(--stretch-duration) * 1.6) var(--bounce-cubic-ease), transform calc(var(--stretch-duration) * 1.4) calc(var(--stretch-duration) * 1.6) var(--bounce-cubic-ease);
    }
}