<button class="bookmark">
    <div class="icon">
        <svg viewBox="0 0 36 36">
            <path class="filled" d="M26 6H10V18V30C10 30 17.9746 23.5 18 23.5C18.0254 23.5 26 30 26 30V18V6Z" />
            <path class="default" d="M26 6H10V18V30C10 30 17.9746 23.5 18 23.5C18.0254 23.5 26 30 26 30V18V6Z" />
            <path class="corner" d="M10 6C10 6 14.8758 6 18 6C21.1242 6 26 6 26 6C26 6 26 6 26 6H10C10 6 10 6 10 6Z" />
        </svg>
    </div>
    <span>Bookmark</span>
</button>

<button class="bookmark dark">
    <div class="icon">
        <svg viewBox="0 0 36 36">
            <path class="filled" d="M26 6H10V18V30C10 30 17.9746 23.5 18 23.5C18.0254 23.5 26 30 26 30V18V6Z" />
            <path class="default" d="M26 6H10V18V30C10 30 17.9746 23.5 18 23.5C18.0254 23.5 26 30 26 30V18V6Z" />
            <path class="corner" d="M10 6C10 6 14.8758 6 18 6C21.1242 6 26 6 26 6C26 6 26 6 26 6H10C10 6 10 6 10 6Z" />
        </svg>
    </div>
    <span>Bookmark</span>
</button>

<!-- 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>
.bookmark {
    --background-default: #fff;
    --background-hover: #FAFBFF;
    --text-color: #404660;
    --icon-color-default: #8A91B4;
    --icon-color-active: #F04949;
    --default-position: 32px;
    --default-y: 0px;
    --icon-background-height: 19px;
    --shadow: #{rgba(#001384, .08)};
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    outline: none;
    background: none;
    border: none;
    padding: 2px 18px 2px 5px;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    &.dark {
        --background-default: #1E2235;
        --background-hover: #171827;
        --text-color: #F9FAFF;
        --icon-color-default: #8A91B4;
        --icon-color-active: #F04949;
        --shadow: #{rgba(#001384, .16)};
    }
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 6px;
        backface-visibility: hidden;
        box-shadow: 0 var(--shadow-y, 2px) var(--shadow-blur, 3px) var(--shadow);
        background: var(--background, var(--background-default));
        transform: scale(var(--scale-x, 1), var(--scale-y, 1)) translateZ(0);
        transition: box-shadow .2s, transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background .2s;
    }
    &:active {
        --shadow-y: 1px;
        --shadow-blur: 2px;
        --scale-x: .975;
        --scale-y: .94;
    }
    &:hover {
        --background: var(--background-hover);
    }
    &.marked {
        --icon-color: var(--icon-color-active);
    }
    .icon {
        position: relative;
        z-index: 1;
        transform: scale(.62);
        &:before {
            content: '';
            position: absolute;
            top: 5px;
            left: 9px;
            width: 18px;
            height: 19px;
            border-radius: 1px;
            clip-path: inset(0 -1px var(--icon-background-height) -1px round 1px);
            background: var(--icon-color, var(--icon-color-default));
            transition: background var(--duration, .5s) ease .01s;
        }
        svg {
            display: block;
            width: 36px;
            height: 36px;
            stroke: var(--icon-color, var(--icon-color-default));
            stroke-width: 2px;
            stroke-linejoin: round;
            stroke-linecap: round;
            position: relative;
            z-index: 1;
            transform: translateZ(0);
            clip-path: inset(5px 0 0 0);
            path {
                fill: var(--fill, var(--background, var(--background-default)));
                transition: fill var(--duration, .5s) ease .01s, stroke var(--duration, .5s) ease .01s;
                &.default {
                    --fill: var(--default-fill, var(--background, var(--background-default)));
                    clip-path: circle(var(--default-position) at 50% 100%);
                }
                &.filled {
                    --fill: var(--icon-color, var(--icon-color-default));
                }
                &.default,
                &.filled {
                    transform: translateY(var(--default-y));
                }
            }
        }
    }
    span {
        position: relative;
        z-index: 1;
        display: block;
        margin-left: -2px;
    }
}

.bookmark {
    &.dark {
        --background-default: #1E2235;
        --background-hover: #171827;
        --text-color: #F9FAFF;
        --icon-color-default: #8A91B4;
        --icon-color-active: #F04949;
        --shadow: #{rgba(#001384, .16)};
    }
}

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', Arial;
    justify-content: center;
    align-items: center;
    background: #ECEFFC;
    .bookmark {
        margin: 0 16px;
    }
    .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;
        }
    }
}
View Compiled
gsap.registerPlugin(MorphSVGPlugin)

