<!--
  This visualforce page shows how to blur all buttons while a record is getting updated. It shows
  two buttons :- Save and Cancel. When the account name is modified and Save is clicked, then both
  the Save and Cancel buttons are blurred till the account gets updated. Browse for this page using
  https://ap5.salesforce.com/apex/vfBlurButton?id=0017F0000057kcj
  where 0017F0000057kcj is the id of any account record and vfBlurButton is the name with which this
  VF page is saved.
-->
<apex:page controller="AccountController" sidebar="true" id="page1">

  <apex:outputpanel id="errorPanel1">
    <apex:pageMessages id="errorMessages1"/>
  </apex:outputpanel>
  
  <script type="text/javascript">
    function disableAllButtonsJS()
    {
        var savingButtonObj = document.getElementById('page1:form1:pageBlock1:idPageBlockButtons:savingBtnId');
        // Make the Saving... button visible till the record is being saved using style.display='block'
        savingButtonObj.style.display ='block';

        var saveButtonObj = document.getElementById('page1:form1:pageBlock1:idPageBlockButtons:saveBtnId');
        // Make the Save button invisible till the record is being saved using style.display='none'
        saveButtonObj.style.display ='none';

        var cancelButtonObj = document.getElementById('page1:form1:pageBlock1:idPageBlockButtons:idCancel');
        cancelButtonObj.style.display ='none';

        var cancelDisabledButtonObj = document.getElementById('page1:form1:pageBlock1:idPageBlockButtons:cancelDisabledBtnId');
        // Make the disabled Cancel button visible till the record is being saved using style.display='block'
        cancelDisabledButtonObj.style.display ='block';

        afSave();
    }
  </script>

  <apex:form id="form1">
    <apex:actionFunction name="afSave" action="{!save}"/>
    <apex:pageBlock id="pageBlock1">                
      <apex:pageBlockButtons location="top" id="idPageBlockButtons">
        <div id="container" style="width:100%">                   
          <div id="left" style="float:left;width:6%;">
            <apex:commandButton onclick="disableAllButtonsJS();" value="Save" 
               rerender="errorPanel1" style="display:block" id="saveBtnId"/>
          </div>

          <div id="middle" style="float:left;width:15%;">                       
            <apex:outputPanel style="display:none" id="savingBtnId">
              <apex:image value="/img/loading32.gif" style="height: 15px;"/>
              <apex:commandButton value="Saving..." disabled="true"/>
            </apex:outputPanel>
          </div>
                    
          <div id="right" style="float:left;width:50%;">
            <apex:commandButton id="idCancel" value="Cancel" action="{!cancel}" style="display:block"/>
            <apex:commandButton value="Cancel" disabled="true" style="display:none" id="cancelDisabledBtnId"/>
          </div>                   
        </div>
      </apex:pageBlockButtons>
      <apex:outputLabel value="Name of account: "/>
      <apex:inputField value="{!a.Name}"/>
    </apex:pageBlock>  
  </apex:form>
</apex:page>

The controller class :-
public class AccountController
{
    public Account a {get;set;}
    
    public AccountController()
    {
        a = [Select Id, Name from Account where id = :ApexPages.currentPage().getParameters().get('id')];
    }
    
    public pageReference save()
    {
        update a;
        return null;
    }
    
    public pageReference cancel()
    {
        a = [Select Id, Name from Account where id = :ApexPages.currentPage().getParameters().get('id')];
        return null;
    }
}