SCSS - animated mute button - active / disabled - demo --> https://jsfiddle.net/n6hvfLda/121/

mute-btn.html

<div class="canvas">
    <div id="mute" class="mute-btn">
        <div class="square"></div>
        
        <div class="triangle-container">
            <div class="triangle">
                 <div class="triangle-clone-border"></div>
            </div>
        </div>
        
        <div id="sound-waves" class="sound-waves">
            <div class="wave-1"></div>
            <div class="wave-2"></div>
        </div>
        
        <div id="muted" class="muted">
            <div class="line-one"></div>
            <div class="line-two"></div>
        </div>
    </div>
</div>

mute-btn.js

document.getElementById('mute').onclick = function() {
	var soundWaves = document.getElementById('sound-waves');
    var muted = document.getElementById('muted');
    
    if (soundWaves.classList.contains('fade-left')) {
    	soundWaves.classList.add('fade-right');
        soundWaves.classList.remove('fade-left');
    } else {
    	soundWaves.classList.add('fade-left');
        soundWaves.classList.remove('fade-right');
    }
    
    if (muted.classList.contains('fade-muted-right')) {
    	muted.classList.add('fade-muted-left');
        muted.children[0].classList.add('line-one-rotate-rev');
        muted.children[1].classList.add('line-two-rotate-rev');
        
        muted.children[0].classList.remove('line-one-rotate');
        muted.children[1].classList.remove('line-two-rotate');
        muted.classList.remove('fade-muted-right');
    } else {
    	muted.classList.add('fade-muted-right');
        muted.children[0].classList.add('line-one-rotate');
        muted.children[1].classList.add('line-two-rotate');
        
        muted.children[0].classList.remove('line-one-rotate-rev');
        muted.children[1].classList.remove('line-two-rotate-rev');
        muted.classList.remove('fade-muted-left');
    }
}

mute-btn.scss

.canvas {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    background: black;
    .mute-btn {
        display: flex;
        cursor: pointer;
        position: relative;
        .square {
            background: black;
            border-left: 3px solid #49bce7;
            border-top: 3px solid #49bce7;
            border-bottom: 3px solid #49bce7;
            width: 30px;
            height: 30px;
            box-shadow: 0 2px 0 0 rgba(73, 188, 231, 0.3);
            z-index: 3;
        }
        .triangle-container {
            display: flex;
            justif-content: center;
            align-items: center;
            border-right: 3px solid #49bce7;
            height: 65px;
            margin-top: -15px;
            margin-left: -45px;
            .triangle {
                position: relative;
                background: transparent;
                width: 0;
                height: 0;
                border-right: 30px solid black;
                border-left: 30px solid transparent;
                border-top: 30px solid transparent;
                border-bottom: 30px solid transparent;
                z-index: 1;
                .triangle-clone-border {
                    height: 46px;
                    width: 46px;
                    background: transparent;
                    transform: rotate(45deg);
                    border-left: 3px solid #49bce7;
                    border-bottom: 3px solid #49bce7;
                    position: absolute;
                    left: 6px;
                    top: -24px;
                    z-index: 2;
                }
            }
        }
        .sound-waves {
            display: flex;
            .wave-1 {
                width: 20px;
                height: 36px;
                background: transparent;   
                border-radius: 40%;
                border-right: 5px solid #49bce7;
                 z-index: 0;
            }
            .wave-2 {
                width: 20px;
                height: 36px;
                background: transparent;   
                border-radius: 40%;
                border-right: 5px solid #49bce7;
                z-index: 0;
                margin-left: -10px;
            }
        }
        .fade-left {
             animation: fade-left 1s forwards;
        }
        .fade-right {
             animation: fade-right 1s forwards;
        }
        .muted {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            position: absolute;
            left: 0;
            top: -2px;
            .line-one, .line-two {
                width: 40px;
                height: 4px;
                border-radius: 4px;
                background: #49bce7;
                box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
            }
            .line-one {}
            .line-two {
               margin-top: -4px;
            }
            .line-one-rotate {
                animation: line-one-rotate 1s forwards;
            }
            .line-two-rotate {
                animation: line-two-rotate 1s forwards;
            }
            .line-one-rotate-rev {
                animation: line-one-rotate-rev 1s forwards;
            }
            .line-two-rotate-rev {
                animation: line-two-rotate-rev 1s forwards;
            }
        }
        .fade-muted-right {
             animation: fade-muted-right 1s forwards;
        }
        .fade-muted-left {
             animation: fade-muted-left 1s forwards;
        }
    }
}

@keyframes fade-left {
    0% {
        transform: translateX(0) scale(1, 1);
    }
    100% {
        transform: translateX(-50px) scale(1, 0.7);
    }
}

@keyframes fade-right {
    0% {
        transform: translateX(-50px) scale(1, 0.7);
    }
    50% {
        transform: translateX(-50px) scale(1, 0.7);
    }
    100% {
        transform: translateX(0) scale(1, 1);
    }
}

@keyframes fade-muted-right {
    0% {
        transform: translateX(0) ;
    }
    50% {
        transform: translateX(0) ;
    }
    100% {
        transform: translateX(60px) ;
    }
}

@keyframes fade-muted-left {
    0% {
        transform: translateX(60px) ;
    }
    100% {
        transform: translateX(0) ;
    }
}
// * * * Rotate X lines * * * //
@keyframes line-one-rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}
@keyframes line-two-rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(135deg);
    }
}

// * * * Reverse X Lines* * * //
@keyframes line-one-rotate-rev {
    0% {
        transform: rotate(45deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes line-two-rotate-rev {
    0% {
        transform: rotate(135deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}