<p>Click the <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></p>

<footer>
    <span class="footer-left"><svg viewBox="0 0 18 18"><path d="M2 13.5h14V12H2v1.5zm0-4h14V8H2v1.5zM2 4v1.5h14V4H2z"/></svg></span>
    
    <div class="add-menu closed">
        <span class="add-btn add-file"><svg viewBox="0 0 18 18"><path d="M13 14c0 2.21-1.79 4-4 4s-4-1.79-4-4V3c0-1.66 1.34-3 3-3s3 1.34 3 3v9c0 1.1-.9 2-2 2s-2-.9-2-2V4h1v8c0 .55.45 1 1 1s1-.45 1-1V3c0-1.1-.9-2-2-2s-2 .9-2 2v11c0 1.66 1.34 3 3 3s3-1.34 3-3V4h1v10z"/></svg></span>
        <span class="add-btn add-list"><svg viewBox="0 0 24 24"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/></svg></span>
        <span class="add-btn open-close"><svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></span>
        <span class="add-btn add-recording"><svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg></span>
        <span class="add-btn add-note"><svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg></span>
    </div>
    
    <span class="footer-right">
        <span><svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></span>
        <span><svg viewBox="0 0 18 18"><path d="M9 5.5c.83 0 1.5-.67 1.5-1.5S9.83 2.5 9 2.5 7.5 3.17 7.5 4 8.17 5.5 9 5.5zm0 2c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S9.83 7.5 9 7.5zm0 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/></svg></span>
    </span>
    
    <div class="footer-bg"></div>
</footer>

@import url('https://fonts.googleapis.com/css?family=Roboto');

* { box-sizing: border-box; }

:root {
    --bg: #F5F5F6;
    --primary: #d81b60;
    --secondary: #4a148c;
    --icon-color: white;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg);
    height: 100vh;
    margin: 0;
}

p {
    font-size: 2em;
    padding-left: 1em;
}
svg {
    width: 1em;
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 1.2em 0.7em;
    user-select: none;
}

.closed ~ .footer-bg::after {
    width: 70px;
}
.footer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    
    &::after {
        content: '';
        position: absolute;
        left: 50%; 
        top: 0px;
        transform: translate(-50%, -85%);
        border-radius: 50px;
        width: 240px;
        height: 150px;
        box-shadow: 0px 0px 0px 2000px var(--primary);
        transition: width 0.3s;
    }
}

.add-menu {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -70%);
    background-color: var(--secondary);
    width: 200px;
    height: 50px;
    border-radius: 99999px;
    
    transition: width 0.3s;
}

footer svg {
    width: 30px;
    cursor: pointer;
    fill: var(--icon-color);
}

.closed .add-btn:not(.open-close) {
    transform-origin: top left;
    transform: scale(0) translate(-50%, -50%);
}
.closed .open-close {
    transform: translate(-50%, -50%) rotate(0deg);
}
.add-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: 0.3s;
}
.add-file {
    transform: scale(1) translate(-300%, -50%);
}
.add-list {
    transform: scale(1) translate(-175%, -50%);
}
.open-close {
    transform: translate(-50%, -50%) rotate(45deg);
}
.add-recording {
    transform: scale(1) translate(75%, -50%);
}
.add-note {
    transform: scale(1) translate(200%, -50%);
}

.add-menu.closed {
    width: 50px;
}

.footer-right {
    float: right;
}

const addBtn = document.querySelector(".add-menu");
addBtn.addEventListener("click", e => {
    addBtn.classList.toggle("closed");
});