<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
}
}