<button id="show-snackbar" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" type="button">Show Snackbar</button>
<div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
        <div class="mdl-snackbar__text"></div>
        <button class="mdl-snackbar__action" type="button"></button>
</div>

<script>
        (function(){
            'user strict'
            var snackbarContainer = document.querySelector('#snackbar');
            var showSnackbarButton = document.querySelector('#show-snackbar');
            var handler = function(event){
                showSnackbarButton.style.backgroundColor = '';
            };
            showSnackbarButton.addEventListener('click', function(){
                'user strict'
                showSnackbarButton.style.backgroundColor = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
                var data={
                    message: "Button Color Changed.",
                    timeout: 2000,
                    actionHandler: handler,
                    actionText: "Undo"
                };
                snackbarContainer.MaterialSnackbar.showSnackbar(data);
            });
        }());
</script>