Ich bin gerade dabei, CSS3-Farbverläufe (insbesondere radiale) richtig in den Kopf zu bekommen, und dabei denke ich, dass ich mich einer relativ schwierigen Herausforderung gestellt habe.

In Adobe Illustrator habe ich den folgenden Schaltflächenstil erstellt.

Um dieses Bild zu erstellen, habe ich ein Rechteck mit der Hintergrundfarbe @ erstellrgb(63,64,63) oder#3F403F, dann "stilisiert", um einen Randradius von 15 Pixel zu erhalten.

Ich habe dann ein "inneres Leuchten" mit einer Deckkraft von 25% und einer 8px-Unschärfe, die von der Mitte weiß ist, darauf angewendet. Schließlich habe ich einen 3pt weißen Strich darauf aufgetragen. (Ich sage Ihnen alles für den Fall, dass Sie es reproduzieren möchten, falls das obige Bild nicht ausreicht.)

Also, meine Frage ist also:

Ist es möglich, diese "Schaltfläche" mit CSS ohne ein Bild neu zu erstellen?

Mir sind die "Einschränkungen" des Internet Explorers bekannt (und für dieses Experiment konnte ich keine Affen angeben). Mir ist auch der kleine Fehler im Webkit bekannt, der ein Element mit einer Hintergrundfarbe, einem Rahmenradius und einem Rahmen (mit einer anderen Farbe als der Hintergrundfarbe) fälschlicherweise wiedergibt - er lässt die Hintergrundfarbe auf der Kurve durch Ecken.

Mein bisher bester Versuch ist ziemlich erbärmlich, aber als Referenz hier ist der Code:

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))
    );
}

rundsätzlich schrecklich. Alle Hinweise oder Tipps dankbar angenommen und vielen Dank im Voraus für sie!