<input/>
body {
	display: flex;
	justify-content: center;
	margin: 0;
	height: 100vh;
	background: radial-gradient(#4e4e4e, #202020) 50% 100% / 100% 200%;
}

input {
	align-self: center;
  border: solid .375em transparent;
  padding: 1em 3em;
  width: 15.75em; height: 1.75em;
  border-radius: 2.25em;
  box-shadow: inset 0 .5em 1em #111;
  background: 
    radial-gradient(#090909 70%, transparent calc(70% + 1px)) 0 50% content-box, 
    linear-gradient(#090909, #090909) no-repeat 50% 50% content-box, 
    radial-gradient(at 5% 40%, #0b0b0b, transparent 70%) no-repeat 0 35% padding-box, 
    radial-gradient(at 95% 40%, #111, transparent 70%) no-repeat 100% 35% padding-box, 
    linear-gradient(90deg, #3a3a3a, #161616) padding-box,
    linear-gradient(90deg, #2b2d2c, #2a2c2b) border-box;
  background-size: 1.75em 1.75em, 14em 1.75em, 9em 4.5em, 4.5em 4.5em, 100%, 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.