Inner shadow and drop shadow on the same button

HTML & CSS
1

Hi all,

I was handed a design that requires one button to have an inner shadow and a drop shadow on the same button. Is it possible to pull it off in CSS3 or will I need to just make it an image.

I’ve attempted using the inset box-shadow, but so far can only do one or the other. I’ll upload the image to give you an idea of what I’m attempting to do.

Any help is greatly appreciated.

Thank you.

2

Due to support, would just suck t up and use an mage.

Edt-The “eye” key not workng on keyboard. Sorry…

3

if graceful degradation is allowed, as Ryan said Support varies. Tho I consider that since it’s just aesthetic and box-shadow properties are supported by the LATEST version of ALL MODERN browsers the CSS3 way is perfectly logical to use in this case

the trick is to use MULTIPLE, coma separated shadows in your declaration. OH… yeah… you’ll need vendor prefixes as well.

.fancy {

-webkit-box-shadow:inset -2px -2px 2px #fff, 2px 2px 2px #000;
-moz-box-shadow:inset -2px -2px 2px #fff, 2px 2px 2px #000;
box-shadow:inset -2px -2px 2px #fff, 2px 2px 2px #000;}

You wont have support for IE<9 and opera mini. IE<9 box-shadow can be emulated using filters, if it’s that crucial.

4

Thank you so much dresden_phoenix. That did it. I appreciate the help!