.material-button {
    display: inline-block;
    width: 4em;
    height: 4em;
    background-color: black;
    color: rgb(217, 224, 33);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border-radius: 2em;
    overflow: hidden;
    transition: all 0.25s ease;
}

    .material-button:hover {
        box-shadow: 0 0 10px rgba(0,0,0,0.4);
    }

    .material-button:active {
        transform: scale(1.1,1.1);
    }

    .material-button.medium {
        font-size: .5em;
    }

    .material-button.small {
        font-size: .25em;
    }

    .material-button > span {
        display: block;
        position: relative;
        width: 2em;
        height: 2em;
        transition: transform 0.25s ease;
        overflow: hidden;
        margin: 1em;
    }

        .material-button > span > span {
            display: block;
            background-color: rgb(217, 224, 33);
            position: absolute;
            top: 0;
            left: 0;
            width: 2em;
            height: 2em;
            transition: all 0.25s ease;
        }

    .material-button.play > span {
        transform: translate(1em,0) scale(1.6,1);
    }

        .material-button.play > span > span {
            transform: rotate(-45deg) translate(-1em, -1em) scale(1,1);
        }

    .material-button.pause > span > span {
        transform: scale(0.4,1) translate(-1.6em, 0);
    }

        .material-button.pause > span > span.s3 {
            transform: scale(0.4,1) translate(1.6em, 0);
        }

    .material-button.stop > span {
        transform: scale(0.8,0.8);
    }

    .material-button.menu > span > span {
        transform: scale(1,0.2) translate(0,-3em);
    }

        .material-button.menu > span > span.s2 {
            transform: scale(1,0.2) translate(0,0);
        }

        .material-button.menu > span > span.s3 {
            transform: scale(1,0.2) translate(0,3em);
        }

    .material-button.close > span {
        transform: rotate(45deg);
    }

        .material-button.close > span > span, .material-button.plus > span > span {
            transform: scale(1,0.2);
        }

            .material-button.close > span > span.s3, .material-button.plus > span > span.s3 {
                transform: scale(0.2,1);
            }

    .material-button.minus > span > span {
        transform: scale(1,0.2);
    }

    .material-button.more > span > span {
        transform: scale(0.2,0.2) translate(-3em,0);
        border-radius: 2em;
    }

        .material-button.more > span > span.s2 {
            transform: scale(0.2,0.2) translate(0,0);
        }

        .material-button.more > span > span.s3 {
            transform: scale(0.2,0.2) translate(3em,0);
        }

    .material-button.topArrow > span > span {
        width: 0.4em;
        height: 1.8em;
        transform: translate(0.8em,0.2em);
    }

        .material-button.topArrow > span > span.s2 {
            transform-origin: 0 0;
            height: 1.4em;
            transform: translate(1em,0) rotate(45deg);
        }

        .material-button.topArrow > span > span.s3 {
            transform-origin: 100% 0;
            height: 1.4em;
            transform: translate(0.6em,0) rotate(-45deg);
        }

    .material-button.bottomArrow > span > span {
        width: 0.4em;
        height: 1.8em;
        transform: translate(0.8em,0);
    }

        .material-button.bottomArrow > span > span.s2 {
            transform-origin: 100% 100%;
            height: 1.4em;
            transform: translate(0.6em,0.6em) rotate(45deg);
        }

        .material-button.bottomArrow > span > span.s3 {
            transform-origin: 0 100%;
            height: 1.4em;
            transform: translate(1em,0.6em) rotate(-45deg);
        }

    .material-button.rightArrow > span > span {
        width: 1.8em;
        height: 0.4em;
        transform: translate(0,0.8em);
    }

        .material-button.rightArrow > span > span.s2 {
            transform-origin: 100% 0;
            width: 1.4em;
            transform: translate(0.6em,1em) rotate(45deg);
        }

        .material-button.rightArrow > span > span.s3 {
            transform-origin: 100% 100%;
            width: 1.4em;
            transform: translate(0.6em,0.6em) rotate(-45deg);
        }

    .material-button.leftArrow > span > span {
        width: 1.8em;
        height: 0.4em;
        transform: translate(0.2em,0.8em);
    }

        .material-button.leftArrow > span > span.s2 {
            transform-origin: 0 100%;
            width: 1.4em;
            transform: translate(0,0.6em) rotate(45deg);
        }

        .material-button.leftArrow > span > span.s3 {
            transform-origin: 0 0;
            width: 1.4em;
            transform: translate(0,1em) rotate(-45deg);
        }

    .material-button.checked > span > span {
        width: 1em;
        height: 0.4em;
        transform-origin: 100% 100%;
        transform: translate(-0.3em,1.4em) rotate(45deg);
    }

        .material-button.checked > span > span.s3 {
            width: 1.8em;
            transform-origin: 0 100%;
            transform: translate(0.7em,1.4em) rotate(-45deg);
        }