Save btn status display

HTML

<button class="btn btn-default btn-save" onClick="save()">
  <span class="glyphicon glyphicon-floppy-disk"></span>
</button>


<button class="btn btn-default btn-unsave" onClick="unsave()">
  <span class="glyphicon glyphicon-floppy-disk"></span>
</button>

CSS

body {
  margin: 30px;
}
.btn-save .text,.btn-unsave .text{
  font-family:'Century Gothic';
  padding:4px;
  font-weight:bold;
}
.green{color:green;}
.red{color:red;}
.bold{font-weight:bold;}

JavaScript

function save() {
	grayout();
  setTimeout(saving, 1000);
  setTimeout(removefloppy, 3000);
  setTimeout(savefloppy, 3000);
  setTimeout(saved, 3000);
};
function unsave() {
	ungrayout();
  setTimeout(unsaving, 1000);
  setTimeout(unremovefloppy, 3000);
  setTimeout(unsavefloppy, 3000);
  setTimeout(unsaved, 3000);
};


function grayout(){
	$('.btn-save').addClass('disabled');
}
function saving(){
	$('.btn-save span').html('<span class="text">&nbsp;Saving...</span>');
}
function removefloppy(){
	$('.btn-save span').removeClass('glyphicon-floppy-disk');
}
function saved(){
	$('.btn-save span').html('<span class="text">&nbsp;Saved</span>');
}
function savefloppy(){
	$('.btn-save span').addClass('glyphicon-floppy-saved green bold');
}
/////////////////////////////////////////////////////////////////////////////////////
function ungrayout(){
	$('.btn-unsave').addClass('disabled');
}
function unsaving(){
	$('.btn-unsave span').html('<span class="text">&nbsp;Saving...</span>');
}
function unremovefloppy(){
	$('.btn-unsave span').removeClass('glyphicon-floppy-disk');
}
function unsaved(){
	$('.btn-unsave span').html('<span class="text">&nbsp;Not Saved</span>');
}
function unsavefloppy(){
	$('.btn-unsave span').addClass('glyphicon-floppy-remove red bold');
}