<button></button>
body {
	display: flex;
	justify-content: center;
	margin: 0;
	height: 100vh;
}

button {
	align-self: center;
	position: relative;
	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: 
		linear-gradient(#9ea1a6, #fdfdfe) content-box, 
    linear-gradient(#fff, #9c9fa4) padding-box, 
    linear-gradient(#eee, #a4a7ab) border-box;
	
	&:after {
		position: absolute;
		top: 50%; right: .625em;
		padding: .125em;
		width: 1.5em; height: 1.5em;
		border-radius: 50%;
		transform: translateY(-50%);
		background: 
			radial-gradient(circle at 50% 10%, 
				  #f7f8fa, #9a9b9f) content-box, 
			linear-gradient(#ddd, #bbb);
		content: '';
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.