CSS3 Gradients to reproduce an 'inner glow' effect from Illustrator with border-radius applied

Question

Hello all! First post on here so please be kind :)

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 a 'button' style which can be seen here:

http://bit.ly/aePPtV (jpg image).

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

Well I got to say... your question interested me a lot so I went at it.

I found a solution, but it does use a nested <span> tag which is a little uncouth, but it is practically identical to your image.

Here's what the HTML looks like:

<a href="/" class="dark-button"><span>Carry on reading&nbsp;&nbsp;&rarr;</span></a>

Notice the nested <span> inside of the <a>. The non-breaking spaces are just there to give the arrow the same amount of room you have in your picture.

And here's the CSS:

a.dark-button { 
    font: 11pt/11pt "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 100; 
    color: white; 
    text-decoration: none; 
    background-color: #555; 
    border: 3px solid white; 
    -moz-border-radius: 15px; padding: 5px 3px; 
    text-shadow: 1px 1px 2px #111;
}
    a.dark-button span { 
        background-color: #666; 
        padding: 2px 12px; 
        -moz-border-radius: 15px;
        -moz-box-shadow: 0 0 1px #666, 0 0 2px #666, 0 0 3px #666, 0 0 4px #666, 0 0 5px #666, 0 0 7px #666; 
    }

Basically to get the inner-glow effect, I did an outer glow (in the form of a drop shadow) from an inner element. Hope that makes sense.

To see it live: http://ianstormtaylor.com/experiments/css-buttons

Have fun!

Answer 2

With no extra markup:

Radial gradients are very difficult to control, and work much more differently across browsers than linear gradients do. And, unlike an inner glow, they will actually be circular rather than matching the mostly-rectangular contours of your box.

Since every browser that allows box-shadows also allows rgba and multiple-backgrounds, I would use a combination of two linear gradients, stacked and using rgba colors - one horizontally and one vertically. Something along these lines (replacing my colors with what you need):

section#featured footer p a {
  background-color: #000;
  background-image: -moz-linear-gradient(
    left, 
    rgba(255,255,255,.5), 
    rgba(255,255,255,0) 10%, 
    rgba(255,255,255,0) 90%, 
    rgba(255,255,255,.5)
  ), -moz-linear-gradient(
    top, 
    rgba(255,255,255,.5), 
    rgba(255,255,255,0) 10%, 
    rgba(255,255,255,0) 90%, 
    rgba(255,255,255,.5)
  );
  background-image: -webkit-gradient(
    /* webkit's syntax for the same horizontal gradient */
    ), -webkit-gradient(
    /* webkit's syntax for the same vertical gradient */
    );
} 

Answer 3

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