JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<button>

</button>

CSS

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(247, 247, 247, 0.875),
        inset 0 -1px 1px rgba(187, 187, 187, 0.75);
    background:
/*        radial-gradient(.5em .35em at 82% calc(50% - .35em), #f7f8fa, transparent 0.625em),
        radial-gradient(1em at 82% 50%, #afafaf 0.625em, #ccc calc(.625em + 1px), #ccc .75em, transparent calc(.75em + 1px)),*/
        linear-gradient(#9ea1a6, #fdfdfe) content-box, 
        linear-gradient(#fff, #9c9fa4) padding-box, 
        linear-gradient(#eee, #a4a7ab) border-box;
        position: relative;
  }
button::after
  {
    content:'';
    position: absolute;
    top: 50%;
    right: 8%;
    width: 2em; height: 2em;
    border-radius: 50%;
    transform: translateY(-50%);
    background:
        radial-gradient(.5em .35em at 50% calc(50% - .35em), #f7f8fa, transparent 0.625em),
        radial-gradient(1em at 50% 50%, #afafaf 0.625em, #ccc calc(.625em + 1px), #ccc .75em, transparent calc(.75em + 1px));
  }