<div class="buttons">
  <button class="btn yes">Yes</button>
  <button class="btn no">No</button>
</div>
body {
  display: grid;
  place-content: center;
  margin: 0;
  height: 100vh;
  font-family: system-ui, sans-serif;
}
.buttons {
  display: flex;
  width: 380px;
  gap: 10px;
  --b: 5px;
  --h: 1.8em;
}
.btn {
  border: var(--b) solid var(--_c);
  height: var(--h);
  cursor: pointer;
  font-size: 40px;
  transition: flex 400ms;
  box-sizing: border-box;
}
.btn.yes {
  --_c: #88C100;
  flex: calc(1.25 + var(--_s,0));
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.577*var(--h)) 100%, 0 100%);
  background: conic-gradient(at calc(100% - var(--b)) 0, var(--_c) 209deg, #fff 211deg);
  padding: 0 calc(0.288*var(--h)) 0 0;
  margin: 0 calc(-0.288*var(--h)) 0 0;
}
.btn.no {
  --_c: #FF003C;
  flex: calc(0.75 + var(--_s,0));
  clip-path: polygon(calc(0.577*var(--h)) 0, 100% 0, 100% 100%, 0 100%);
  background: conic-gradient(from -90deg at calc(var(--b)) 100%, var(--_c) 119deg, #fff 121deg);
  margin: 0 0 0 calc(-0.288*var(--h));
  padding: 0 0 0 calc(0.288*var(--h));
}
.btn:hover,
.btn:active:not(:focus-visible) {
  --_s: .75;
}
.btn:active {
  box-shadow: inset 0 0 0 100vmax var(--_c);
  color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.