html – Unable to get hover background colour work with diagonal reduce in CSS

I am unable to get the hover background colour timing to sync with :earlier than. How can I repair this subject?
Whenever you hover over the button, you’ll discover the transition of the background colour is just not in sync.

JSFIDDLE DEMO: https://jsfiddle.web/7c25wmuz/

HTML:

<a href="#" class="btn btn-primary btn-donate">Donate</a>

CSS:

.btn-primary {
    background-color: #2c9ff5;
    border-color: #2c9ff5;
    text-transform: capitalize;
}
.btn.btn-primary:hover {
    background-color: #45aff6;
    border-color: #45aff6;
}
.btn-donate {
    background-color: #053a86;
    colour: #fff;
    margin-left: 15px;
    padding-left: 40px;
    padding-right: 30px;
  padding-top: 2px;
    text-transform: uppercase;
    border-radius: 4px 0 0 4px;
  top: 30px;
  place: relative;
  border: none;
}
.btn-donate:earlier than {
  content material: '';
  place: absolute;
  high: 0; 
  left: 0;
  border-top: 30px strong white;
  border-right: 20px strong #053a86;
  width: 0;
}
.btn-donate:hover::earlier than {
    border-right: 20px strong #45aff6;
}