and Ly, I don’t think you can alter/distort the shape of the shadow. using “transform” would alter the whole shape, so I can’t think of the good solution without adding extra element there.
I would like to know if somebody figures out!

I tried these mods to your code but it does not look right. It appears the circular photoshop aqua buttons have more of an oval bubble at the top rather than a partial circle. Any advice appreciated! Many thanks!

input[type=button].new-aqua

{

width: 100px;

height: 100px;

background: #cde;

border: 2px solid #ccc;

border-color: #8ba2c1 #5890bf #4f93ca #768fa5;

font: 600 16px/1 Lucida Sans, Verdana, sans-serif;

color: #fff;

text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;

text-align: center;

vertical-align: middle;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;

-webkit-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -45px 0 12px #48c, inset 0 -100px 15px -10px #7ad;

}

to

input[type=button].new-aqua:hover

makes hover work properly on Chrome and Firefox 4.