Center arrow vertically on mobile buttons

Hello everyone, 

I’ve customized the buttons by adding the arrow, but I can’t get it centered vertically. On desktop it looks fine, but I’ve noticed that the smaller the resolution, the lower the arrow goes. 
 

Can you please help me with this? 
 

I’ve tried playing with the margin or padding, but didn’t work. 
 

The website url is www.karinaklaus.com, password hello

Try this to Website Tools > Custom CSS

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element {
    display: flex;
    align-items: center;
}
a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:after {
    margin-left: 5px;
}

I tried the code tuanphan provided and added a 4px bottom padding which pushed the arrow up. It is not perfect, but it looks ok

.sqs-block-button-element:after {
    content: '⟶';
  margin: 0px 0px 0px 0px;
  padding:  0px 0px 4px 0px;
}
a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element {
    display: flex;
    align-items: center;
}
a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:after {
    margin-left: 5px;
}

The only button I'm still having issues with is the the form button on the contact page

I tried using this code:

button.form-submit-button {
    display: flex;
    align-items: center;}

button.form-submit-button .form-submit-button-label:after {
       margin-left: 5px;
}

Do you have any solutions for this button or a different solution in general?

Thank you!