Tile hover multi-button

index.pug

.card(style="--background:#3C3B3D; --text:white;")
    div.multi-button
        button.fas.fa-heart
    div.container
.card
    div.multi-button
        button.fas.fa-heart
        button.fas.fa-clipboard
    div.container
.card(style="--background:#EC87C0; --text:white;")
    div.multi-button
        button.fas.fa-heart
        button.fas.fa-comment
        button.fas.fa-share-alt
    div.container
.card(style="--background:#5D9CEC; --text:white;")
    div.multi-button
        button.fas.fa-heart
        button.fas.fa-comment
        button.fas.fa-share-alt
        button.fas.fa-trash
    div.container

playground.json

{
  "scripts": [],
  "styles": [
    "https://pro.fontawesome.com/releases/v5.12.0/css/all.css",
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

style.scss

body {
    display:grid;
    grid-template-columns: repeat( auto-fill, minmax(16rem, 1fr) );
    grid-gap: 5rem;
    padding:5rem;
    background:#F5F7FA;
    .card {
        --background:#FFFFFF;
        --text:black;
        position: relative;
        height:12rem;
        box-shadow:0 0 2rem -1rem rgba(0,0,0,.05);
        .multi-button {
            z-index:0;
            position: absolute;
            top:1.25rem;
            left:1.25rem;
            border-radius:100%;
            width:0rem;
            height:0rem;
            transform: translate(-50%, -50%);
            transition: .25s cubic-bezier(0.25, 0, 0, 1);
            button {
                display: grid;
                place-items: center;
                position: absolute;
                width:2rem;
                height:2rem;
                border:none;
                border-radius:100%;
                background:var(--background);
                color:var(--text);
                transform: translate(-50%, -50%);
                cursor: pointer;
                transition: .25s cubic-bezier(0.25, 0, 0, 1);
                box-shadow:0 0 0rem -.25rem var(--background);
                &:hover {
                    background:var(--text);
                    color:var(--background);
                    box-shadow:0 0 1rem -.25rem var(--background);
                }
                &:first-child:nth-last-child(1),
                &:first-child:nth-last-child(1) ~ * { //If there is 1 child
                    &:nth-child(1) {
                        left:25%;
                        top:25%;
                    }
                }
                &:first-child:nth-last-child(2),
                &:first-child:nth-last-child(2) ~ * { //If there are 2 children
                    &:nth-child(1) {
                        left:37.5%;
                        top:18.75%;
                    }
                    &:nth-child(2) {
                        left:18.75%;
                        top:37.5%;
                    }
                }
                &:first-child:nth-last-child(3),
                &:first-child:nth-last-child(3) ~ * { //If there are 3 children
                    &:nth-child(1) {
                        left:50%;
                        top:15.625%;
                    }
                    &:nth-child(2) {
                        left:25%;
                        top:25%;
                    }
                    &:nth-child(3) {
                        left:15.625%;
                        top:50%;
                    }
                }
                &:first-child:nth-last-child(4),
                &:first-child:nth-last-child(4) ~ * { //If there are 4 children
                    &:nth-child(1) {
                        left:62.5%;
                        top:18.75%;
                    }
                    &:nth-child(2) {
                        left:37.5%;
                        top:18.75%;
                    }
                    &:nth-child(3) {
                        left:18.75%;
                        top:37.5%;
                    }
                    &:nth-child(4) {
                        left:18.75%;
                        top:62.5%;
                    }
                }
            }
        }
        .container {
            position: absolute;
            width:100%;
            height:100%;
            border-radius:1rem;
            background:var(--background);
            color:var(--text);
        }
        &:hover .multi-button, .multi-button:focus-within { //Hover or a button inside is focused
            width:10rem;
            height:10rem;
        }
    }
}