CSS
body {
background: #A7A9AC;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(.34, rgba(230,237,241,.05)),
color-stop(.67, rgba(230,237,241,0)));
-webkit-background-size: 5px 5px;
}
#pagegradient {
background-image:
-webkit-gradient(
radial,
50% -50,
300,
50% 0,
0,
from(rgba(230, 237, 241, 0)),
to(rgba(230, 237, 241, 0.8)));
height:100%;
left:0px;
position:absolute;
top:0;
width: 600px;
}
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow:
0px 3px rgba(128,128,128,1), /* gradient effects */
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.3)),
color-stop(100%,rgba(255,255,255,0.2))),
/* dark outside gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(210,210,210,0.3)),
color-stop(20%,rgba(210,210,210,0)),
color-stop(80%,rgba(210,210,210,0)),
color-stop(100%,rgba(210,210,210,0.3))),
/* light inner gradient */
-webkit-gradient(
linear,
left top,
right top,
...