Code

<div class="grid">
    <div class="list">
        <button><span>Normal</span></button>
        <button></button>
    </div>
    <div class="list">
        <div class="button" role="button">
            <span>Not focusable</span>
        </div>
        <div class="button" role="button"></div>
    </div>
    <div class="list">
        <button disabled><span>Disabled</span></button>
        <button disabled></button>
    </div>
</div>

*,:after,:before {
	box-sizing: border-box
}

body {
	margin: 0;
	padding: 30px;
	background: #f8f8f8;
	min-height: 100vh
}

.grid {
	max-width: 645px;
	margin: 200px auto
}

.list {
	padding: 20px 0;
	display: -webkit-box;
	display: box
}
[role=button],button {
	width: 300px;
	display: block;
	box-flex: 1;
	outline: 0;
	cursor: pointer;
	line-height: 50px;
	background-image: linear-gradient(to top,#d8d9db 0,#fff 80%,#fdfdfd 100%);
	border-radius: 30px;
	border: 1px solid #8f9092;
	box-shadow: 0 4px 3px 1px #fcfcfc,
    0 6px 8px #d6d7d9,
    0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe,
    inset 0 0 3px 0 #cecfd1;
	transition: all .2s ease;
	font-family: "Source Sans Pro",sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #606060;
	text-shadow: 0 1px #fff;
	margin: 0 10px;
	text-align: center
}
[role=button]::-moz-focus-inner,button::-moz-focus-inner {
	border: 0
}
[role=button]>*,button>* {
	transition: -webkit-transform .2s ease;
	transition: transform .2s ease;
	transition: transform .2s ease,-webkit-transform .2s ease
}
[role=button]:hover:not([disabled]),button:hover:not([disabled]) {
	box-shadow: 0 4px 3px 1px #fcfcfc,
    0 6px 8px #d6d7d9,
    0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe,
    inset 0 0 3px 3px #cecfd1
}
[role=button]:hover:not([disabled])>*,button:hover:not([disabled])>* {
	transform: scale(.975)
}
[role=button]:focus:not(:active),button:focus:not(:active) {
	animation: active .9s alternate infinite;
	outline: 0
}
[role=button]:active:not([disabled]),button:active:not([disabled]) {
	box-shadow: 0 4px 3px 1px #fcfcfc,
    0 6px 8px #d6d7d9,
    0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe,
    inset 0 0 5px 3px #999,
    inset 0 0 30px #aaa
}
[role=button]:active:not([disabled])>*,button:active:not([disabled])>* {
	transform: scale(.95)
}
[role=button]:disabled,button:disabled {
	opacity: .6;
	cursor: not-allowed
}

@keyframes active {
	from {
		box-shadow: 0 4px 3px 1px #fcfcfc,
        0 6px 8px #d6d7d9,
        0 -4px 4px #cecfd1,
        0 -6px 4px #fefefe,
        inset 0 0 10px 0 rgba(0,0,250,.6)
	}

	to {
		box-shadow: 0 4px 3px 1px #fcfcfc,
        0 6px 8px #d6d7d9,
        0 -4px 4px #cecfd1,
        0 -6px 4px #fefefe,
        inset 0 0 3px 3px #cecfd1
	}
}