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