How to change a button text when hovering over it

Dear Community,

I am trying to create a button that changes the text on it, when you hover over it and change it back when the cursor hovers off the button again. 

I have unsuccessfully searched everywhere for a solution and am hoping someone here might have had the same issue and will be able to help!
Thanks in advance 🙂

Hi. can you share link to page where you use button? We can help easier

@tuanphan I have found the following solution, that works well: 

//custom sold button hover//
.sqs-block-button .sqs-block-button-element--medium:before {
   content: "SOLD";
} 
  
.sqs-block-button .sqs-block-button-element--medium:hover::before {    
  content: "sorry"; 
}

//consistent size small button when text change//
.sqs-block-button .sqs-block-button-element--small {
 width: 80%;
 max-width: 290px;
 box-sizing: border-box;
}