Unable to get hover background color work with diagonal cut in CSS-CodePudding

I'm unable to get the hover background color timing to sync with :before. How can I fix this issue? When you hover over the button, you will notice the transition of the background color is not in sync.

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

.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;
  color: #fff;
  margin-left: 15px;
  padding-left: 40px;
  padding-right: 30px;
  padding-top: 2px;
  text-transform: uppercase;
  border-radius: 4px 0 0 4px;
  height: 30px;
  position: relative;
  border: none;
}

.btn-donate:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 30px solid white;
  border-right: 20px solid #053a86;
  width: 0;
}

.btn-donate:hover::before {
  border-right: 20px solid #45aff6;
}

<a href="#" >Donate</a>

CodePudding user response：

Clip path is the solution you need for something like this.

.btn-primary {
    background-color: #2c9ff5;
    border-color: #2c9ff5;
    text-transform: capitalize;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}
.btn.btn-primary:hover {
    background-color: #45aff6;
    border-color: #45aff6;
}
.btn-donate {
    background-color: #053a86;
    color: #fff;
    margin-left: 15px;
    padding-left: 40px;
    padding-right: 30px;
    padding-top: 2px;
    text-transform: uppercase;
    border-radius: 4px 0 0 4px;
    height: 30px;
    position: relative;
    border: none;
    transition: .5s all ease;
}

<a href="#" >Donate</a>

CodePudding user response：

It seems you runned into conflict with browser default styles. You can see default styles in your Developer tools (F12) you just need to enable it. Go to developer tools settings and check "Show browser styles".

This issue can be simply fixed by overriding default styles with your own.

body {
  margin-top: 15px;
}

.btn {
  transition: unset; /* override, this is all you need */
  
  
  display: block;
  height: 30px;
}

.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;
    color: #fff;
    margin-left: 15px;
    padding-left: 40px;
    padding-right: 30px;
  padding-top: 2px;
    text-transform: uppercase;
    border-radius: 4px 0 0 4px;
  height: 30px;
  position: relative;
  border: none;
}
.btn-donate:before {
  content: '';
  position: absolute;
  top: 0; 
  left: 0;
  border-top: 30px solid white;
  border-right: 20px solid #053a86;
  width: 0;
}
.btn-donate:hover::before {
    border-right: 20px solid #45aff6;
}

<a href="#" >Donate</a>

CodePudding user response：

You can just add a background transition to .btn-donate and border transition to .btn-donate:before like so: (added padding bottom to see things)

body {
  margin-top: 15px;
}
.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;
    color: #fff;
    margin-left: 15px;
    padding-left: 40px;
    padding-right: 30px;
  padding-top: 2px;
  padding-bottom: 1rem;
    text-transform: uppercase;
    border-radius: 4px 0 0 4px;
  height: 30px;
  position: relative;
  border: none;
  transition: .3s  ease background;
}
.btn-donate:before {
  content: '';
  position: absolute;
  top: 0; 
  left: 0;
  border-top: 30px solid white;
  border-right: 20px solid #053a86;
  width: 0;
  transition: .3s ease border;
}
.btn-donate:hover::before {
    border-right: 20px solid #45aff6;
}

<a href="#" >Donate</a>