.fab {
    --l: 3.5em;
}

.triggerButton {
    display: none;
}

.triggerButton+label {
    cursor: pointer;
    position: fixed;
    right: 15px;
    bottom: 15px;
    background-color: #2d71a1;
    height: var(--l);
    width: var(--l);
    border-radius: 50%;
    z-index: 1000;
    animation: Shake 0.5s linear 20;
}

.triggerButton+label:before,
.triggerButton+label:after {
    position: absolute;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='28' viewBox='0 0 24 24' style='fill: rgb(255,255,255);transform: ;msFilter:;'%3E%3Cpath d='M13 14h3.5c.827 0 1.5-.673 1.5-1.5v-9c0-.827-.673-1.5-1.5-1.5h-13C2.673 2 2 2.673 2 3.5V18l5.333-4H13zm-9-.1.154-.016L4 14v-.1z'%3E%3C/path%3E%3Cpath d='M20.5 8H20v6.001c0 1.1-.893 1.993-1.99 1.999H8v.5c0 .827.673 1.5 1.5 1.5h7.167L22 22V9.5c0-.827-.673-1.5-1.5-1.5z'%3E%3C/path%3E%3C/svg%3E");
    height: calc(var(--l) / 2);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: .5em;
    transition: all .25s;
}


/* 
.triggerButton+label:before {
    height: calc(var(--l) / 2);
    width: .25em;
}
.triggerButton+label:after {
    width: calc(var(--l) / 2);
    height: .25em;
}



} */
.triggerButton:checked+label:before {
    transform: rotatez(360deg);
}

.triggerButton:checked+label:after {
    transform: rotatez(360deg);
}

.one,
.two,
.three {
    cursor: pointer;
    position: fixed;
    right: 1em;
    bottom: 1em;
    padding: 0.5em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    opacity: 0;
    z-index: 999;
    transform: rotateZ(90deg);
    font-size: 1em;
    color: #fff;
    transition-property: all;
    transition-duration: .35s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.triggerButton:checked~.one,
.triggerButton:checked~.two,
.triggerButton:checked~.three {
    opacity: 1;
}

.triggerButton:checked~.one {
    background-color: #106f7e;
    transform: translateX(-5em);
    transition-delay: .2s;
}

.triggerButton:checked~.two {
    background-color: #274685;
    transform: translateX(-3.5em) translateY(-3.5em);
    transition-delay: .1s;
}

.triggerButton:checked~.three {
    background-color: #5380da;
    transform: translateY(-5em);
}

.triggerButton:checked~.one:hover,
.triggerButton:checked~.two:hover,
.triggerButton:checked~.three:hover {
    opacity: .9;
}

@keyframes Shake {
    0% {
        transform: rotate(5deg);
    }

    25% {
        transform: rotate(-6deg);
    }

    50% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-6deg);
    }

    100% {
        transform: rotate(5deg);
    }
}