<button></button>
body {
display: flex;
justify-content: center;
margin: 0;
height: 100vh;
background: #dcdcdc;
}
button {
align-self: center;
border: none;
padding: .625em;
width: 1.75em; height: 1.75em;
border-radius: 50%;
box-shadow: 0 1px .125em #444,
inset 0 1px .125em #fff;
background:
radial-gradient(transparent 35%, #444)
50% calc(50% + .125em) content-box,
linear-gradient(#bbb, #bbb) content-box,
linear-gradient(#d0d3d5, #d2d5d7);
background-size: 175% 175%,
100% 100%, 100% 100%;
font-size: 2em;
cursor: pointer;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.