CSSだけで凹むボタン（メモ）

押すとべこっとへこむボタン(ラジオボタン)

html

<input id="btn01" type="radio" name="btn" checked value="">
<label for="btn01">ラーメン</label>
<input id="btn02" type="radio" name="btn" value="">
<label for="btn02">うどん</label>

css

input[type=radio]{
display: none;
}

label{
display: block;
width: 150px;

padding: .5em;
margin:0 .5em .5em 0;
border-radius: 5px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), 0px -9px 2px -7px rgba(0, 0, 0, 0.5) #000000 inset;
-moz-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), 0px -9px 2px -7px rgba(0, 0, 0, 0.5) #000000 inset;
-webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), 0px -9px 2px -7px rgba(0, 0, 0, 0.5) inset;
background-color: #f9f9f9;
text-align: center;
color: #333;
}

input[type="radio"]:checked + label {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), 0px 4px 10px -6px #000000 inset;
  -moz-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), 0px 4px 10px -6px #000000 inset;
  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), 0px 4px 10px -6px #000000 inset;
background-color: #E66430;
color: #fff;
}

べこべこ
チェックボックスでも。