How to make input element read only on button click

They all have a read-only attribute you can bind to the same variable (if all need to be set together). You can see that defined in their specifications within documentation.

• lightning-input
• lightning-textarea
• lightning-combobox

<lightning-input 
    value={value}  
    class="slds-p-horizontal--xx-small" 
    variant="label-hidden"
    read-only={inputReadOnly} //set to true within button click handler
></lightning-input>
<lightning-input 
    type="number" 
    name="input7" 
    value={value} 
    class="slds-p-horizontal--xx-small"  
    variant="label-hidden" 
    step="any"
    read-only={inputReadOnly}
></lightning-input>
<lightning-input 
    type="number" value={value} 
    class="slds-p-horizontal--xx-small" 
    variant="label-hidden"
    read-only={inputReadOnly}
></lightning-input>
<lightning-input 
    value={value} 
    type='date' 
    variant="label-hidden" 
    class="slds-p-horizontal--xx-small"
    read-only={inputReadOnly}
></lightning-input>
 <lightning-combobox 
    class="slds-p-horizontal--xx-small"
    options={options} 
    value={value} 
    variant="label-hidden"
    read-only={inputReadOnly}
></lightning-combobox>
<lightning-textarea 
    name={record.id} 
    class="slds-p-horizontal--xx-small" 
    variant="label-hidden"
    read-only={inputReadOnly}
></lightning-textarea>

In your button click handler, set the variable to true to make all inputs read-only.

handleButtonClick(){
    this.inputReadOnly = true;
    //do other things as needed
}