<div class="wrap" style="padding: 100px;">
    <button class="button tada" type="primary">Primary</button>
    <button class="button rubberBand">Default</button>
    <button class="button jello" type="dashed">Dashed</button>
</div>

html,body{
    margin: 0;
    height: 100%;
    display: grid;
    place-content: center;
}
:root{
    --primary-color: royalblue;
}
.button{
    padding: 5px 16px;
    color: #000000d9;
    border: 1px solid #d9d9d9;
    background-color: transparent;
    border-radius: 2px;
    line-height: 1.4;
    box-shadow: 0 2px #00000004;
    cursor: pointer;
    transform: scale(1);
    animation: jump 0s;
    transition: .3s;
}
.button:focus-visible{
    outline: 0;
}
.button[type="primary"]{
    border-color: transparent;
    background-color: var(--primary-color);
    color: #fff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px #0000000b;
}
.button[type="dashed"]{
    border-style: dashed;
}
.button[type="text"]{
    border-color: transparent;
    box-shadow: none;
}
.button:not([type]):hover,
.button[type="dashed"]:hover,
.button[type="dashed"]:focus{
    color: var(--primary-color);
    border-color: currentColor;
}
.button[type="primary"]:hover{
    filter: brightness(1.1);
}
.button[type="text"]:hover,
.button[type="text"]:focus{
    background: rgba(0,0,0,.018);
}
.tada{
  animation: tada 0s;
}
.rubberBand{
  animation: rubberBand 0s;
}
.jello{
  animation: jello 0s;
}
body:hover .button{
    animation-duration: 1s;
}
.button.button:active{
    filter: brightness(.9);
    animation: none;
}
@keyframes tada {
    from {
        transform: scale3d(1, 1, 1)
    }

    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }

    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    30% {
        -webkit-transform: scale3d(1.25,.75,1);
        transform: scale3d(1.25,.75,1)
    }

    40% {
        -webkit-transform: scale3d(.75,1.25,1);
        transform: scale3d(.75,1.25,1)
    }

    50% {
        -webkit-transform: scale3d(1.15,.85,1);
        transform: scale3d(1.15,.85,1)
    }

    65% {
        -webkit-transform: scale3d(.95,1.05,1);
        transform: scale3d(.95,1.05,1)
    }

    75% {
        -webkit-transform: scale3d(1.05,.95,1);
        transform: scale3d(1.05,.95,1)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}
@keyframes jello {
    0%,11.1%,to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}