CSS3でWindows7風のボタンを作る

CSS3の新しいセレクタの勉強も兼ねて、作ってみた。でもこれWindows7使いの人だと（自分も含めて）効果が分かりづらい。画像を上げてもあまり意味がないので、試したい方はコピペして見てみてください。動作を確認したのはChrome、Firefoxです（IE？なにそれ？）。以下コード。

CSS

.button{
padding:0;
width:150px;
border-radius:2px;
border:1px solid #707070;
outline-color:transparent;
}
.button > div{
padding:2px;
background:-moz-linear-gradient(#f2f2f2, #ebebeb 50%, #dbdbdb 51%, #cfcfcf);
background:-webkit-linear-gradient(#f2f2f2, #ebebeb 50%, #dbdbdb 51%, #cfcfcf);
border-radius:2px;
border:1px solid #f3f3f3;
}
.button:not(:disabled):hover{
border-color:#3c7fb1;
}
.button:not(:disabled):hover > div{
background:-moz-linear-gradient(#eaf6fd, #d9f0fc 50%, #bee6fd 51%, #a7d9f5);
background:-webkit-linear-gradient(#eaf6fd, #d9f0fc 50%, #bee6fd 51%, #a7d9f5);
}
.button:not(:disabled):focus{
border-color:#3c7fb1;
}
.button:not(:disabled):focus > div{
background:-moz-linear-gradient(#ecf5fa, #e6f2f8 50%, #cee7f4 51%, #bbdbed);
background:-webkit-linear-gradient(#ecf5fa, #e6f2f8 50%, #cee7f4 51%, #bbdbed);
border-color:#34d5fe;
}
.button:not(:disabled):active{
border-color:#2c628b;
}
.button:not(:disabled):active > div{
background:-moz-linear-gradient(#e5f4fc, #c4e5f6 50%, #98d1ef 51%, #68b3db);
background:-webkit-linear-gradient(#e5f4fc, #c4e5f6 50%, #98d1ef 51%, #68b3db);
border-color:#9eb0ba;
}
.button:disabled{
border-color:#adb2b5;
}
.button:disabled > div{
background-color:#f4f4f4;
border-color:#fcfcfc;
}

HTML

<button class="button"><div>test</div></button>

関連記事:

GoogleAppEngineでCSS3PIEを使う