<button class="slightly-oval"><span>PAUSE</span></button>
<button class="slightly-oval"><span>STOP</span></button>
<button class="slightly-oval"><span>START</span></button>
<button class="slightly-oval rec"><span>REC</span></button>
*, :after, :before {
box-sizing: border-box;
}
button {
font: 1em/1.1em monospace;
margin: 1em 0.5em;
cursor: pointer;
outline: none;
}
button.rec:hover {
color: red;
}
.slightly-oval span {
position: absolute;
top: 50%; right: 50%;
transform: translate(50%,-50%);
}
.slightly-oval {
position: relative;
width: 100px;
height: 40px;
border-radius: 80% / 20%;
text-indent: 0.1em;
background: #3b57ab;
color: white;
user-select: none;
border: 0;
}
.slightly-oval:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}