Question

I am in the process of trying to get my head properly around CSS3 Gradients (specifically radial ones) and in doing so I think I’ve set myself a relatively tough challenge.

In Adobe Illustrator I have created the following ‘button’ style.

To create this image I created a rectangle with a background colour of rgb(63,64,63) or #3F403F, then ‘stylized’ it to have a 15px border radius.

I then applied an ‘inner glow’ to it with a 25% opacity, 8px blur, white from the center. Finally, I applied a 3pt white stroke on it. (I’m telling you all of this in case you wished to reproduce it, if the image above isn’t sufficient.)

So, my question is thus:

Is it possible to recreate this ‘button’ using CSS without the need for an image?

I am aware of the ‘limitations’ of Internet Explorer (and for the sake of this experiment, I couldn’t give a monkeys). I am also aware of the small ‘bug’ in webkit which incorrectly renders an element with a background colour, border-radius and a border (with a different color to the background-color) – it lets the background color bleed through on the curved corners.

My best attempt so far is fairly pathetic, but for reference here is the 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))
    );
}

Basically, terrible. Any hints or tips gratefully accepted and thank you very much in advance for them!

Answer 1

It seems like you’re trying to produce a gradient to replicate this:

“I then applied an ‘inner glow’ to it with a 25% opacity, 8px blur, white from the center.”

You can do exactly that using an inset box-shadow. For example:

-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);