<button class="beer-like" data-count="42">
    <svg class="right">
        <use xlink:href="#beer">
    </svg>
    <svg class="left">
        <use xlink:href="#beer">
    </svg>
</button>
        
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 38" id="beer">
        <path d="M27.3442657,10.9323999 L27.3442657,30.4083463 C27.3442657,30.6656011 27.3885964,30.9208753 27.475256,31.1626416 L28.4584173,33.9055044 C28.8690541,35.0511154 28.286502,36.317526 27.1572509,36.7341117 C26.9189371,36.8220268 26.6673082,36.8669997 26.4137272,36.8669997 L8.6936804,36.8669997 C7.49208526,36.8669997 6.51799995,35.8788026 6.51799995,34.6597997 C6.51799995,34.402545 6.56233068,34.1472707 6.64899021,33.9055044 L7.63215163,31.1626416 C7.71881116,30.9208753 7.76314189,30.6656011 7.76314189,30.4083463 L7.76314189,10.9323999"></path>
        <path d="M7.37976466,10.7050955 C4.03739944,7.21236807 7.37976466,4.43127908 9.62402739,4.68029805 C10.9707312,-0.311641291 16.3416716,-0.14115035 17.4789469,4.68029805 C19.1709488,-0.486993238 25.0730464,0.289582317 25.3338664,5.22597205 C29.5557705,3.93166238 30.2108846,9.27699993 27.5781291,10.7050955 L17.4789469,10.7050955 C17.8529907,15.2710317 16.7308593,17.5539999 14.1125529,17.5539999 C11.4942463,17.5539999 10.5591369,15.2710317 11.3072244,10.7050955 L7.37976466,10.7050955 Z"></path>
        <path d="M7.62159994,12.5877999 C-4.64593547,12.5877999 3.03123906,24.2813068 7.62159994,28.5899998 L7.62159994,23.890911 C3.60560163,21.0340593 1.29269476,15.5984013 7.62159994,15.5984013 L7.62159994,12.5877999 Z"></path>
        <line x1="12.3051233" y1="20.3129998" x2="12.3186765" y2="29.1054606"></line>
        <line x1="17.8231233" y1="20.3129998" x2="17.8366765" y2="29.1054606"></line>
        <line x1="23.3411232" y1="16.4503999" x2="23.3546764" y2="29.1054606"></line>
    </symbol>
</svg>
        
<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

.beer-like {
    --primary: #6D58FF;
    --secondary: #362A89;
    --border: #D1D6EE;
    --background: #fff;
    --shadow: #{rgba(#000D58, .1)};
    --shadow-light: #{rgba(#000D58, .05)};
    --color-add: #fff;
    --color-count: #646B8C;
    position: relative;
    outline: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--background);
    box-shadow: 0 1px var(--blur, 4px) var(--shadow-light), 0 2px calc(var(--blur, 4px) * 2) var(--shadow);
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .3s;
    &:hover {
        --blur: 7px;
    }
    &:active {
        --blur: 3px;
    }
    &:before,
    &:after {
        content: var(--content, attr(data-count));
        display: block;
        position: absolute;
        right: 110%;
        top: 50%;
        font-family: inherit;
        text-align: center;
        font-weight: var(--fw, 500);
        color: var(--c, var(--color-count));
        font-size: var(--fs, 14px);
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin: -16px 0 0 0;
    }
    &:after {
        --content: '+1';
        --fw: bold;
        --fs: 12px;
        --c: var(--color-add);
        border-radius: 50%;
        background: var(--primary);
        opacity: 0;
        transform: scale(.5);
    }
    .dot-primary,
    .dot-secondary {
        border-radius: 50%;
        background: #fff;
        box-shadow: inset 0 0 0 1px var(--inner, var(--primary));
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 4px;
    }
    .dot-secondary {
        --inner: var(--secondary);
    }
    svg {
        width: 30px;
        height: 38px;
        display: block;
        fill: #fff;
        z-index: 1;
        stroke: var(--stroke, var(--primary));
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        position: absolute;
        left: 35px;
        top: 31px;
        transform: scaleX(var(--scale-x, 1)) rotate(10deg) translate(var(--x, -11px), var(--y, 4px)) translateZ(0);
        &.right {
            --stroke: var(--secondary);
            --scale-x: -1;
            --y: -4px;
        }
    }
    &.cheer {
        &:after {
            animation: count 1s ease;
        }
        svg {
            animation: cheer 1s ease;
        }
    }
}

@keyframes count {
    15% {
        opacity: 1;
        transform: scale(1.15) translateZ(0);
    }
    25% {
        transform: scale(.95) translateZ(0);
    }
    50% {
        transform: scale(1) translateZ(0);
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateY(-60px) translateZ(0);
    }
}

@keyframes cheer {
    35% {
        transform: scaleX(var(--scale-x, 1)) rotate(16deg) translate(-18px, var(--y, 4px)) translateZ(0);
    }
    55% {
        transform: scaleX(var(--scale-x, 1)) rotate(6deg) translate(-9px, var(--y, 4px)) translateZ(0);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    font-family: 'Inter UI', 'Inter', Arial;
    justify-content: center;
    align-items: center;
    background: #FBFCFF;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
    .twitter {
        position: fixed;
        display: block;
        right: 64px;
        bottom: 14px;
        svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }
    }
}

gsap.registerPlugin(Physics2DPlugin);

document.querySelectorAll('.beer-like').forEach(button => {

    button.addEventListener('click', e => {
        if(!button.classList.contains('cheer')) {

            button.classList.add('cheer');

            setTimeout(() => {
                particles(button, 12, 44, 38, -110, -80)
                button.dataset.count = parseInt(button.dataset.count) + 1;
            }, 500);

            setTimeout(() => button.classList.remove('cheer'), 1000);

        }
    });

});

function particles(parent, quantity, x, y, minAngle, maxAngle) {
    let minSize = 20,
        maxSize = 60;
    for(let i = quantity - 1; i >= 0; i--) {
        let angle = minAngle + Math.random() * (maxAngle - minAngle),
            size = minSize + Math.random() * (maxSize - minSize),
            velocity = 70 + Math.random() * (120 - 80),
            dot = document.createElement('div');
        dot.className = Math.random() >= .5 ? 'dot-primary' : 'dot-secondary';
        parent.appendChild(dot);
        gsap.set(dot, {
            opacity: 1,
            x: x,
            y: y,
            scale: size / 40
        });
        gsap.timeline({
            onComplete() {
                dot.remove();
            }
        }).to(dot, 1.8, {
            physics2D: {
                angle: angle,
                velocity: velocity,
                gravity: 125
            }
        }).to(dot, 1, {
            opacity: 0
        }, .8);
    }
}