Edit button style for animated hover button

Hello,

I have used the below CSS code (bottom of this post) previously on a website to style and animate the hover on a button.

The hover is working okay, however I can't seem to get the styling right. There are a couple of issues:

1. The font needs to be custom (I have custom CSS fonts on the site currently)

2. The static style of the button should have a line as per the below example:

...then on hover it should animate a new colour like the below:

This is what my website is currently looking like (the line is not appearing prior to hover):

....what it currently looks like on hover:

3. I would like the button text to sit left aligned to the line. Because the website copy is left aligned, it looks odd as centred.

BELOW is the code I currently have:

/*CUSTOM BUTTON STYLES*/

.sqs-block-button-element {
  position: relative !important;   
  height: 50px !important;          
  text-align: left !important;     
  transition: 0.6s !important;     
  padding: 0px !important;      
  -webkit-transition: 0.6s !important; 
}  

.sqs-block-button-element {     
  background-color: transparent !important;     
  border: 2px solid #transparent !important;     
  color: #a29772 !important; 
}  

.sqs-block-button-element:hover:before {     
  transition-delay: .3s !important; 
}  
.sqs-block-button-element:before {     
  width: 0% !important;     
  height: 100% !important;     
  z-index: 2 !important;     
  content: '' !important;    
  position: absolute !important;     
  bottom: 2px !important;    
  left: 0 !important;    
  box-sizing: border-box !important;    
  transition: .3s !important; 
}  

.sqs-block-button-element:hover:before {     
  width: 100% !important;     
  transition: .5s !important; } 

.sqs-block-button-element:before {     
  border-bottom: 1.5px solid #a29772 !important; 
}

Would very much appreciate any help!