document.querySelectorAll('.bookmark').forEach(button => {
    button.addEventListener('pointerdown', e => {
        if(!button.classList.contains('marked')) {
            return
        }
        gsap.to(button.querySelectorAll('.default, .filled'), {
            morphSVG: 'M26 6H10V18C10 22.6863 11 28 11 28C11 28 17.5273 19.5 18 19.5C18.4727 19.5 25 28 25 28C25 28 26 22.6863 26 18V6Z',
            duration: .15
        })
    })
    button.addEventListener('click', e => {
        e.preventDefault()

        if(button.classList.contains('animated')) {
            return
        }
        button.classList.add('animated')

        if(button.classList.contains('marked')) {
            button.classList.remove('marked')
            gsap.fromTo(button.querySelectorAll('.default, .filled'), {
                morphSVG: 'M26 6H10V18C10 22.6863 11 28 11 28C11 28 17.5273 19.5 18 19.5C18.4727 19.5 25 28 25 28C25 28 26 22.6863 26 18V6Z',
                duration: .15
            }, {
                keyframes: [ {
                    morphSVG: 'M26 6H10V18C10 22.6863 8 31 8 31C8 31 15.9746 26.5 18 23.5C20.0254 26.5 28 31 28 31C28 31 26 22.6863 26 18V6Z',
                    duration: .15
                }, {
                    morphSVG: 'M26 6H10V18V30C10 30 17.9746 23.5 18 23.5C18.0254 23.5 26 30 26 30V18V6Z',
                    duration: .6,
                    ease: 'elastic.out(1, .7)',
                    onComplete() {
                        button.classList.remove('animated')
                    }
                }]
            })
            gsap.to(button, {
                '--default-position': '24px',
                duration: .2,
                clearProps: true
            })
            return
        }

        gsap.to(button, {
            '--icon-background-height': '0px',
            duration: .125,
            delay: .3
        })
        gsap.to(button, {
            '--default-y': '-28px',
            duration: .4
        })
        gsap.to(button.querySelector('.corner'), {
            keyframes: [{
                morphSVG: 'M10 6C10 6 14.8758 6 18 6C21.1242 6 26 6 26 6C26 6 28 8.5 28 10H8C8 8.5 10 6 10 6Z',
                ease: 'none',
                duration: .125
            }, {
                morphSVG: 'M9.99999 6C9.99999 6 14.8758 6 18 6C21.1242 6 26 6 26 6C26 6 31 10.5 26 14H9.99999C4.99999 10.5 9.99999 6 9.99999 6Z',
                ease: 'none',
                duration: .15
            }, {
                morphSVG: 'M7.99998 16.5C7.99998 16.5 9.87579 22.5 18 22.5C26.1242 22.5 28 16.5 28 16.5C28 16.5 31 20 26 23.5H9.99998C4.99998 20 7.99998 16.5 7.99998 16.5Z',
                ease: 'power1.in',
                duration: .125,
                onComplete() {
                    gsap.set(button.querySelector('.corner'), {
                        '--duration': '0s',
                        fill: 'var(--icon-color, var(--icon-color-default))',
                        delay: .05
                    })
                }
            }, {
                morphSVG: 'M8 28C8 28 12.8758 28.5 18 25.5C23.1242 28.5 28 27.5 28 27.5C28 27.5 26 24 26 23.5H10C10 25 8 28 8 28Z',
                ease: 'none',
                duration: .125,
                onComplete() {
                    gsap.set(button.querySelector('.corner'), {
                        '--duration': '.5s',
                        onComplete() {
                            button.classList.add('marked')
                        }
                    })
                }
            }, {
                morphSVG: 'M10 30C10 30 17.8758 23.5 18 23.5C18.1242 23.5 26 30 26 30C26 30 26 23.5 26 23H10C10 24.5 10 30 10 30Z',
                ease: 'elastic.out(1, .7)',
                duration: .5,
                onComplete() {
                    button.classList.remove('animated')
                    gsap.set(button, {
                        '--default-y': '0px',
                        '--default-position': '0px',
                        '--icon-background-height': '19px'
                    })
                    gsap.set(button.querySelector('.corner'), {
                        morphSVG: 'M10 6C10 6 14.8758 6 18 6C21.1242 6 26 6 26 6C26 6 26 6 26 6H10C10 6 10 6 10 6Z',
                        clearProps: true
                    })
                }
            }]
        })
    })
})

External CSS

  1. https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js