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

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!

Sheet

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

Fraternal

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

Ambulator

Hey, do you have a live preview of this? I'm curious to see how it works... I can't get it to work by just copy pasting. Thanks! – Cranio

Answer 3

You can also create a radial gradient that goes from white to transparent on an overlayed div. I used this awesome css3 generating tool that gives you the all the needed css3 for cross browser compatibility.

http://www.colorzilla.com/gradient-editor/

Hope this helps somebody!

Trujillo

Answer 4

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!

Cranio

Oh and you're going to want to add the -webkit prefixes for Safari as well. But like you said, Safari lets that border-radius creep out a little bit. – Cranio

Don't do this... Dan provided a much better and faster way to get what you are after. – Cranio