JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
<a href="#" class="btn btn-primary btn-donate">Donate</a>

CSS

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;
	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;
}