<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.