<button></button>
body {
display: flex;
justify-content: center;
margin: 0;
height: 100vh;
}
button {
align-self: center;
border: solid .25em transparent;
padding: .25em;
width: 10.75em; height: 4em;
border-radius: 1.375em;
box-shadow: inset 0 1px 1px rgba(#f7f7f7, .875),
inset 0 -1px 1px rgba(#bbb, .75);
background:
radial-gradient(#{at 8.5em calc(50% - 2.625em)}, #f7f8fa, transparent .625em),
radial-gradient(circle at 8.5em 50%,
#afafaf .625em, #ccc calc(.625em + 1px),
#ccc .75em, rgba(#ccc, 0) calc(.75em + 1px)),
linear-gradient(#9ea1a6, #fdfdfe) content-box,
linear-gradient(#fff, #9c9fa4) padding-box,
linear-gradient(#eee, #a4a7ab) border-box;
background-size: 100% 225%, 100%, 100%, 100%, 100%;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.