Estou tentando convencer os Gradientes CSS3 (especificamente os radiais) e, assim, acho que me propus um desafio relativamente difícil.

No Adobe Illustrator, criei o seguinte estilo de 'botão'.

Para criar esta imagem, criei um retângulo com a cor de fundo dergb(63,64,63) ou#3F403F, 'estilizei' para ter um raio de borda de 15px.

Apliquei um 'brilho interno' nele com uma opacidade de 25%, desfoque de 8px, branco do centro. Finalmente, apliquei um traço branco de 3 pontos nele. (Estou lhe dizendo tudo isso, caso você queira reproduzi-lo, se a imagem acima não for suficiente.)

Então, minha pergunta é assim:

É possível recriar esse 'botão' usando CSS sem a necessidade de uma imagem?

Eu estou ciente das 'limitações' do Internet Explorer (e pelo bem desse experimento, eu não poderia dar macacos). Também estou ciente do pequeno 'bug' no webkit que renderiza incorretamente um elemento com uma cor de fundo, raio de borda e uma borda (com uma cor diferente da cor de fundo) - ele permite que a cor de fundo sangre nas curvas cantos.

Minha melhor tentativa até agora é bastante patética, mas para referência, aqui está o código:

section#featured footer p a
{
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 3px solid rgb(255,255,255);
    background: rgb(98,99,100);

    background: -moz-radial-gradient(
        50% 50%, 
        farthest-side, 
        #626364, 
        #545454
    );
    background: -webkit-gradient(
        radial, 
        50% 50%,
        1px,
        50% 50%,
        5px,
        from(rgb(98,99,100)),
        to(rgb(84,84,84))
    );
}

Basicamente, terrível. Quaisquer dicas ou sugestões aceitas com gratidão e muito obrigado antecipadamente por elas!